The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> can someone please help me with my layout
friedman25
post Mar 26 2012, 12:34 PM
Post #1





Group: Members
Posts: 2
Joined: 26-March 12
Member No.: 16,789



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Mar 26 2012, 07:56 PM
Post #2


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



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!


--------------------
~ Dante Monaldo
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
friedman25
post Mar 27 2012, 07:55 AM
Post #3





Group: Members
Posts: 2
Joined: 26-March 12
Member No.: 16,789



thanks a lot for that. It s just what I wanted. It's really great to have sharing their knowledge!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st October 2014 - 11:42 AM