1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I need help with css

Discussion in 'HTML & Website Design' started by Adnan Rizvi, Aug 30, 2012.

0
  1. #1
    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; cursor:pointer;}
    .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! :(
     

    Attached Files:

    • dg.jpg
      dg.jpg
      File size:
      8.4 KB
      Views:
      91
    Adnan Rizvi, Aug 30, 2012 IP
  2. Mili19

    Mili19 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    i am not able to download the images
    if you can send youe code and images to



    i can help.....
     
    Mili19, Aug 30, 2012 IP
  3. innovativ

    innovativ Greenhorn

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    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.
     
    innovativ, Aug 30, 2012 IP
  4. bar.developer

    bar.developer Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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">
     
    bar.developer, Aug 31, 2012 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    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.
     
    deathshadow, Aug 31, 2012 IP
  6. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #6
    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/
     
    CSM, Aug 31, 2012 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    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.
     
    deathshadow, Aug 31, 2012 IP
  8. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #8
    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
     
    CSM, Aug 31, 2012 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    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.
     
    Last edited: Aug 31, 2012
    deathshadow, Aug 31, 2012 IP