SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about CSS styling

    I want to know how can I contain the header within the mainWrapper and center the mainWrapper together with the header and have everything center.

    You can use firebug to see thank you.

    Co.ador

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    the way to center something is to give it with and then use margin :0 auto;

    if I understand what you are saying correctly you want this:
    HTML

    <div id="mainWrapper">
    <div id=Header">
    <h1>something here<h1>
    <ul id="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    </div>
    <div id="content>some content</div>
    </div>

    #mainWrapper{ width:960px; margin:0 auto;}/* this centers the page*/

    hope that helps

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I tried to give the mainWrapper a with and a margin of 0 auto; but some how the Table_01 id won't wrap inside the mainWrapper or inherit the properties of the mainWrapper div.

    I know I have so many mistakes

    I was wondering if in the Table_01 Id should changed to a class because that's the whole header right there wrapped inside that Table_01 id which some how is not inside the mainWrapper div I don't know why. Even though I have wrap it inside the mainWrapper dive. The HTML is below the CSS.



    Code:
    <style type="text/css">
    
    body {
    	width:1150px;
    	margin-right:0px
    	}
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	line-height:1.5em;
    }
    
    a:link {
    	color: #00C;
    }
    a:visited {
    	color: #00C;
    }
    a:hover {
    	color: #000;
    }
    a:active {
    	color: #FFF;
    }
    #pageHeader {
    	
    	
    	}
    	
    	#mainWrapper {
    		margin-left:0px;
    		padding:0px;
    		}
    #pageContent {
    	margin:90px 0 0 0;
    	padding:0;
    	
    	}
    	
    
    
    	
    		#pageContent table .reuno {
    	
       width:500px;
       padding:0px;
       margin:0px;
    	
    	}
    		#pageContent table .reuno2 {
    	
       width:150px;
       padding:0px;
       margin:0px;
    	
    	}
    		#pageContent table .reuno3 {
    	
       width:150px;
       padding:0px;
       margin:0px;
    	
    	}
    	#pageContent table .reuno4 {
    	
       width:28px;
       padding:0px;
       margin:0px;
    	
    	}
    #pageFooter{
    	
    	}
    	
    DIV.dynamicList
    {
    	position: relative;
    	float: left;
    	overflow: hidden;
    	padding: 0 0px 40px 0;
    	margin-right: 0px;
    	margin-bottom:9px;
    	font: 7.5pt/1.2 sans-serif;
    	width: 325px;
    }
    DIV.dynamicList .alone img{
    margin-right:12.5px;
    width:200px;
    float:left;
    
    	
    	}
    	DIV.dynamicList .alone {
    		height:100%;
    		width:px;
    		line-height:0px;
    		
    		}
    DIV.dynamicListF {
    margin:0px px 0px 0;
    float:right;	
    width:100%;
    height:100%
    	}
    	dynamicListS {
    		
    		
    		}
    DIV.dynamicList A
    {
    text-decoration: none;
    color: #666;
    font-family: Verdana, sans-serif;
    margin: 0px;
    line-height: 1.9;
    float:left;
    
    }
    
    .Divinfo {
    	width:100px;
    
    	padding: 0 0 0 0;
    	 margin: 70px 0 0 0px;
    	 line-height:0px;
    	 boder:0;
    	 float:left;
    	 
    	}
    	.Divinfo p {
    		text-align:right;
    		float:left;
    		
    		}
    .Divinfo .clear {
    	
    	clear:both;
    	}
    	
    #mainWrapper #Table_01 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:1150px;
    	height:100px;
    	margin-left:55px;
    	
    }
    
    #mainWrapper #header2-01 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:70px;
    	height:100px;
    }
    
    #mainWrapper #header2-02 {
    	position:absolute;
    	left:70px;
    	top:0px;
    	width:718px;
    	height:58px;
    }
    
    #mainWrapper #header2-03 {
    	position:absolute;
    	left:788px;
    	top:0px;
    	width:250px;
    	height:100px;
    }
    
    #mainWrapper #header2-04 {
    	position:absolute;
    	left:1038px;
    	top:0px;
    	width:110px;
    	height:39px;
    }
    
    #mainWrapper #header2-05 {
    	position:absolute;
    	left:1148px;
    	top:0px;
    	width:2px;
    	height:100px;
    }
    
    #mainWrapper #header2-06 {
    	position:absolute;
    	left:1038px;
    	top:39px;
    	width:110px;
    	height:61px;
    }
    
    #mainWrapper #header2-07 {
    	position:absolute;
    	left:70px;
    	top:58px;
    	width:718px;
    	height:7px;
    }
    
    #mainWrapper #header2-08 {
    	position:absolute;
    	left:70px;
    	top:65px;
    	width:30px;
    	height:35px;
    }
    
    #mainWrapper #header2-09 {
    	position:absolute;
    	left:100px;
    	top:65px;
    	width:115px;
    	height:30px;
    }
    
    #mainWrapper #header2-10 {
    	position:absolute;
    	left:215px;
    	top:65px;
    	width:137px;
    	height:30px;
    }
    
    #mainWrapper #header2-11 {
    	position:absolute;
    	left:352px;
    	top:65px;
    	width:107px;
    	height:30px;
    }
    
    #mainWrapper #header2-12 {
    	position:absolute;
    	left:459px;
    	top:65px;
    	width:142px;
    	height:30px;
    }
    
    #mainWrapper #header2-13 {
    	position:absolute;
    	left:601px;
    	top:65px;
    	width:187px;
    	height:35px;
    }
    
    #mainWrapper #header2-14 {
    	position:absolute;
    	left:100px;
    	top:95px;
    	width:501px;
    	height:5px;
    }
    </style>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Store Home Page</title>
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    </head>
    
    <body>  
    
        <div align="center" id="mainWrapper">
    
           <div id="pageContent"><div id="Table_01">
    	 <div id="header2-01">
                <img src="images/header2_01.jpg" width="70" height="100" alt="">
             </div>
             <div id="header2-02">
               <a href="http://www.nyhungry.com/storeprueba/index.php"><img src="images/header2_02.jpg" width="718" height="58" alt=""></a>
    	  </div>
    	<div id="header2-03">
    		<img src="images/header2_03.jpg" width="250" height="100" alt="">
    	</div>
    </div>
    
    
    <table width="100%" border="0" cellpadding="2">
      <tr>
        <td width="1029" height="23"><img src="http://www.nyhungry.com/storeprueba/style/Logo.jpg" width="144" height="17" alt="logo" /></td>
        <td width="151" align="center"><a href="http://www.nyhungry.com/storeprueba/cart.php"><strong>Your Cart</strong></a></td>
      </tr>
      <tr>
        <td height="23" colspan="2"><a href="http://www.nyhungry.com/storeprueba/index.php">Home</a>&nbsp;&middot;&nbsp;
     <a href="">Products</a>&nbsp;&middot;&nbsp;<a href="#">Help</a>&nbsp;&middot;&nbsp;<a href="#">Contact</a></td><td width="14"></td>
        </tr>
      
      </table>
    
      </div>    
      
    <div align="center"></div>
        <table width="100%" border="0" cellspacing="0" cellpadding="10">
        <tr>
          <td class="reuno2" width="182" height="92" valign="top">
            <h3>Side Bar left</h3>
            <p> Temporary:<br />
            </p>
          </td>
          <td class="reuno4" valign="top"></td> 
          <td class="reuno" valign="top"><p>Newest items Added to the Store</p>
          <p>
    
    
        <div class="dynamicList">
           <div class="alone">
    	<div class="dynamicListF">
             <a href="product.php?id=2"><strong>Dress Pants</strong></a>
            </div>
    	<a href="product.php?id=2">
              <img style="border:#666 1px solid;" src="inventory_images/2.jpg" alt="Dress Pants                   "align="left" width="178" height="230" border="1" />
            </a>
            <br />
         
    <div class="Divinfo">
         <div >
           <p >Price:</p>
           <p >  $40</p> 
         </div>
      <div class="clear"></div>
         <div >
         <p >Category:</p>
           <p> Clothing</p> 
         </div>
         <div>
    	 <div class="clear"></div>
            <p >Model:</p>
            <p> Pants</p> 
         </div> 
       </div>
    
       <tr>
       <td class="reuno3" valign="top">
         <h3>Handy Tips</h3>
          <p>Right side Bar</p></td> 
       </tr>
    
    </table>
     </div>
      </div>
        <div id="pageFooter">Copyriht |  <a href="http://www.nyhungry.com/storeprueba/storeadmin/index.php">Admin</a>
      </div>
    
    </body>
    </html>

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Do you have a live version running somewhere? Or something you can throw up on a server? There are tables in your mainWrapper and I'd like to see if they are the ones causing issue.

    If you have a live version we'd like to see it with your attempt to add a width and automargins on it. The code you posted doesn't show that for mainWrapper.

    but some how the Table_01 id won't wrap inside the mainWrapper or inherit the properties of the mainWrapper div.
    #Table_01 isn't going to listen to any of your other code, because you've absolutely positioned it. Abso-po'd things are in their own little universe.

  5. #5
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Live Site
    Store Home Page

    What do you suggest in that case?

    Please take a look at the live server.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Thanks.

    First things first, add back in the width you want and the automargins to mainWrapper. (and, I'd remove the width set on the body unless there's some reason for that I don't know: the width on mainWrapper will do all your width work).

    That won't magically fix your page, but we've got to see who's not centering once you do that (and remove the align=center too... so far as I know, that'll just center text inside mainWrapper, not center mainWrapper itself).

    Post here when you've done that, so we can look again.
    : )

  7. #7
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it did Center Mr. mainWrapper id and all inside it except for Mr. Table_01 that his absolute position is ruling. I changed to relative position but then all the other properties need somework in alignment. I have used photoshop and sliced everything, saved it as web and sites then generate the Css. it generated everything inside Table_01 which is the header.


    any other suggestions, in what I believe the next step is Table_01 the uncontrollable.

  8. #8
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is all center now but even through it is all center table_01 is not inside the mainWrapper theoretically speaking.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I wouldn't even relatively position it, unless it needs to be a positioned ancestor for abso-po'd stuff inside it.

    You said you have Firebug?

    If you look with Firebug, you'll see that the body isn't starting right at the top of the page. pageContent has a top margin of 90px... this is a collapsing margin. So, this means the body is the one actually showing the margin. Go ahead and remove that top margin.
    Keep the absolute positioning off the table_01 box (so, it'll center) and then, in your image editor, UNSLICE all those images!

    What most web developers do when making a header like yours is, they would have a single, solid background image to place in the header. The background image does NOT have the text (so I hope you have those in separate layers in your PSD).

    This way all your elements inside will only be the ones with text (instead of a div for each slice of the image).

    You can have much much simpler code if you do it like this!

    But if you already did too much work to get it the way it is, I see you've absolutely positioned all those slice divs..
    so this means table_01 has to be position: relative so those inner divs know who they are referencing (so they know that 0, 0 is the top left corner of table_01).

    Which do you want to do? Redo the header and have simpler code, or just fix what you've got to make it look ok?
    We can help with either one (tho I'm going offline in a bit).

  10. #10
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using firebug, and I can see the 90px margin in yellow.

    I would like to redo it and practice it the best approach.


    You mean to have all in one image instead of having different parts like I have it now?


    I took away the 90px margin in the pagecontent, I also took off the 55 margin left for the Table_01, everything is center. I can notice that even though all the properties set to absolute position inside the Table_01 will now to position absolute but inside the Relative positioned Table_01. That great to know, when before abosolute was behaving independent. now I wonder how magically Table_01 set to relative position will control all the absolute position elements inside itself.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You mean to have all in one image instead of having different parts like I have it now?
    Yes.

    now I wonder how magically Table_01 set to relative position will control all the absolute position elements inside itself.
    It's part of the rules of positioning. Absolutely positioned elements look for a "nearest positioned ancestor". This is an ancestor (parent, grandparent, etc) who is either "position: absolute" or "position: relative". If they don't find one of these, then they'll use the viewport as their reference. They have to pick something to mean "top left corner" so they know where 0, 0 is supposed to be.

    So if you need to have a bunch of positioned stuff inside a container, setting that container to position: relative means it doesn't fall out of the document flow and can still be a reference for the abso-po'd elements inside it.

    So, do you have a layered PSD (or .xcf) of this image where it's pretty easy to have a separate blue section without the text?

  12. #12
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good principle, of the absolute position elements looking for the nearest relative position element.

    Yes I have a PSD, it has the separated by layer where I can edit, combines all the slices if I want.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    OMIGOD, 77.5MB! Gimp crashed and my whole GUI died!

  14. #14
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol..

    it is a very splashy one.

    How do you join all the slices? and still can make a link separate for each one of them?

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, you don't.

    If there's a layer who is just the blue background, that's going to be the background of a single element called #header. Just one box. So the background image will be a jpg probably, as small as you can possibly make it without too much artifact.

    Where you're using slices of images to make spacing on the sides... don't need that. You'll use padding on #header and/or margins on the child elements inside.

    Inside #header you'll have your other text elements. I'm not sure what you want your site name to be: an h1 or just a p. But you would just mark up that title, the cart text, and the menu (an unordered list).

    You can float the cart text right. The title/site name text can be floated left. A simple thing you can do for the title is something like this:
    let's say you figure it's an h1.
    <h1><a href="home"><img src="nyhungrylogo.png" width="" height="" alt="NY Yardsell!" /></a></h1>
    If you style the h1 a text, like make it large and white, then if the image doesn't appear there'll be some large, white alt text (some browsers don't support styling like that though).

    The menu text can probably just be styled with CSS, though if you're in love with that text shadow for all browsers you could use either the image code like I did for the title above, or (better) something like Gilder-Levin image replacement, which allows you to have a hover/focus image too. If you do the whole menu as a single image sprite, you'll save on bandwidth and it'll be faster than swapping whole separate images on :hover.

    To place things where you want them, using padding and margins is the way most professionals do it (rather than brittley absolutely positioning everything), but it takes time to learn to get that right.

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Sorry this took a while: I'm battling some Javascript this week.

    Anyway, I didn't forget about you.

    Here's what I did:

    I took a screenshot of the header you've got now, and made 4 headers in one page:
    Store Home Page

    I suggest you copy everything in the "coador" directory and save a copy on one of your own machines, since this won't stay on my server indefinitely. I do regular cleanup.

    What I have "looks" ok at stage 4 (#header4) except Opera's doing something strange, which I'll investigate further. Still, even this Opera bug will not actually affect your header.

    The first version is markup I would likely use. I'm not sure what's going on with "Your Cart" so I thought, if it's on every page, it's kinda part of the site navigation? So I added it there. I used a <p> (couldn't think of anything better) for your site name (you could use a header if you think it's a page header), and so #header1 you can see the basic setup. There's not much there, HTML-wise. You can see this is way less markup than what you currently have with all the slices.

    The second header shows just adding the background. I would keep the background-colour I've added (or some other dark colour) so that when images don't load, your white text is readable (we're going to style the anchors and yours are white).

    The third header shows approximately what the header would look like if we simply positioned stuff using floats and margins. This looks the same in IE6, IE7, Firefox3, Chrome something, Safari and Opera. If you make a different background image (one without the text on it, so likely the bottom layer of your ginormous PSD), then you could maybe use this type of code (you could try out some of the CSS3 text-shadow stuff for the menu and image replacement or @font-face maybe for the logo).

    The fourth header shows just using images. Every image has appropriate alt text: do NOT leave this out. And because usually (not all browsers) if there are no images, the browser might set anchor styling onto the child alt text, I've styled the anchors still (font, weight, size, hover/focus changes).

    The "bad" thing about this last version is, unless you switch to the slightly more complicated Gilder-Levin or similar image replacement system, your images give little feedback to users that they are clickable: there's no change other than the mouse becomes a hand and Internet Exploder shows the alt text (a known, old bug). Ideally there would be something changing (currently you have the border change colour, but I didn't think you intended borders).

    Also, the code in that example is larger than it needs to be simply because I have 4 different versions. All you really need, if you did #4:
    Code:
    <!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" />
        <meta http-equiv="content-language" content="en" />
        <title>Store Home Page</title>
        <meta name="description" content="headers" />
        <style type="text/css">
    * {
      margin: 0;
    }
    
    html, body, ul {
      padding: 0;
    }
    
    img {
      vertical-align: bottom;
      border: 0;
    }
    
    #container {
      width: 1150px;
      margin: 0 auto;
      border: 1px solid #f00;
    }
    
    #header {
      width: 100%; /*IE Haslayout wrap floats*/
      background: #615096 url(bg2.png) 0 0 no-repeat;
    }
            /*wrap floats modern browsers*/
            #header:after {
              content: " ";
              display: block;
              clear: both;
              height: 0;
            }
    
            #sitename {
              float: left;
              width: 220px;
              height: 58px;
              margin-bottom: 8px;
            }
    
            /*this hopefully styles alt text for no images*/
            /*ALL anchors in the header*/
            #header a {
              color: #fff;
              font: bold 46px georgia, "urw bookman l", serif;
              text-decoration: none;
            }
                    #header a:focus,
                    #header a:hover,
                    #header a:active {
                      color: #ffd55a;
                      text-decoration: underline;
                    }
     
            #header ul {
              list-style: none;
              clear: both;
              margin-left: 112px;
              margin-bottom:5px;
            }
                    #header li {
                      display: inline;/*stop IE staircasing*/
                    }
                    #header ul a {
                      float: left;
                      min-width: 80px;/*this keeps text separated when images off in collapsing browsers like Firefox*/
                      text-align: center;
                    }
    
                    #header ul a.cart {
                      float: right;
                      height: 39px;
                      margin-top: -66px;
                    }
        </style>
      </head>
    <body>
      <div id="container">
        <div id="header">
          <p id="sitename"><a href="home"><img src="logo.png" width="220" height="58" alt="Yoursell!" /></a></p>
          <ul id="menu">
            <li><a href="#"><img src="home.png" width="91" height="30" alt="Home" /></a></li>
            <li><a href="#"><img src="products.png" width="112" height="30" alt="Products" /></a></li>
            <li><a href="#"><img src="help.png" width="85" height="30" alt="Help" /></a></li>
            <li><a href="#"><img src="contact.png" width="108" height="30" alt="Contact" /></a></li>
            <li><a href="#" class="cart"><img src="yourcart.png" width="124" height="39" alt="Your Cart" /></a></li>
          </ul>
        </div>
      <p>...rest of the site</p>
      </div>
    </body>
    </html>

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    The "bad" thing about this last version is, unless you switch to the slightly more complicated Gilder-Levin or similar image replacement system, your images give little feedback to users that they are clickable:
    Which (excuse me SP for stepping in from the other thread) is why NONE of those images even belong in the markup.

    EVERYTHING in there as "images for text" to me at least, has no business being in IMG tags. NONE of those images are actually content images, and as such have NO BUSINESS IN THE MARKUP after 1998. (though it took until about 2003 for developers to wake up to that).

    Even SP's new remake leaves me asking "Why are these IMG tags, why are those paragraphs, hat's the extra wrapping div AROUND them for, and what's with the cart in the UL when it doesn't look like part of the menu"

    Which is why my markup would end up something like:
    Code:
    <!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"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Opera Layout Test
    </title>
    
    </head><body>
    
    <!--
    	Empty SPAN are image replacement sandbags
    -->
    
    <div id="pageWrapper">
    
    	<h1>
    		<a href="\">
    			YOURSELL!
    			<span></span>
    		</a>
    	</h1>
    
    	<div id="topCart">
    		Your Cart:<span></span><br />
    		<a href="#">
    			3 items<br />
    			$89.50
    		</a>
    	</div>
    
    	<ul id="mainMenu">
    		<li class="home"><a href="#">Home<span></span></a></li>
    		<li class="products"><a href="#">Products<span></span></a></li>
    		<li class="help"><a href="#">Help<span></span></a></li>
    		<li class="contact"><a href="#">Contact<span></span></a></li>
    	</ul>
    
    <!-- #pageWrapper --></div>
    
    </body></html>
    No IMG tags so images off there are no layout worries, Semantic markup so it actually degrades CSS off, etc, etc...

    Gimme a few and I'll toss together the CSS and image (singular) I'd use for that header.

    That whole original page is filled to the brim with endless DIV and span for NOTHING, paragraphs around non-paragraph elements, tables for NOTHING, classes for NOTHING... not surprising it's 10k of markup for 996 bytes of content and six content images. (should only be six IMG tags on the entire page!)

    Of course with it lacking the actual images for the rest of the layout (likely related to the PHP bug being shown) it's hard to say... much less the ABSURDLY WIDE fixed width layout that's an accessibility DISASTER.

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here's what I came up with:

    Opera Layout Test

    Which as always the directory is wide open for easy access to it's gooey bits:

    Index of /for_others/co.ador

    Like the SINGLE image used to build the header AND it's hover states:

    http://www.cutcodedown.com/for_other...ges/header.jpg

    (made the hover state available for the your cart text, though I didn't implement it as I took a different approach there).

    Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working IE 5.5, 6, 7, 8 & 9, FF 3.5 and 4, and the latest flavors each of Opera, Saffy and Chrome.

    The ONLY thing that might cause issues is if a user uses the retarded nyetscape 4 style "resize text only" nonsense Mozilla keeps around that for some screwed up reason resizes PX fonts and nothing else PX. (which makes no sense, I'm WITH IE on that one!). There's a reason anyone who actually gives a flying fig about accessibility doesn't use Mozilla's stuff in the first place... and that's just ONE of them.

    Besides, since it's no longer the default behavior in Firefox or any other major browser, AND that setting mangles pretty much EVERY website on the internet to the point of being useless -- who gives a rats ass if it breaks for the handful of people who still have their head wedged firmly up 1997's backside.

    That aside, notice that it uses just the one image, and slides the image around to show the parts we need where we need them. ALL of the real gruntwork is in the CSS leaving most of the remaining HTML to do it's job -- a heading, a subsection (div) and a menu (list).

    I kind of assumed the right side "your cart" thing is there to either show a login link when they're not logged in, or the total number of items and a total dollar amount when they are, but not knowing what you're using under the hood code-wise that's all a wild guess.

    Oh, and SP -- you CAN do those hovers and keep the images in the markup as your #4. You put the hover state in as the background-image on the UL, and when you hover you use position:relative; left:-999em to slide the IMG tag out of view. The anchor and flow for the IMG will stay in place... Should work if you REALLY want those in the markup as IMG. I'd also if doing that strip formatting off the anchor tag... Though images off that has the problem of the alt-text disappearing on hover.

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    (excuse me SP for stepping in from the other thread)
    No, since you took an interest anyway I was hoping you'd step in.

    Although I see you DID repair the image. Title isn't mis-pasted in yours. I was just too lazy to do all that.

    The ONLY thing that might cause issues is if a user uses the retarded nyetscape 4 style "resize text only" nonsense Mozilla keeps around that for some screwed up reason resizes PX fonts and nothing else PX. (which makes no sense, I'm WITH IE on that one!).
    But let's say Mozilla (and Safari) didn't resize px text. Then what, when the image text is microscopic? I'd rather real text could grow and pop out, cause at least then I could block images and have usable menu text. Just saying. That's why I swing around Gilder-Levin for some things... I never like forcing the text to stay small.

    Oh, and SP -- you CAN do those hovers and keep the images in the markup as your #4. You put the hover state in as the background-image on the UL, and when you hover you use position:relative; left:-999em to slide the IMG tag out of view. The anchor and flow for the IMG will stay in place... Should work if you REALLY want those in the markup as IMG. I'd also if doing that strip formatting off the anchor tag... Though images off that has the problem of the alt-text disappearing on hover.
    Yeah, I've done that before (I saw Gary do it once long ago) and I couldn't take the moving alt text, so I've stayed away from it.

    I also didn't feel like making "hover/focus" versions of the text.

    Were this my own page, I would have done my #3, with the background image being just the blue/purple swhirly stuff, and have plain text sitting out for the menu... and maybe G-L the logo.

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    But let's say Mozilla (and Safari) didn't resize px text. Then what, when the image text is microscopic? I'd rather real text could grow and pop out, cause at least then I could block images and have usable menu text. Just saying. That's why I swing around Gilder-Levin for some things... I never like forcing the text to stay small.
    Uhm, real zoom resizes the images too? That way the IMAGES are legible? If they're legible at the original size for 'normal' users, a REAL zoom will make them legible at the larger size, right? Might not be pretty, but it's at least usable.

    Kind-of the point of why resizing JUST the text is stupid?

    Quote Originally Posted by Stomme poes View Post
    Yeah, I've done that before (I saw Gary do it once long ago) and I couldn't take the moving alt text, so I've stayed away from it.
    Probably for the better, though there have been a couple cases where it was the best option for me... as at least the alt text is there before they hover, hopefully they don't have the attention span of a goldfish.

    Quote Originally Posted by Stomme poes View Post
    Were this my own page, I would have done my #3, with the background image being just the blue/purple swhirly stuff, and have plain text sitting out for the menu... and maybe G-L the logo.
    While I'd have taken an axe to the blue/purple swirly stuff as it makes that header image take well over half my allocation for page size all by itself.

    Big giant PSD jockey image -- more proof that drawing a pretty picture in photoshop has NOTHING to do with web design.

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Uhm, real zoom resizes the images too? That way the IMAGES are legible?
    Maybe my Chrome and Opera are borked but I don't get legible images, I get insanely blurry fuzzy useless ones. Looking at blurry images out of the side of my eye while I'm trying to read my zoomed content text gives me a headache... this is why I (usually, not always) hate zoom. Zoom is just begging to give me hangover without the joy of getting drunk first.

    Instead, I turn images off and ctrl++ my text only.

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Maybe my Chrome and Opera are borked but I don't get legible images, I get insanely blurry fuzzy useless ones.
    Win/Lin difference perhaps? You still trying to use the tinkertoy OS for destkop stuff? (I kid, I kid)

    I know on Win both browsers leverage the DX mipmapping, while on linsux "Mipmapping, what's that?" using a scale-summing algorythm instead. (and I use the term algorythm in the loosest sense).

    But then given the reliance on freetype for font rendering under most every X11 implementation, I'm surprised you can stand to look at anything on there

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Lawlz.
    Win/Lin difference perhaps?
    Next time I've got the winbeast running I'll take a deliberate look.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •