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 5 of 5

Thread: CSS Alignment

  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts

    CSS Alignment

    here is the address to my site:

    http://www.billboardfamily.com

    The problem I am having is in getting the "coming soon" graphic at the very top of the page to be located UNDER the search box in the black area (at the bottom left of the search bar to be exact, this will eventually become 5 graphis linked to other sites, such as twitter and facebook). I can not get this to work, for some reason, although I have gotten pretty close. I know the solution is simple, but I am getting frustrated. Can anyone shed some light on this for me?

    CSS
    Code:
    /** BEGIN header **/
    #header {
    	height: 178px;
    }
    	#header .search {
    		float: right;
    		margin-top: 11px;
    	}
    		#header .search form {
    			background: url(../images/search.png) no-repeat 0 0;
    			height: 49px;
    			width: 284px;
    		}
    		#header .search form input {
    			float: right;	
    			background-color: transparent;
    			border: 0;
    			font-size: 0.8em;
    			color: #FFFFFF;
    			height: 38px;
    			width: 223px;	
    			margin-top: 5px;
    			text-transform: uppercase;
    		}
    		#header .search form button {
    			float: left;	
    			width: 59px;
    			height: 49px;
    			background-color: transparent;
    			border: 0;
    			color: transparent;
    			text-indent: -9999px;	
    			
    	}
    		
    
    	#header .subscribe {		
    		float: left;
    	}
    
    	#header .logo {
    		clear: both;
    	}
    		#header .logo h1 {
    			padding-bottom: 32px;
    		}
    		#header .logo h1 a {
    			background: url(../images/logo.png) no-repeat 0 0;
    			display: block;
    			text-indent: -9999px;
    			height: 62px;
    			width: 352px;	
    		}
    	
    
    	#header ul {
    		list-style-type: none;	
    		margin-left: 10px;
    	}
    		#header ul li {
    			float: left;	
    			margin-right: 15px;
    		}
    			#header ul li a {
    				padding: 5px 8px;	
    				color: #FFFFFF;
    				text-transform: uppercase;
    				text-decoration: none;
    				font-size: 0.9em;
    				font-weight: bold;
    			}
    			#header ul li a:hover {
    				background-color: #b9c3cf;	
    			}
    /** END header **/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello CarlMartin10,
    Instead of floating that button left, try floating it right.
    Something like this -
    Code:
    #header .subscribe {		
    		float: right;
    clear: right;
    	}
    You could also use absolute positioning to place it there. Just make your #header position: relative; so your .subscribe buttons will position relative to #header.
    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

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello CarlMartin10,
    Instead of floating that button left, try floating it right.
    Something like this -
    Code:
    #header .subscribe {		
    		float: right;
    clear: right;
    	}
    You could also use absolute positioning to place it there. Just make your #header position: relative; so your .subscribe buttons will position relative to #header.
    Floating this right as you mentioned definitely moved the button to the right area, but it pushed down the rest of the header completely out of alignment.

    I will try the position:relative in the header. Do I need to put that in the #header portion of the css, or in the #header .subscribe portion? Also, do I then specify the x,y position of the button at that point? As I said, I am very unskilled at css. Thanks for the help!

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Posts
    207
    Thanks
    30
    Thanked 0 Times in 0 Posts
    I figured it out, thanks for the guidance!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That looks good CarlMartin10, but your using conflicting CSS. If you position that element you probably should not also float it.

    Try it this way:
    Make your #header position: relative;
    Make the CSS for .subscribe look like this -
    Code:
    	#header .subscribe {
    		position: absolute;
    		top: 75px;
    		left: 635px;
    		text-align: center;
    		color: #ffffff;
    		
    	}
    Top and left measurements may need re-adjusted.

    Then have a look at some errors found by the validator.
    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
    •