...

View Full Version : HELP!!! Floats are making my life miserable.



sholton311
11-05-2009, 09:29 PM
I am desperately trying to make a simple css list with text on the left and a button on the right. All I want to do is make the text even with the button vertically, and I can't for the life of me get it to work. Can someone please help me out? I will attach both my css file and post the html below. Much appreciated!



<!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=ISO-8859-1" />
<title>The AM Delta</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="main">
<div id="site_container">
<div id="header">
<div id="navbar">
<ul>
<li><a href="#" id="home_btn"></a></li>
<li><a href="#" id="news_btn"></a></li>
<li><a href="#" id="tour_btn"></a></li>
<li><a href="#" id="discography_btn"></a></li>
<li><a href="#" id="bio_btn"></a></li>
<li><a href="#" id="contact_btn"></a></li>
<li><a href="#" id="store_btn"></a></li>
<li><a href="#" id="links_btn"></a></li>
</ul>
</div>
</div>
<!--end header-->
<div id="content">
<div id="content_container">
<div id="content_container_inner">
<div id="featured">
<div class="image_block">
<img src="images/feature1.jpg" alt="Featured Pic" />
</div>
<div class="text_block">
<h2>The AM Delta Touring a city near you!</h2>
<p>Iron and Wine's summer festival tour across Canada and the states has been amazing! Thanks to all of you that attended and shared in the music. The season winds down with the first Iron and Wine show in Alaska along with stops at All Tomorrow's Parties NY, Messiah College (Grantham, PA), and University of Illinois (Urbana - Champaign). Find IW on Facebook for short blurbs from the road. Keep an eye here for a new shirt design in the coming weeks. Enjoy the rest of summer.</p>
<p>For more info, <a href="#">click here.</a></p>
</div>
</div>
<div id="content_bottom">
<div id="left_container">
<div id="shows">
<div class="show_container">
<div class="show_txt"><p>March 09. 2009 - New Orleans, LA</p></div>
<a href="#" class="button"></a>
</div>
</div>
<div id="follow_us"></div>
</div>
<div id="featured_media"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
<div id="footer_bottom"></div>
</div>
</div>
</div>

</body>
</html>

Excavator
11-05-2009, 10:54 PM
Hello sholton311,
Try making these changes highlighted in red, see if it gives you an ideas.
CSS-
/*--------------------------------- navigation -----------------------------------*/
#navbar {

height: 28px;
position:relative;
top:380px;
left:55px;
color: #fff; /*makes the text white*/
}

#navbar ul li {
width: 110px; /*makes room for the text*/
float:left;
margin: 0 5px 0 0; /*puts a litte space between the li's*/
border: 1px solid #fff; /*puts a box around the li so you can see it*/
line-height: 28px; /*centers text vertically*/
list-style: none; /*gets rid of list bullets*/
}
#navbar ul li a {
float: right; /*makes text go beside button*/
}


a#home_btn {
width: 58px;
background-image: url(images/navbtns/home_btn.jpg);
background-repeat: no-repeat;
display: block;
background-position: 0% 0px;
}

a#home_btn:hover {
background-position:-58px 0px;
}

#home_btn {
width:58px;
height:28px;
background: #f00;

}

a#news_btn {
width: 58px;
background-image: url(images/navbtns/news_btn.jpg);
background-repeat: no-repeat;
display: block;
background-position: 0% 0px;
}

a#news_btn:hover {
background-position:-58px 0px;
}

#news_btn {
width:58px;
height:28px;
background: #0ff;
}

a#tour_btn {
width: 52px;
background-image: url(images/navbtns/tour_btn.jpg);
background-repeat: no-repeat;
display: block;
background-position: 0% 0px;
}

a#tour_btn:hover {
background-position:-52px 0px;
}

#tour_btn {
width:52px;
height:28px;
background: #cf6;
}


And the markup-

<div id="navbar">
<ul>
<li>Home<a href="#" id="home_btn"></a></li>
<li>News<a href="#" id="news_btn"></a></li>
<li>Tour<a href="#" id="tour_btn"></a></li> <li><a href="#" id="discography_btn"></a></li>
<li><a href="#" id="bio_btn"></a></li>
<li><a href="#" id="contact_btn"></a></li>
<li><a href="#" id="store_btn"></a></li>
<li><a href="#" id="links_btn"></a></li>
</ul>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum