SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    One more problem with CSS layout...

    Well, thanks to Paul's help, I've fixed most of the bugs in the new all-CSS layout for 2BigFeet. Still have one little quirk and I'm not sure how to fix it (or if it's even possible to fix).

    http://www.2bigfeet.com/2bfnew/ Check out the testimonial at the top of the page. One, I don't know if I can center it up there in that white space (vertically).

    Two, when the window is resized very small it wraps down below the navigation and looks really bad. Any way to tell it to only wrap to a certain height (in pixels) or something like that to keep it from wrapping into the content? If I choose not to wrap at all then it will never be long enough to fit all the text on one line.

    Any help or suggestions would be appreciated.

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    That link isn't working - is it the same as the page without the word check at the end?

    It doesn't seem that it would be possible in IE to do what you want. In mozilla you could use min and max width and height to control the element and also use display:table-cell to do the centering.

    As Ie doesn't understand any of the above you'd be stuck with using js or expressions to provide a min-width for the element to stop it spreading downwards anymore.

    There is a thread here about vertically aligning elements that was thought impossible before.

    http://www.sitepoint.com/forums/show...align+solution

    It may be of use

    If I can think of anything better tomorrow I'll let you know Or someone else may have a better suggestion anyway.

    Paul

    (You could always stick a small table in there as a last resort - I know its heresy but the standards do allow for the use of tables when no other means exist to produce the layout required)

  3. #3
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that... should be fixed now (the link)

  4. #4
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Would there be a way (z-index or something) to make it wrap behind all that other stuff so at least it didn't mess up the layout? I'm not as concerned about that text as I am the rest of the site.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've been playing around with it and you could do something like this although I don't know how older browsers will react.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>2BigFeet.com - New CSS Layout</title>
    <!-- Meta Information -->
    <meta name="keywords" content="large shoes for men" />
    <meta name="description" content="large shoes for men" />
    <meta name="robots" content="index,follow" />
    <meta name="generator" content="2BigFeet.com" />
    <meta name="revisit-after" content="2 DAYS" />
    <meta name="resource-type" content="document" />
    <meta name="copyright" content="Copyright (C) 2004 2BigFeet" />
    <meta name="distribution" content="Global" />
    <meta name="rating" content="general" />
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <!-- End Meta Information -->
    <style>
    body
     {
     background: url('http://www.2bigfeet.com/2bfnew/background.gif');
     background-repeat: repeat-y;
     margin: 0;
     padding: 0;
     font-family: Arial, Helvetica,  sans-serif;
     font-size: .8em;
     }
    h1
     {
     font-size: 1.3em;
     margin: .75em 0 0 0;
     color: #900;
     }
    h2
     {
     }
    h3
     {
     color: #fff;
     font-size: 1em;
     line-height: 150%;
     margin: 0;
     background: #369;
     padding: 3px;
     }
    p
     {
     margin: 0.75em 0 1em 0;
     }
    a
     {
     color: #369;
     }
    a:hover
     {
     color: #900;
     }
    div.container
     {
     }
    div.content
     {
     position: absolute;
     left: 150px;
     top: 85px;
     padding-left: 10px;
     padding-right: 10px;
     }
    .top
     {
     position: absolute;
     top: 0px;
     left: 0px;
     background: #fff;
     clear: both;
     height: 60px;
     width: 100%;
     overflow:hidden;
     white-space:nowrap;
     text-align:right;
     }
    div.top span.logo
     {
     position:absolute;
     left:0;top:0;
     }
    div.top span.phone
     {
     margin-left:500px;
     }
    .testimonial
     {
     position: absolute;
     top: 6px;
    	left:0;
     width:100%;
    	font-size: 0.9em;
     min-width:246px;
     height:58px;
     vertical-align:middle;
     display:table;
     text-align:center;
     display:table;
     }
    .innertest {
    text-align:center;
    top:50%;
    left:0;
    width:100%;
    display:table-cell;
    vertical-align:middle;
    min-width:246px;
    }
    .testimonial p{
    margin: 0px 180px 0px 240px;
    padding:0;
    top:-50%;
    min-width:246px;
    }
    * html .testimonial p{position:relative;}
    * html .innertest {position:absolute;}
    
    .scanalert
     {
    	text-align: center;
    	padding: 5px;
    	margin: 10px;
    	border: 1px solid #354C69;
    	background: #fff;
    	width: 115px;
    	height: 32px;
     }
    div#leftbar
     {
     position: absolute;
     left: 0px;
     top: 85px;
    	}
    #mainnav
     {
     width: 150px;
     background: #369;
     }
    #mainnav ul
     {
     margin: 0;
     padding: 0;
     list-style-type: none;
     list-style: none;
     font-family:  Arial, Helvetica,  Helvetica, sans-serif;
     font-size: .9em;
     letter-spacing: .05em;
     }
    #mainnav a
     {
     background-color: #369;
    	padding: 4px 5px 4px 5px;
    	border-bottom: 1px solid #999;
    	width: 140px;
    	display: block;
    	}
    html>body #mainnav a
     {
     width: auto;
     }
    #mainnav a:link, #navlist a:visited
     {
     color: #fff;
     text-decoration: none;
     }
    #mainnav a:hover
     {
     color: #000;
     background-color: #ccc;
     }
    #navlist h2
     {
    	text-align: center;
    	color: #fff;
    	font-size: 1.1em;
    	margin: 0 0 0 0;
    	padding: .63em 0 .65em 0;
    	border-bottom: 1px solid #999;
    	font-variant: small-caps;
    	font-weight: bold;
    	background: #354C69;
    	}
    
    #additional
     {
    	}
    #additional ul
     {
    	margin: 0;
     padding: 0;
     list-style-type: none;
     list-style: none;
     font-family:  Arial, Helvetica,  Helvetica, sans-serif;
     font-size: .9em;
     letter-spacing: .05em;
    	}
    
    #additional a
     {
     background-color: #369;
    	padding: 4px 5px 4px 5px;
    	border-bottom: 1px solid #999;
    	width: 140px;
    	display: block;
    	}
    html>body #addlist a
     {
     width: auto;
     }
    #addlist a:link, #addlist a:visited
     {
     color: #fff;
     text-decoration: none;
     }
    #addlist a:hover
     {
     color: #000;
     background-color: #ccc;
     }
    #addlist h2
     {
    	text-align: center;
    	color: #fff;
    	font-size: 1.1em;
    	margin: 0 0 0 0;
    	padding: .63em 0 .65em 0;
    	border-bottom: 1px solid #999;
    	font-variant: small-caps;
    	font-weight: bold;
    	background: #354C69;
    	}
    
    div#subnav
     {
     position: absolute;
     left: 0px;
     top: 60px;
     width: 100%;
     text-align: center;
     background: #900;
     margin: 0;
     padding: 0;
     white-space: nowrap;
    	border-top: 1px solid #300;
    	border-bottom: 1px solid #300;
     }
    #subnavlist
     {
     margin: 0;
    	padding: 0;
     white-space: nowrap;
     height: 1.8em;
     overflow: hidden;
     line-height:1.8em;
     }
    #subnavlist li
     {
     font-family:  Arial, Helvetica,  sans-serif;
     font-size: .9em;
     font-variant: small-caps;
     font-weight: bold;
     }
    #subnavlist li a
     {
     color: #fff;
     text-decoration: none;
     }
    #subnavlist li a:hover
     {
     text-decoration: underline;
     }
    #subnavlist li.inline
     {
     display: inline;
     padding-left: 6px;
     padding-right: 6px;
     border-right: 1px solid #fff;
     }
    #subnavlist li.last
     {
     display: inline;
     padding-left: 6px;
     padding-right: 6px;
     }
    .productdiv
     {
     }
    div.product
     {
     float: left;
     padding: 2px 10px 2px 10px;
     font-size: 0.8em;
     }
    div.product p
     {
     text-align: center;
     }
    .footer
     {
     font-size: .8em;
     text-align: center;
     padding: 2px 0 2px 0;
     clear: both;
     }
    .yellowbox
     {
     border: 1px solid #333;
     background: #ffc;
     padding: 5px;
     }
    
    </style>
    <!--[if gte IE 5]>
    <style type="text/css">
    .testimonial p {width:expression( documentElement.clientWidth < 667 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 657 ? "246" : "auto") : "246px") : "auto" );}
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="content"> 
      <h1>Large Size Shoes for Men</h1>
      <p>2BigFeet.com specializes in large shoes for men. We have big shoes up to 
    	size 24 and widths up to 9E in men's shoes. We carry a wide selection of big 
    	footwear for men including athletic, casual, dress, boots, work shoes and 
    	boots, sandals, slippers, therapeutic shoes and more.</p>
      <div class="yellowbox">We are eliminating women's shoes and all remaining pairs 
    	are now <b>at least 50% off!</b> See our <a href="/womens_specials.php">Women's 
    	Specials</a> page to see all our entire selection.</div>
      <h1>Men's Dress Shoes up to Size 24 4E</h1>
      <p>For years, we asked shoe companies to produce high quality men&#x2019;s dress 
    	shoes in extreme sizes, but they weren&#x2019;t interested. We finally decided 
    	that if we wanted it done right, we&#x2019;d have to do it ourselves. We&#x2019;re 
    	proud to introduce the <b>P. Bunyan</b> line of fine footwear for men, exclusively 
    	from 2BigFeet.com.</p>
      <div class="productdiv"> 
    	<h3>FEATURED PRODUCTS</h3>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 1" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 2" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 3" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 1" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 2" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 3" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 1" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 2" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
    	<div class="product"> <img src="http://www.2bigfeet.com/2bfnew/shoe.jpg" width="150" height="150"
      alt="image 3" /><br />
    	  <p>P. Bunyan Granite Oxford<br />
    		Up to size 24 4E<br />
    		$159.95 </p>
    	</div>
      </div>
      <div class="footer"> 
    	<p>Copyright  1998-2004 | 2BigFeet.com | All Rights Reserved<br />
    	  About Us Testimonials Our Guarantee Customer Service Privacy Policy F.A.Q.'s 
    	  Store Info Contact Us View Cart </p>
      </div>
    </div>
    <div id="leftbar"> 
      <div id="mainnav"> 
    	<ul id="navlist">
    	  <h2>Large Men's Shoes</h2>
    	  <li class="inline"><a href="">Athletic Shoes</a></li>
    	  <li class="inline"><a href="">Casual Shoes</a></li>
    	  <li class="inline"><a href="">Dress Shoes</a></li>
    	  <li class="inline"><a href="">Boots and Work</a></li>
    	  <li class="inline"><a href="">Sandals and Slippers</a></li>
    	  <li class="inline"><a href="">Therapeutic Shoes</a></li>
    	  <li class="inline"><a href="">Belts, Socks, Etc.</a></li>
    	  <li class="inline"><a href="">Big Values!</a></li>
    	</ul>
      </div>
      <div id="additional"> 
    	<ul id="addlist">
    	  <h2>Additional Links</h2>
    	  <li class="inline"><a href="">Search by Size</a></li>
    	  <li class="inline"><a href="">Measure Your Foot</a></li>
    	  <li class="inline"><a href="">Site Map</a></li>
    	</ul>
      </div>
      <div class="scanalert">
    	<!--- START SCANALERT CODE --->
    	<a target="_blank" href="//www.scanalert.com/RatingVerify?ref=www.2bigfeet.com"><img width="115" height="32" border="0" src="http://www.2bigfeet.com/2bfnew///ima...eet.com/12.gif" alt="HACKER SAFE certified sites prevent over 99% of hacker crime." oncontextmenu="alert('Copying Prohibited by Law - HACKER SAFE  is a Trademark of ScanAlert'); return false;"></a> 
    	<!--- END   SCANALERT CODE --->
      </div>
    </div>
    <div id="subnav"> 
      <ul id="subnavlist">
    	<li class="inline"><a href="">About Us</a></li>
    	<li
     class="inline"><a href="">Testimonials</a></li>
    	<li
     class="inline"><a href="">Our Guarantee</a></li>
    	<li
     class="inline"><a href="">Customer Service</a></li>
    	<li
     class="inline"><a href="">Privacy Policy</a></li>
    	<li
     class="inline"><a href="">F.A.Q.'s </a></li>
    	<li
     class="inline"><a href="">Store Info</a></li>
    	<li
     class="inline"><a href="">Contact Us</a></li>
    	<li
     class="last"><a href="">View Cart</a></li>
      </ul>
    </div>
    <div class="top"> <span class="logo"><a href="/index.php" title="Large Shoes for Men at 2BigFeet.com"><img src="http://www.2bigfeet.com/2bfnew/logo.gif" alt="Large Shoes for Men at 2 Big Feet" width="240px" height="60px" border="0px"></a></span> 
      <span class="phone"><img src="http://www.2bigfeet.com/2bfnew/call_toll_free.gif" alt="Questions? Call Toll-Free 1-877-840-0743"width="165px" height="60px" border="0"></span> 
    </div>
    <div class="testimonial"> 
      <div class="innertest">
      <p>"I have received my Stability Walkers and it is great. I have to get used 
    	to it first for it is the first... <a href="">Read More Testimonials</a></p>
    </div></div>
    </body>
    </html>
    Hope its of some use.

    Paul

  6. #6
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you very much!! I'll test it on some browsers but as long as it works on most and doesn't break others I'll go with it.

    Is that javascript?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is that javascript?
    Well its ie's expressions which uses javascript but has the plus of working when js is switched off.

    Paul


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
  •