...

View Full Version : clearing float problem and position: absolute question



kyllle
05-09-2010, 08:11 PM
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

met
05-09-2010, 08:18 PM
add

overflow:auto;

to .about_col

if thats what you mean.

Excavator
05-09-2010, 08:21 PM
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

kyllle
05-09-2010, 08:32 PM
Thanks for that guys! Will read up on that ex.

Have you any suggestions about my position problem?

Excavator
05-09-2010, 08:48 PM
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.

Excavator
05-09-2010, 08:53 PM
Try it like this -


<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
#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';
}

kyllle
05-09-2010, 08:54 PM
hey ex, the reason the review_banner is a l is because i will be adding additional images and using the innerfade jquery

Excavator
05-09-2010, 11:19 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum