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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HELP!!! Floats are making my life miserable.

    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!

    Code:
    <!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>
    Attached Files Attached Files

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello sholton311,
    Try making these changes highlighted in red, see if it gives you an ideas.
    CSS-
    Code:
    /*--------------------------------- 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-
    Code:
    			<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>
    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
    •