Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ can someone please help me with my layout

Posted by: friedman25 Mar 26 2012, 12:34 PM

I m trying to create a basic layout with Html, but I m new at it. Basically I would like the bar to be of the same size and shape, while having the different feature that I have already coded. I don t know why I can t set the "filter" and "Profile" with the same size. I also can t put the search bar centered in the middle of the bar.

Here is the CSS and Html code:

body {background-color:#cccccc;}

#barwidth {
width:1800px;
}

.all {
width: 1200px;
height:100px;
margin:20px 60px;
}

#listegauche
{
float:left;
width:28%;
height:35px;
padding:0;
margin:0;
list-style-type:none;
padding-left:130px;
padding-top:5px;
font-size:17px;
background-color:#ff2334;
}

#r {
float:left;
background-color:#ff2334;
}

#profile
{
float:left;
margin-top: 5px;
padding-bottom:6px;
Background-color:#ff2334;
}

#filter
{
Background-color: #ff2334;
font-size: 15px;
color: white;
padding-bottom:20px;
border:none;
width:85px;
}

a
{
float:left;
width:5em;
text-decoration:none;
color:white;
padding:0.2em 0.6em;
}

#propose {
float: centre;
padding:3em 15em;
}

</style>
</head>

<body>

<div id="barwidth">
<h1>solution</h1>

<ul id="listegauche">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>

<div id="r">
<form name="input" action="html_form_action.asp" method="get"><br/>
<input type="text" name="user" size="25" />
<input type="submit" value="propose" />
</form>
</div>

<ul id="profile">
<li>Profile</li>
</ul>

<select id="filter">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

Thank you in advance.

Posted by: Dante Monaldo Mar 26 2012, 07:56 PM

First off, you should put all the elements that you want in the red bar in one div. That will help get rid of having to change the padding, margins and height of each element to make it fit.

There is no such thing as "float: center;"
http://www.w3schools.com/cssref/pr_class_float.asp

Also, there was a <br/> tag right after the <form> tag that was causing the search box to not center. And don't forgot to close divs!

I made some changes so try it now.

CODE

body {background-color:#cccccc;}

#barwidth {
width:1800px;
}

#headerwrap {
height:25px;
background-color: #ff2334;
padding:10px;
vertical-align:middle;
}

.all {
width: 1200px;
height:100px;
margin:20px 60px;
}

#listegauche
{
float:left;
width:28%;
padding:0;
margin:0;
list-style-type:none;
font-size:17px;
background-color:#ff2334;
}

#r {
float:left;
}

#profile
{
float:left;
padding:0;
margin:0 10px;
list-style-type:none;
}

#filter
{
font-size: 15px;
color: white;
border:none;
width:85px;
}

a
{
float:left;
width:5em;
text-decoration:none;
color:white;
padding:0.2em 0.6em;
}

#propose {
float: left;
padding:3em 15em;
}

</style>
</head>

<body>
<div id="barwidth">
<h1>solution</h1>

<div id="headerwrap">
<ul id="listegauche">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>

<div id="r">
<form name="input" action="html_form_action.asp" method="get">
<input type="text" name="user" size="25" />
<input type="submit" value="propose" />
</div>

<ul id="profile">
<li>Profile</li>
</form>
</ul>

<select id="filter">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>

Hopefully that helps!

Posted by: friedman25 Mar 27 2012, 07:55 AM

thanks a lot for that. It s just what I wanted. It's really great to have sharing their knowledge!