Hi all, Iv created the following .jpg http://fc02.deviantart.com/fs32/f/2008/234/a/b/testersss_by_kyllle.jpg which Im trying to replicate using html & css, Iv tried to poition the buttons etc at the top but having trouble inserting the text below the sub vavigation and also having trouble making the left navigation appear one below the other like intended in the .jpg, Iv added text in to were I hope to place the orange background but nothing seems to look right, were am I going wrong?? please advise as this is really getting to me!! current site http://www.glen-lodge.co.uk/testing_arena.html Kyle
I have been trying to sort out these problems and I am making some head way although I was wondering if anyone could point me in the right direction with the following problems 1) how can I add the little piece of text on the right hand side under the sub nav links?? 2) the buttons down the left column view great in ie but in firefox they dont seem to show any gaps between, what seems to be causing this 3) how do I add the footer to the bottom of the page your time is appreciated, im really trying to get ontop of this!! Thanks again!! Kyle
1 Split up your header into the following segments: header (holds all the header info) logo (holds the images - inside of header / float left) info (holds everything to the right - inside of header / float right) menu (holds the menu - inside of info / float right) description (holds the text - inside of info / float right) 2 For IE you have to have something 22px or taller I think. Try making the buttons bigger. 3 Create a class called footer and float it left.
My advice is to first work from the top down creating your HTML to say WHAT things are with no concern to how it's going to look. Honestly, starting from a picture to me is doing it WRONG - you should first have your content marked up semantically, then you create your layout using CSS, then and only then should you be starting up the goof assed paint program to hang graphics on your layout. The entire document will get wrapped in a #container DIV - this way if you go fixed width, fluid or semi-fluid you have something to manipulate. The first thing on the page is that oddball logo, being the heading common to all pages much like a newspaper that would be your H1 (your semantics experts will spend hours arguing over whether this should be a h1 or a div, I say H1). Include the text, dump a span inside it for a glider-leving style image replacement. I have no idea what the devil that 'here is now' thing is supposed to be besides engrish moist goodry, so I'd skip that for now assuming it to be an unimportant element or something that requires scripting. If I were to include it I suspect the 'here is now' text is a h2 for the paragraph to the right of it? So a div, h2 and P Then there's the main menu and smaller submenu below that - what is a menu but a list of options... List? We have a tag for that, so mark that up those as a pair of UL. I see a breadcrumb trail there? That too is a UL. Below that you have a content area and a sidebar. For versatility I would wrap the content area in two div, #contentWrapper and #content. You have rounded corners so I'd use a sliding doors technique to implement those so that's a .topBorder and .bottomBorder div with a classless sandbag inside them... and a .middleBorder around the two paragraphs. THOSE are paragraphs, mark them up as such. Next is #sideBar - that's a div, which has a ul inside it. I almost didn't see your rounded corners (they are so tiny) so that would be a list of anchors with empty span inside them for another sliding doors implementation. Leaving just the footer. Set a clear on it to be sure, those three links are again a list, which I would put first and float:right, making placement of that little bit of text easy. Once you have semantic markup you can then (and only then) start applying appearance via CSS. First I would use a reset - for development I use the * {margin:0; padding:0;} but for deployment or should forms become involved, I use /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div,form, h1,h2,h3,h4,h5,h6, hr,ul,li,menu,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } Code (markup): Set your default font size and line-height on body (I like 85%/140%, YMMV) - NEVER trust the default line-height. The h1 gets its font size set to match the logo - some formatting tricks could be implemented at this point too so long as the size remains the same as the image. Apply position:relative to the h1, use absolute positioning on the span, set the span's dimensions the same as the image, and apply the image as a background to the span. This is called 'glider-levin image replacement'. Float the h1 left to make room for the other content. For the various UL's you'll want to set list-style:none to strip the bullets. On both lists I'd set the LI to display:inline; and the UL's to float:right - you can then make the anchors inside them float:left and the whole thing will still be right justified. Since you don't have anything fancy like rounded corners there you could just set the background colors on the first one with a bit of margin, while on the second menu you could use margin-right for your dividers and a .last class on the last one to not put a divider after it. That 'get it now' thing I have no clue how I'd position it, it looks like an element that's 'out of place' in the layout. I guess I'd give it a left margin to push it in, and a negative top margin to ride it up next to the h1 after clearing (since I'd not trust float here). Breadcrumbs - that's simple. Display:inline the whole thing, good enough. #contentWrapper gets set to 100% width and float:right. #content gets margin-left equal to the width of #sideBar. #sideBar gets a width set, float:right, and a negative right margin equal to it's width. This will 'ride it up' next to our dynamic width column. You can read more about this type of trickery at: http://battletech.hopto.org/html_tutorials/3coldiv/template.html Inside #content we'd have made a .top and .bottom div with a nested classless div inside them like <div class="topBorder"><div></div></div> to which our rounded corners would be applied. For sliding doors I'd make .topBorder have a margin-left equal to our content area width, then have the div inside it absolute positioned left:100%; - same background image on both, the inner one having a different background position. See this page for information on doing rounded corners using only ONE image: http://battletech.hopto.org/html_tutorials/eightcorners/template.html The menu inside #sideBar would be handled in much the same fashion. Leave everything as display:block, set position:relative on the anchors and position:absolute on a dummy span inside them to sliding-doors the rounded corners - again likely off a single image. The fonts here should be in PX since we're stuck inside a fixed width container and word-wrap might have odd results. Then the footer. Float the list right, float the anchors left, let the text flow normally.
wooooooow deathshadow thanks so much for your time and your valued advise I will bear it all in mind as i try to understand teh world of css!!!! no doubt i will be plauging you again at some stage so until then Thanks soooooo much!!! Kyle