SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS header layout help

    Hey, i want to make it so the email/password forum stays in the main h1 header but make it so its moved over to the right...i tired to make it float right but then i cant figure out how to get it aligned with the h1..heres my markup below, i would love your help and input.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www,w3.org/1999/xhtml">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type"
    			content="text/html; charset=utf-8"/>
    		<link href="style1.css" rel="stylesheet" type="text/css"/>
    	</head>
    	<body>
    	  <div id="head-container">
    		<div id="header">
    				<h1>Blahblahblah</h1>
    			<div id="login">
    				<form method="post" action="" class="login">
    				<p>	
    					<label for="email">Email</label>
    					<input type="text" name="email" id="email"/>
    					<label for="password">Password</label>
    					<input type="password" name="password" id="password"/>
    				    <input type="submit" value="login"/>
    				</p> 
    				</form>  
    			</div>
    		</div> <!-- END OF HEADER -->
    	  </div> <!-- END OF HEADER-CONTAINER -->
    	  <div id="navigation-container">
    		<div id="navigation">
    				<ul>
    					<li><a href="/">About</a></li>
    					<li><a href="/">Contact</a></li>
    				</ul>
    		</div> <!-- END OF NAVIGATION -->
    	  </div> <!-- END OF NAVIGATION-CONTAINER -->
    	  <div id="content-container">
    		<div id="content-container2">
    			<div id="content-container3">
    				<div id="content">
    					<h2>blahblah</h2>
    						<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    				</div> <!-- END OF CONTENT -->
    				<div id="aside">
    					<h3>BlahBlah</h3>
    						<p>blahblahblahblahb</p>
    					<form>
    						<p>
    							<input type="radio" name="profile"   id="xxxxr" value="xxxxr"
    							<label for="xxxx">xxxxxx</label>
    						</p>
    						<p>
    							<input type="radio" name="profile" id="xxxx" value="xxxx"
    							<label for="xxxxx>xxxxx</label>
    						</p>
    						<p>
    							<input type="submit" value="Lets get started!"/>
    						</p>
    					</form>
    				</div> <!-- END OF ASIDE -->
    			</div> <!-- END OF CONTENT-CONTAINER3 -->
    		</div> <!-- END OF CONTENT-CONTAINER2 -->
    		<div id="footer-container">
    			<div id="footer">
    				<p>Copyright</p>
    			</div> <!-- END OF FOOTER -->
    		</div> <!-- END OF FOOTER-CONTAINER -->
    	  </div> <!-- END OF CONTENT-CONTAINER -->
      	</body>
    </html>
    Code:
    /*
    CSS for XXXX.com
    */
    
    #head-container {
    	color: #000;
    	background: #ccc;
    }
    
    #header {
    	margin: 0 auto;
    	width: 860px;
    	padding: 20px;
    	background: #ddd;
    }
    
    #header h1 {
    	margin: 0;
    }
    
    
    #navigation-container {
    	float: left;
    	width: 100%;
    	color: #000;
    	background: #333;
    }
    
    #navigation	{
    	margin: 0 auto;
    	width: 900px;
    }
    
    #navigation ul {
    	margin: 0;
    	padding: 0;
    }
    
    #navigation ul li {
    	list-style-type: none;
    	display: inline;
    }
    
    #navigation li a {
    	display: block;
    	float: left;
    	padding: 5px 10px;
    	color: #fff;
    	text-decoration: none;
    	border-right: 1px solid #fff;
    }
    
    #navigation li a:hover {
    	background: #383;
    }
    
    #content-container {
    	float: left;
    	width: 100%;
    	color: #000;
    	background: #eee;
    }
    
    #content-container2 {
    	margin: 0 auto;
    	width: 900px;
    }
    
    #content-container3 {
    	float: left;
    	width: 900px;
    	background: #fff
    }
    
    #content {
    	clear: left;
    	float: left;
    	width: 560px;
    	padding: 20px 0;
    	margin: 0 0 0 30px;
    	display: inline;
    }
    
    #content h2 {
    	margin: 0;
    }
    
    #aside {
    	float: right;
    	width: 240px;
    	padding: 20px 0;
    	margin: 0 20px 0 0;
    	display: inline;
    }
    
    #aside h3 {
    	margin: 0;
    }
    
    #footer-container {
    	clear: left;
    	color: #fff;
    	background: #000;
    }
    
    #footer {
    	margin: 0 auto;
    	width: 900px;
    	text-align: right;
    	padding: 0;
    	height: 1%;
    }

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The h1 is a block level element and it extends to the full width of the available space. When you tried to float the #login div by itself it was to the right but it was below the block h1.

    You can float them both and they will then be on the same vertical plane. You will need to force the header div to contain it's floats though. That is done with overflow:hidden; for modern browsers and the width (haslayout) will cause IE6/7 to contain floats.

    This should work for you:

    Code:
    #header {
        margin: 0 auto;
        width: 860px;
        padding: 20px;
        background: #ddd;
        overflow:hidden;
    }
    #header h1 {
        float:left;
        margin:0;
        font:bold 1.8em/1.3 arial;
        background:lime;
    }
    #login {
        float:right;
        padding: .3em 0;
        background:red;
    }
    form, p {margin:0}

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey thanks very much this was a big help...and i guess why i got you here, is there anyway to change the color inside the form box?

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you are talking about the email and password input backgrounds then you can target them with the IDs that are already set on them.

    Code:
    input#email,
    input#password {
        background: #CCC;
    }
    If you are talking about the #login div itself I had set red BG color (for testing) on it in the code snippet above.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You also don't need that Login div. The form itself can be styled. And it can have a background colour in place of the login div.


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
  •