i need help. this is my html text <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Untitled Document</title> </head> <div class="top-menu"> <ul class="menu"> <li class="current"><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><img src="images/top-menu-bg.jpg"><div class="logo"><img src="images/logo1.png"></div> </div> <body> </body> </html> and this is CSS @charset "utf-8"; /* CSS Document */ body { background-color: #CCC; font-family: Arial, Helvetica, sans-serif; margin: 0px; } .top-menu {background:url('images/top-menu-bg.jpg');} .logo{width:auto; height:auto; float:left; margin-top:10px; margin-left: 10px; } .menu{list-style:none;width:auto;float:right;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#FFF;margin:0 auto} .menu li{font-weight:bold;float:left;text-align:center;border:none;position:relative;min-height:1px;vertical-align:bottom;margin:30px 0px 0 20px;padding:10px 10px 8px 10px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -webkit-transition:background-color 0.5s;-moz-transition:background-color 0.5s;-o-transition:background-color 0.5s;-ms-transition:background-color 0.5s;transition:background-color 0.5s;} .menu li:hover, .menu li.current{background-color:#0090ff; cursorointer;} .menu li a{font-size:16px;color:#FFF;text-decoration:none;display:block;} i need help aligning the logo and menu on the top menu, over the background. but it keeps screwing up! someone plz help!
You cannot put two images one over the other. You have to define background picture in css as background instead of using <img src> in html file.
you can put the logo bg image as a background of the logo div change the logo class in the css to: .logo{width:auto; height:auto; float:left; margin-top:10px; margin-left: 10px; background: url(images/top-menu-bg.jpg) no-repeat center; } and remove the: <img src="images/top-menu-bg.jpg">
1) your DIV go INSIDE body, not between BODY and HEAD 2) ease up on the blasted DIV -- UL is a perfectly good block-level container, you don't need to waste time 3) The logo is probably a presentational affectation of some form of text, so it doesn't belong in a IMG tag in the first place... likewise you have a IMG tag that I assume 'bg' means background -- so that too has no business in the markup! 4) since it's obviously a heading, and most likely the heading under which all subsections of the page are, well... subsections, it should be a H1... with a image replacement on it. 5) Don't waste time saying the character encoding on a document like CSS, where the only valid characters are ASCII7. 6) be a lot easier to deal with if you didn't make the CSS an illegible mess by cramming everything onto single lines. ENTER and TAB, use them! 7) styling LI causes a lot of headaches in some versions of FF and IE; most of what you're doing in the menu belongs on the anchors. 8) No MEDIA attribute and the pointlessly vague name "style" for the CSS? Tsk.. tsk... tsk... 9) I would also suggest using an actual recommendation doctype instead of the HTML 5 asshattery -- but even if 5 reached recommendation I wouldn't recommend that idiotic steaming pile for production use. So first, let's fix the markup: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Untitled Document </title> </head><body> <h1> Site Name <span><!-- image replacement sandbag --></span> </h1> <ul id="topMenu"> <li><a href="#home" class="current">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </body></html> Code (markup): I like to put the opening and closings for HTML, HEAD and BODY with no whitespace between them so as to prevent me from making the mistake you did. /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dd,dt, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } body { font:normal 85%/150% arail,helvetica,sans-serif; background: #CCC; } h1 { position:relative; /* to apo span */ zoom:1; /* trip haslayout, fix positioning bugs IE */ /* 10px padding + 28px line-height == 48px tall so a negative margin of that much rides #mainMenu up over this! Basically we're making the h1 zero height in flow. AVOID DECLARING width/height same time as padding/border! */ margin-bottom:-48px; padding:10px; font:bold 24px/28px arial,helvetica,sans-serif; /* include colors for images off users! */ color:#FFF; background:#06C url(images/h1Background.png) 0 0 repeat-x; } h1 span { /* logo image */ position:absolute; top:0; left:0; width:320px; height:48px; background:url(images/h1Logo.png); } #mainMenu { position:relative; /* depth sort over h1 */ list-style:none; float:right; padding:5px 10px 5px 5px; font:bold 16px/18px arial,helvetica,sans-serif; } #mainMenu li { display:inline; /* don't even TRY to do more with these */ } #mainMenu a { float:left; padding:10px; text-decoration:none; color:#FFF; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-transition:background-color 0.3s; -moz-transition:background-color 0.3s; -ms-transition:background-color 0.3s; -o-transition:background-color 0.3s; transition:background-color 0.3s; } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { background:#09F; } Code (markup): The logo image would have to be opaque to hide the text behind it -- but that text is important for screen readers, search engines, and proper document structure, much less people who browse with images disabled due to limited bandwidth connections -- like mobile, like metered connections, etc, etc... The real magic though is putting the h1 and it's background (repeating full width) first with it's text, positioning the logo as the background of a span over that text, then using a negative margin to make the h1 have zero 'flow height' so the menu renders over it.
The image replacement method above is a very bad method. Using margin-bottom:-48px ... and position absolute is bad coding technique. Check out the following post to find your solution for image replacement methods: http://css-tricks.com/css-image-replacement/
Given that the image replacement is method #8 on that page?!? You know, gilder-levin?!? The recommended method if you give a flying **** about accessibility? The margin bottom being completely unrelated to the image replacement and simply being a normal 'remove element from flow' approach to building the menu over that background without resorting to extra pointless wrapping DIV or dicking with extra float behaviors? You might want to look at what it's doing BEFORE running your mouth on something you obviously didn't understand.
There is no reason to "attack" me like you did. You don't know s**t what I understand and what I do NOT understand. End of discussion
Apologies if you considered that an 'attack' -- was intended as a response in kind. Turnabout being fair play and all. Given you called something 'bad method' and 'bad code', then linked to a page that of the techniques listed the best of them is the one used here; and then seemed to be saying something unrelated to the image replacement had something to do with it... You said one thing, then linked to a page that does the same -- What conclusion would you expect me to draw from that in regards to your 'understanding'? Though I consider CSS-tricks little 'report cards' a wee bit flawed -- since why the blue blazes would you care if a image replacement still shows the image with CSS off -- if the image is screen presentational, and as such is in the CSS, it has no business being shown CSS off -- which is why gilder-levin, method #8, the ONE I USED (with a minor change to improve it's IE7 behavior -- actually stating top/left and putting it after the CDATA) -- is the best of the methods presented there. That goes with my opinion of that broken inaccessible train wreck they call a website anyways though... what with the absurdly undersized px metric fonts in the sidebars, illegible color contrasts in many spots, illegible acid trip code boxes, and the absolute re-re markup in terms of things like header navigation -- pretty much what one expects from people using the HTML 5 doctype, Paul Irish's idiotic IE conditional crap on the HTML tag, gibberish use of horizontal rules breaking flow text, and endless pointless static javascript inlined in the markup for absolutely NOTHING of any value.