SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 58
  1. #26
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, let's stylize

    you have a standard layout: header, content, footer. in the header you have a menu.

    so far Rayzur in the #18 post gave you a high quality start. use it, work it with your images and come back to us with a link to the result for further improvement, if necessary

  2. #27
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that width was not only for IE. Victorinox forgot to remove my IE comment from when I had the width set to 100%. Divs default to 100% width so the only reason for the 100% was to give IE6 haslayout.
    What you are saying is because Victorinox forgot to remove your IE comment the layout width in FireFox etc won't expand to 100% ? What comment was that this one:
    Code CSS:
    width:960px; [B]/*set haslayout for IE*/[/B]
    I don't see how that does anything it's just a comment !!!
    Basically you are telling us you want a fluid width site that uses a fixed width image. It's not going to work like that.
    I want a fixed width site You can't have a fixed with image and a fluid width, I realize that
    Your UL is shown at the bottom of your header div in that image just like I placed it in my code above
    Sorry you are right, except for the green box and the content area etc has to be removed cause I'm going to have some other element doing that Job

    I would not use a 200px tall position:fixed footer either, that is too tall. I think that you may be confusing fixed height with fixed position.
    No I realize that is too tall for a footer, it will be shorter !!

    you have a standard layout: header, content, footer. in the header you have a menu.
    so far Rayzur in the #18 post gave you a high quality start. use it, work it with your images and come back to us with a link to the result for further improvement, if necessary
    I'm going to adjust and tinker and change some minor aspects that I had just mentioned with this layout. I'll update as soon as possible.

  3. #28
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What you are saying is because Victorinox forgot to remove your IE comment the layout width in FireFox etc won't expand to 100% ? What comment was that this one:
    I don't see how that does anything it's just a comment !!!
    Hi Huskey,
    Forget all about the IE comment for now, it seems to be confusing you. Your right , the comment itself does nothing. It is the width property that sets haslayout.
    At some point in time though you will need to learn about haslayout.

    Back to your layout:

    So now we have a fixed width wrapper with a fixed position footer.
    I would use a min-height:100% layout to give it a full height appearance so it ties in nicely with the fixed footer.

    http://www.css-lab.com/demos/stickfo...t-fixfoot.html

    Working off of that demo code I have merged your nav styles in and came up with this. Just set the wrapper width to whatever you need and set the width on the .innerfoot div the same as the wrapper width.

    http://www.css-lab.com/test/husky-fixfoot.html

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Min-Height 100% with Fixed Footer</title>
     
    <style type="text/css">
    html,body {
        height:100%;/*reference for #wrapper min-height:100%*/
    }
    /*html {overflow-y:scroll;} /*keep scrollbar position present at all times (prevent jumpy pages)*/
     
    body {
        margin:0;
        padding:0;   
        background:#555;
        font:100% arial,helvetica,sans-serif;
        color:#000;
    }
    h1 {
        margin:15px 0 0;
        font-size:1.5em;
        text-align:center;
    }
    h2 {
        margin:10px 10px 0;
        font-size:1.3em;
    }
    p {margin:10px;}
     
    /*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
    body:before {/*Opera min-height 100% fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*eliminate need for inner non clearing element*/
    }
    #wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /*#content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
     
    /*===  Begin Layout Structure ===*/
    #wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
        width:900px;
        min-height:100%;
        margin:0 auto;
        background:#CCC;/*BG color for #content*/
    }
    #header {
        position:relative;/*establish containing block for AP children (#nav)*/
        height:174px;/*200px total w/ padding*/
        padding:1px 0 25px;/*preserve space for AP #nav and uncollapse child margins*/
        background:#AAA;
    }
    #nav {
        position:absolute; /*poition to bottom of header*/
        left:0; bottom:0; /*set coordinates*/
        margin:0; padding:0; /*remove the defaults*/
        list-style:none;
    }
        #nav li {
        float:left;
        margin-right:5px;
        }
        #nav a {
        float:left;
        width:100px;
        height:25px;
        padding:0 10px;
        color:#FFF;
        font:bold 15px/25px arial;
        text-decoration:none;
        background:#000;
        }
        #nav a:focus,
        #nav a:hover {
        color:#BDF;
        background:#333;
        }    
    #content {
        width:100%;/*IE6/7 haslayout for future float containment*/
        padding-bottom:80px;/*set a bottom padding to preserve the footer*/
        background:#CCC;/*same as #wrapper or none at all*/
    }
    #footer {
        position:fixed;
        width:100%;
        left:0;
        bottom:0;
        height:80px;
    }
    .innerfoot {
        width:900px;
        height:80px;
        margin:0 auto;
        overflow:hidden;/*uncollapse child margins*/
        background:#AAA;
        text-align:center;
    }
    #footer p {
        margin:10px 0 0;
        font-size:1.1em;
        font-weight:bold;
    }
    </style>
     
    <!--[if IE 6]>
    <style type="text/css">
    html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
    #wrapper{height:100%;}/*min-height for IE6*/
    #footer{/*fixed footer for IE6 using expression*/
        position:absolute;
        top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
    }
    </style>
    <![endif]-->
     
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <h1>Min-Height 100% with Fixed Footer</h1>
            <ul id="nav">
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">BoA</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>H2 Sub Title</h2>
            <p>This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.</p>
            <p>Reduce browser viewport height to scroll content.</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>Last line of test text</p>
        </div>
    </div><!-- end wrapper -->
        <div id="footer">
            <div class="innerfoot">
                <p>Fixed Footer</p>
            </div>
        </div>
    </body>
    </html>

  4. #29
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forget all about the IE comment for now, it seems to be confusing you. Your right , the comment itself does nothing. It is the width property that sets haslayout.
    At some point in time though you will need to learn about haslayout.
    You are right, at some point soon I'm going cause I just don't get it.
    So now we have a fixed width wrapper with a fixed position footer.
    I would use a min-height:100% layout to give it a full height appearance so it ties in nicely with the fixed footer.

    http://www.css-lab.com/demos/stickfo...t-fixfoot.html

    Working off of that demo code I have merged your nav styles in and came up with this. Just set the wrapper width to whatever you need and set the width on the .innerfoot div the same as the wrapper width.

    http://www.css-lab.com/test/husky-fixfoot.html
    This is a nice starting point (thank you) I was going to ask you with the previous code why there was white space below the footer in IE, but this new code you posted solved it, what was that from anyhow?

    I had to set the width of the header div to 1138 (quite huge) in Firefox there is no horizontal scroll bar, but there is in IE7. The graphics are all ready to go I'm getting the structure finished then comes the decor (I also want to have the page setup for Accessibility)

    I'll probably shrink the header a little more. I have a understanding in terms of how it works with developing across the range of browsers, but I want to make my site compatible with Android and iPhones, which I don't know very much about developing for mobile phones, I hope you can help ? There is more to the page to come, I'm multi-tasking doing this page and graphic design work, although it is off to a good start

  5. #30
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I was going to ask you with the previous code why there was white space below the footer in IE, but this new code you posted solved it, what was that from anyhow?
    The code in post#18 does not produce any whitespace below the footer in any version of IE for me.
    You must have been tinkering with it.

    I had to set the width of the header div to 1138 (quite huge) in Firefox there is no horizontal scroll bar, but there is in IE7.
    IE6/7 both loose about 20px on the viewport width right off the bat because the vertical scrollbar position is always present with or without a scrollbar.
    but I want to make my site compatible with Android and iPhones, which I don't know very much about developing for mobile phones, I hope you can help ?
    Sorry I won't be of much help with mobile coding, though there is a new forum here at SP just for them.

    I do know that a 1138px fixed width site with a fixed footer will surely cause problems. Most people just code a separate site for mobiles, at least that seems to be the easiest way from what I've heard.

  6. #31
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code in post#18 does not produce any whitespace below the footer in any version of IE for me.You must have been tinkering with it.
    Maybe, oh well !

    IE6/7 both loose about 20px on the viewport width right off the bat because the vertical scrollbar position is always present with or without a scrollbar.
    Oh, news to me.
    Sorry I won't be of much help with mobile coding, though there is a new forum here at SP just for them.

    I do know that a 1138px fixed width site with a fixed footer will surely cause problems. Most people just code a separate site for mobiles, at least that seems to be the easiest way from what I've heard.
    What about Accessibility for this site ? Can you have a happy marriage whereas the site retains it's current look for the PC/Mac but on mobile phones it can adjust automatically or something like this without much if at all any problems?

  7. #32
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to mention how do you create a Drop down ? I want to have one of the buttons have a css drop down. Like so:

    [BUTTON]
    {Sub-Button_1}{Sub-Button_2}{Sub-Button_3}

  8. #33
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ Well that is normally called a DropLine Menu when the sub items are on the same line.

    Something like this would be what you are looking for but of course it would need to be adapted to your own needs.

    Which main link gets the sublist?
    Will those sub list items have fixed width or repeating BG images on them?

    The reason I asked is because you will more than likely need to set a width on the sub UL to keep it from shrinkwrapping since it is set as position:absolute to remove it from the page flow.

  9. #34
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which main link gets the sublist?
    Will those sub list items have fixed width or repeating BG images on them?
    Portfolio gets the Sub-List. I'm unsure regarding your second question, if I keep the same visual appearance graphic I have now for the main buttons then I'm not sure if they will repeat or not. I'll have to re-examine

    The reason I asked is because you will more than likely need to set a width on the sub UL to keep it from shrinkwrapping since it is set as position:absolute to remove it from the page flow.
    I understand, one question I have for myself is should like the example you posted have a horizontal bar going across the screen or a few broken up individual menus, hmm !

  10. #35
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    <ul id="nav">
                <li><a href="#">Portfolio</a></li>
    	</ul><ul>
    	<li>SelectionA</li>
    	<li>SelectionB</li>
    	<li>SelectionC</li>
    	<li>SelectionD</li>
    	</ul>
                <li><a href="#">Services</a></li>
                <li><a href="#">BoA</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
    This CSS style drop down is not working, and the other CSS drop downs use similar technique so what am I doing wrong ?

    All the rest CSS drop downs use jQuery or some scripting I'm already going to have to use scripting for other parts of the page I prefer not to use it for the drop downs.

  11. #36
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i only see a html markup, no css style drop down yet, isn't it?

    hint: the css style is missing...

  12. #37
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I had previously before adding the drop down:
    Code CSS:
    #nav {
        position:absolute; /*poition to bottom of header*/
        left:0; bottom:0; /*set coordinates*/
        margin:0; padding:0; /*remove the defaults*/
        list-style:none;
    }
        #nav li {
        float:left;
        margin-right:2px;
        }
        #nav a {
        float:left;
        width:135px;
        height:25px;
        padding:0 10px;
        color:#FFF;
        font:bold 15px/25px arial;
        text-decoration:none;
        background:#000;
        }

  13. #38
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't know if you noticed, your ul#nav is only wrapping around <li><a href="#">Portfolio</a></li>.

    as of consequence, the rest of <ul>s and <li>s and <a>s aren't css styled.

  14. #39
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Please update your online example so we can see the whole picture.

  15. #40
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to gain a insight into how to get this stylized: (Update)

  16. #41
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I want to gain a insight into how to get this stylized
    Did you View the Page Source of the Dropline link I gave in my last post? (#33)

    You have not answered my second ? from that post either. Do sublist items get fixed widths also?

  17. #42
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you View the Page Source of the Dropline link I gave in my last post? (#33)
    Yes, it was using a script to do the drop down which I didn't want. I was thinking last night, is it possible to create an effect for a drop down, but it would require a script. What I was thinking about was when you hover over for the drop down it would unfold down then the menu options would unfold left and right.
    You have not answered my second ? from that post either. Do sublist items get fixed widths also?
    At this point, yes

  18. #43
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yes, it was using a script to do the drop down which I didn't want.
    No, the script was just for IE6 since it does not support li:hover
    What I was thinking about was when you hover over for the drop down it would unfold down then the menu options would unfold left and right.
    If you want any animated effects like rolling or folding then you will have to use a script. It could be done with CSS3 Transitions to some extent but you would not get full x-browser support.

  19. #44
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, the script was just for IE6 since it does not support li:hover
    Ohhh
    If you want any animated effects like rolling or folding then you will have to use a script. It could be done with CSS3 Transitions to some extent but you would not get full x-browser support.
    Do you or does anyone have any suggestions, I can't find anything. Then I'll decide which route to go

  20. #45
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you are looking for a script, then scriptaculous (might be spelling it wrong) is an excelling JS library that has some neat effects
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #46
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx.

  22. #47
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't find what I was looking for on scriptaculous. Does anyone understand what I'm seeking ?

  23. #48
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ooph that's problematic, now a lot of this has already been pointed out, but I'm going to just go down the list of 'problems'...

    Some of these problems stem from your pretty picture having nothing to do with web design and in fact being a case of putting the cart before the horse... This is where your first 'problem' crops up...

    the 1138px width. Not even 1024 friendly... hell, it's barely 1280 friendly, /FAIL/ at design and on that ALONE I'd be throwing the image away or re-adjusting it so if part of the images are cropped it's no big deal. Semi fluid layout as minimum.

    Second, fixing the width of the buttons - never looks right...

    From there we have the CSS itself. As already noted you fail to change your line-heights with sizes, but you also have a broken min-height model, are trying to use position:fixed which almost ALWAYS fails to work, you're absolute positioning in the menu for jhvh knows what reason, and you've got a bunch of pointless extra wrapping DIV in there and a paragraph tag in the footer for what typically is not a single coherent thought of text -- and hence non-paragraph content... and of course the IE conditional nonsense bloating out the markup and comment placement that IS tripping rendering bugs in IE6/earlier.

    Which is why my first step would be to chop down the markup to something more like this:

    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>
    	Min-Height 100&#37; with Fixed Footer
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Min-Height 100% with Fixed Footer
    	</h1>
    
    	<ul id="mainMenu">
    		<li><a href="#">Portfolio</a></li>
    		<li><a href="#">Services</a></li>
    		<li><a href="#">BoA</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    
    	<div id="content">
    		<h2>H2 Sub Title</h2>
    		<p>
    			This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.
    		</p><p>
    			Reduce browser viewport height to scroll content.
    		</p><p>
    			content
    		</p><p>
    			content
    		</p><p>
    			Last line of test text
    		</p>
    	<!-- #content --></div>
    
    <!-- #pageWrapper --></div>
    
    <div id="footer">
    	Fixed Footer
    </div>
    
    </body></html>
    For the CSS I'd suggest first using a reset just so you don't have to keep saying "margin:0; padding:0;" over and over and over again. The one I use is smaller than most, I've never needed more and anything smaller usually shtups form elements.

    Code:
    /* 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,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    For the min-height I suggest adding position:relative in addition to the 100% height declaration to html and body for Opera, fixes one of the two minor bugs.

    Code:
    html, body {
    	height:100%;
    	position:relative;
    }
    then the body specific properties:

    Code:
    body {
    	text-align:right; /* push #pageWrapper right in IE 5 */
    	font:normal 85%/140% arial,helvetica,sans-serif;
    	color:#000;
    	background:#555;
    }
    You said you wanted it on the right instead of centered, correct? The text-align only works in IE 5.x, but it's one line to add support so big deal. On the font declaration if you omit "normal" some older browsers will ignore the whole line, and of course I added what I consider a more legible default line-height.

    The :before hack for Opera:
    Code:
    body:before {
    	/*
    		Opera min-height 100% fix -- We USED to be able
    		to get rid of this in Opera 10.5, but	they
    		buggered the holly hack find in 10.6
    	*/
      content:"";
      height:100%;
      float:left;
      width:0;
      margin-bottom:-999em;
    }
    has to remain because they screwed up the simpler fix of declaring height:1% on any child element with Opera 10.6... shame because it's a lot simpler a fix. We do NOT need the two :after ones as they don't accomplish anything we can't do with the height:1% holly hack.

    Now I opened it up to semi-fluid layout, so we want to set the width on #footer the same as #pageWrapper, so we condense them together.

    Code:
    #pageWrapper,
    #footer {
    	position:relative;
    	min-width:752px;
    	max-width:1104px;
    	margin-left:auto;
    }
    The margin-left is a cute trick to avoid using a float. Since margins are zero'd a margin auto on just one side pushes the div to the opposite side. Look ma, no floats! The position:relative makes certain #footer will depth sort over #pagewrapper and all it's children.

    Of course #pageWrapper...

    Code:
    #pageWrapper {
    	min-height:100%;
    	text-align:left;
    	background:#CCC;
    }
    
    * html #pageWrapper {
    	height:100%;
    }
    ... The text align just sets the main area back to left after the righ alignment for IE 5.x, and it gets the min-height and the IE workaround for min-height. I'd rather use the * html hack where it's cached across pages, than dick around with IE conditionals bloating out the markup.

    To that end, we have the IE expression to fake min-width and max-width, as well as the fallback if scripting is disabled.

    Code:
    * html #pageWrapper,
    * html #footer {
    	/*
    		IE has no min/max width, but we can fake it
    		with an expression. First we set a fixed width
    		as a lowest common denominator for when jscript
    		is disabled, then we run the expression to overload
    		it if jscript is present.
    	*/
    	width:752px;
    	width:expression(
    		(document.body.clientWidth>1152) ? "1104px"
    			: ((document.body.clientWidth>800) ? "auto" : "752px")
    	);
    }
    Then the page heading.

    Code:
    h1 {
    	position:relative;
    	padding:50px 20px;
    	font:bold 44px/45px arial,helvetica,sans-serif;
    	background:#AAA;
    }
    You'll notice on a lot of elements I avoid stating a height. Should the font be resized (when px shouldn't unless you resize EVERYTHING PX, thanks FF for being nyetscapes retarded cousin) it will grow. The background image should probably be prepared to handle that.

    Code:
    #mainMenu {
    	list-style:none;
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE */
    	background:#AAA;
    }
    There was no reason on your original menu to be absolute positioning it. If you REALLY wanted it over the h1 (which shouldn't be necessary) you could use a negative margin to ride it up, but personally I'd just put the same background image on it and slide the background into place on the final version.

    You also NEVER need to say "list-style-type" if you are just turning off bullets. The condensed "list-style" property gets the job done.

    The overflow and width are strictly there to wrap our floated buttons.

    On the LI

    Code:
    #mainMenu li {
    	display:inline;
    }
    I just strip them of formatting. IE8 can be a real pain in the ass on LI, and setting them 'inline' makes them behave allowing us to simply float our anchors and set ALL formatting on them instead.

    Code:
    #mainMenu a {
    	float:left;
    	display:inline; /* prevent IE margin doubling */
    	padding:4px 15px;
    	margin-right:2px;
    	text-decoration:none;
    	font:bold 15px/17px arial,helvetica,sans-serif;
    	color:#FFF;
    	background:#000;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#BDF;
    	background:#333;
    }
    Float 'em, throw the inline fix at 'em to make the margin behave in IE... You can see I set a smaller line-height and then pad. This gives finer control over positioning when images are added and is more predictable than a tall line-height. Also notice I added the 'active' psuedostate to the hover effect, that way you nab ALL keyboard navigators. As a rule of thumb I like to set all three the same way when trapping hovers on anchors.

    I do NOT fix the width -- fixed width buttons, particularly on a menu always look silly/unprofessional to me. Looking at your source image (do you have a higher res?) I would take one of those buttons, adjust it so the center could be tiled, adding dummy spans inside the anchor and use a sliding doors effect on each button by absolute positioning the spans on the right side of the anchor in it's padding. That way all your buttons would always adjust to their content.

    The #content div

    Code:
    #content {
    	height:1%; /* holly hack, fixes auto height in IE8 */
    	padding-bottom:80px;
    }
    Gets the holly hack. Since the parent of #content doesn't have an explicit height on it in standards browsers, and height is treated as min-height in IE all this does is trip haslayout, and for some reason fixes the IE8 content resizing bug! This axes that :after fix nicely.

    The bottom padding of course is to make room for #footer.

    I set up some nice appearance on the inner tags for the hell of it.

    Code:
    #content h2 {
    	padding:0.8em;
    	font:bold 120%/140% arial,helvetica,sans-serif;
    }
    
    #content p {
    	padding:0 1em 1em;
    }
    I like to use padding instead of margin on things like this so I don't have to even THINK about collapse.

    Finally we have the footer.

    Code:
    #footer {
    	padding:32px 0;
    	margin-top:-80px;
    	text-align:center;
    	font:bold 15px/16px arial,helvetica,sans-serif;
    	background:#AAA;
    }
    
    * html #footer {
    	height:1%; /* fixes oddball IE 5.x positioning bug */
    }
    Didn't seem to be any reason to use the dual-wrap or P you were on this. Instead of using position:fixed, I use a negative margin to ride it up over #pageWrapper. A particularly sneaky trick but it works like a charm every time. Because the footer in 100% min-height layouts HAVE to be stated in PX (since FF is a total retard about what EM means) we're kinda forced to use PX fonts there, and again I avoid declaring a height and use padding to total the height with the line-height instead, dodging another IE 'issue'. (height or width + padding or border == /FAIL/)

    Tossed a copy up on my server to show it in action.
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/siberianHuskey

    Is wide open for easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the expressions and * html hacks, tested working perfect on IE 5.01, 5.5, 6, 7, 8 and 9 Beta, Opera 10.52 and 10.63, FF 2 and 3.5.3, and the latest flavors each of Safari and Chrome.

    Now, you could pull the min/max-width code and go back to fixed width, but I REALLY advise against it when you aren't even 1024 friendly. There's a difference between "Hey that's pretty!" and "Yeah, but what good is it?" -- and 1138px width definitely crosses that line.

    Hope this helps, or at least you are able to glean some useful knowledge from it.

  24. #49
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When that page is 1024x768 there remains a space on the left hand side.

  25. #50
    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 SiberianHuskey View Post
    When that page is 1024x768 there remains a space on the left hand side.
    Assuming you mean my demo -- 1) what browser, 2) at 1024 there should be no 'space' on the left, though at 1280 there should.. on the left

    Since you asked to move the whole thing to the left in your original post. Check it at 1600 and that left side gap gets bigger.

    Or is that not what you wanted?


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
  •