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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV not aligned as it should

    Hello, I'm trying to do a navigation bar, everything was ok, but now, when I'm trying to add the search form, it gets like 10px marginor something.

    Like:


    Please, take a look at my code:

    HTML:

    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>
    <link rel="stylesheet" type="text/css" href="css.css" />
    </head>
    <body>
    <div class="wrapper">
    	<div class="menu">
    		<div class="items">
    			<a class="x" href="google.com"><span>1
    			</span></a>
    			<a class="x" href="google.com"><span>2
    			</span></a>
    			<a class="x" href="google.com"><span>3
    			</span></a>
    			<a class="x" href="google.com"><span>4
    			</span></a>
    			<a class="x" href="google.com"><span>5
    			</span></a>
    			<a class="x" href="google.com"><span>6
    			</span></a>
    		</div>
    		<div class="sair"><img src="imagens/sair.png">
    		</div>
    		<div class="pm"><img src="imagens/mensagem.png">
    		</div>
    		<div class="pesquisa">
    			<form method="get" id="searchform" action="http://www.test.com/">
    				<fieldset class="search">
    					<input type="text" class="box" />
    					<button class="btn" title="Submit Search">Search</button>
    				</fieldset>
    			</form>
    		</div>
    	</div>
    </body>
    </html>
    CSS:

    Code:
    html {
    height: 100%;
    }
    
    body {
    margin: 0px;
    height: 100%;
    }
    
    .wrapper {
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    }
    
    .menu {
    height: 35px;
    background-image: url('imagens/menu-fundo.png');
    background-repeat: repeat-x;
    box-shadow: 3px 3px 7px #000;
    border: 1px solid red;
    }
    
    .items {
    padding-top: 10px;
    height: 20px;
    font-weight: bold;
    color: red;
    border: 0px solid red;
    width:80%;
    display: inline-table;
    }
    
    .x {
    padding: 3px;
    color: white;
    font-size: 12px;
    font-family: "verdana",sans-serif;
    box-shadow: 0px 0px 7px #162fc8;
    width: auto;
    line-height: 12px;
    height: 20px;
    display: inline;
    border-radius: 6px;
    margin-right: 7px;
    text-decoration: none;
    }
    
    .items a:hover {
    padding: 3px;
    color: white;
    font-size: 12px;
    font-family: "verdana",sans-serif;
    width: auto;
    line-height: 12px;
    height: 20px;
    display: inline;
    border-radius: 6px;
    box-shadow: 0px 0px 7px #000;
    text-decoration: none;
    }
    
    .sair {
    margin-top: 4px;
    margin-right: 4px;
    float: right;
    display: inline;
    border: 0px solid red;
    }	
    
    .pm {
    margin-top: 6px;
    margin-right: 4px;
    float: right;
    display: inline;
    border: 0px solid red;
    }
    
    .pesquisa {
    float: right;
    display: inline-table;
    	border: 1px solid red;
    margin-right: 5px;
    background: red;
    position: relative;
    margin-top: 0px;
    }
    
    fieldset.search {
    	border: none;
    	width: auto;
    	margin: 0px;
    	padding: 0px;
    	background: #000;
    	height: 20px;
    	border: 1px solid red;
    display: block;
    }
    .search input, .search button {
    	border: none;
    	float: left;
    }
    .search input.box {
    	color: #fff;
    	font-size: 1.2em;
    	width: 190px;
    	height: 20px;
    	padding: 0px;
    	background: #616161 url(search_bg.gif) no-repeat;
    }
    .search input.box:focus {
    	background: #616161 url(search_bg.gif) no-repeat left -38px;
    	outline: none;
    }
    .search button.btn {
    	width: 20px;
    	height: 20px;
    	cursor: pointer;
    	text-indent: -9999px;
    	background: #fbc900 url(search_bg.gif) no-repeat top right;
    }
    .search button.btn:hover {
    	background: #fbc900 url(search_bg.gif) no-repeat bottom right;
    }
    Last edited by soltek; 04-25-2011 at 05:26 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need all of your code including th Doctype in order to help in a meaningful way.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    We really need all of your code including th Doctype in order to help in a meaningful way.

    Frank
    Sorry, I didnt want to build a text wall.
    Now there's the entire code, thanks for the heads up.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •