SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Hybrid View

  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,734
    Mentioned
    31 Post(s)
    Tagged
    0 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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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 is all center now but even through it is all center table_01 is not inside the mainWrapper theoretically speaking.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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).

  9. #9
    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.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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?

  11. #11
    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.

  12. #12
    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.

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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.

  14. #14
    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.

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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.

  16. #16
    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


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
  •