...

View Full Version : DIV not aligned as it should



soltek
04-25-2011, 05:55 PM
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:
http://img199.imageshack.us/img199/4770/messedupf.png

Please, take a look at my code:

HTML:


<!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:


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;
}

effpeetee
04-25-2011, 06:07 PM
We really need all of your code including th Doctype in order to help in a meaningful way.

Frank

soltek
04-25-2011, 06:27 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum