Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    clearing float problem and position: absolute question

    Hi all,

    http://kylehouston.com/paulsmyth/reviews.php

    Im having a problem were Iv created 3 columns of info using an unordered list, iv also added a border-bottom to the ul, my problem is I need to clear the li's in the list in order for the ul to style propely and im not sure how I can do this, Iv placed a clear inside the ul which works in ff anyway but this isnt valid code, can anyone help me with this problem? Iv hightlighted this problem with a background red.

    also

    Iv created a tag line that i want to position absolutely over the main banner of the same page, iv applied position: relative to the banner and then top and right of 0 to the tag, for some reason however the tag doesnt pick up the relative position of the banner so instead uses the body? Can anyone suggest were Im going wrong here?

    Many thanks!

    Kyle

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    add

    overflow:auto;

    to .about_col

    if thats what you mean.

  • Users who have thanked met for this post:

    kyllle (05-09-2010)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Hello Kyllle,
    met already beat me to it...
    Here's a page that describes how that method works - http://www.quirksmode.org/css/clearing.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    kyllle (05-09-2010)

  • #4
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Thanks for that guys! Will read up on that ex.

    Have you any suggestions about my position problem?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Quote Originally Posted by kyllle View Post
    Thanks for that guys! Will read up on that ex.

    Have you any suggestions about my position problem?
    I don't understand why your #review_banner is a ul. That image is hardly a list.
    Do away with the ul#review_banner and li, make your image just naturally follow #header.
    Make #header position:relative; and place your tagline inside it, then position it where you want.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    kyllle (05-09-2010)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Try it like this -
    Code:
    <div class="wrapper">
    
    <div id="header">
    <ul class="contact_hd">
    	<li>Tel: 0123456789</li>
    	<li>Email: <a href="mailto:email@email.com">email@email.com</a></li>
    </ul><!--contact_hd-->
    
    <div class="clear"></div>
    
    <ul id="main_nav">
    	<li><a href="index.php">Home</a></li>
    	<li><a href="gallery.php">Gallery</a></li>
    	<li><a href="reviews.php">Testimonials</a></li>
    	<li><a href="about.php">About</a></li>
    	<li><a href="prices.php">Prices</a></li>
    	<li><a href="contact.php">Contact</a></li>
    </ul><!--//main_nav-->
    
    <h1 id="main_logo"><a href="index.php">Paul Smyth Wedding Photography</a></h1>
    
    <div class="clear"></div>
    <p class="review_tag">
    	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis orci, faucibus nec mattis et, condimentum ac eros. Phasellus auctor porta tortor, sed lobortis dolor dictum ut."</p>
    </div><!--//header-->
    <a href="" id="review_banner"><img src="images/review_img.jpg" alt=""></a><!--//main_banner-->
    
    
    
    	<h2 class="test_title">Client Testimonials</h2><!--//about_title-->
    and
    Code:
    #header{
    	border-bottom: 1px solid #121212; 
    	padding-bottom: 5px;
    	margin-bottom: 20px;
    position: relative;
    }
    	.review_tag{
    		position: absolute; 
    		top: 200px; 
    		right: 0; 
    z-index: 1;
    		background: #000; 
    		padding: 10px; 
    		color: #888888;
    		font-size: 1.3em;
    		line-height: 1.4em;
    		width: 500px;
    		font-style: italic;
    		font-family: 'Times New Roman';
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    kyllle (05-09-2010)

  • #7
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    hey ex, the reason the review_banner is a l is because i will be adding additional images and using the innerfade jquery

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Quote Originally Posted by kyllle View Post
    hey ex, the reason the review_banner is a l is because i will be adding additional images and using the innerfade jquery
    That's fine kyllle, I always try to remember that the sites we're looking at here in the forum are in development and things could still be added to/taken from the finished product. It's my own personal thought that we overuse the unordered list in the first place... it's valid though, and maybe even semantic, but I'm tending toward using it less anyway.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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