Hey, I am running into a problem with my CSS. I haven’t developed a lot of front end development lately.
Thank you,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<title>Employ Ohio</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="logo.jpg" alt="Logo Here">
<ul id="top_list">
<li>Settings</li>
<li>Sign In</li>
<li>Sign Out</li>
<li>Help</li>
<li>Faq</li>
</ul>
<ul id="bottom_list">
<li>Browse Jobs</li>
<li>Popular Searches</li>
<li>Add Jobs</li>
<li id="about">About Us</li>
<li>Contact</li>
</ul>
</div><!--End of Header-->
<div id="main_content">
<div class="myForm">
<div id="first">
<label for="name">Keywords</label>
<input name="name" id="name" type="text" />
</div>
<div id="second">
<label for="email">Location</label>
<input name="email" id="email" type="text" />
</div>
</div>
</div><!--End of Main Content-->
</div>
</body>
</html>
* {
margin: 0;
padding: 0; }
body {
background: #fff;
color: #1866a6;
font-family: Arial;
font-size: 14px; }
#container {
width: 950px;
margin: 0 auto; }
#header {
width: 950px;
float: left; }
#header img { padding: 5px 0 0 5px; }
#top_list {
float: right;
margin: 10px 10px 0 0; }
#top_list li {
display: inline;
padding: 0 10px 0 0; }
#bottom_list {
float: right;
color: #ee9b17;
margin: -65px 15px 0 0; }
#bottom_list li {
display: inline;
padding: 0 5px 0 0; }
#about {
text-decoration: underline;
color: #111; }
.myForm div {
width: 325px;
margin: 80px 0 0 0;
float: left; }
.myForm div label {
display: block;
margin: 0 100px 0 0; }
input {
width: 373px;
height: 35px; }
#first { margin-left: 10px; }
#second { margin-left: 70px; }
ralphm
February 12, 2014, 3:33am
2
Hi Blake. Could you say more about what the error is?
When I do something like
margin:0 0 0 70px;
It screws up the inputs and throws the layout off.
It’s making me write out the padding/margins to
#first { margin-left: 10px; }
#second { margin-left: 70px; }
I’m trying to make the code as clean as possible. I’m intergrating ASP.NET into the template
ralphm
February 12, 2014, 4:24am
4
What I really mean is that it’s not clear how you want the form to appear. It looks fine in the screen shot to me.
Im trying to have the inputs side by side with a enter input next to the 2 forms. Something like Indeed.com .
<div class="myForm"> <div id="first">
<label for="name">Keywords</label>
<input name="name" id="name" type="text" />
</div>
<div id="second">
<label for="email">Location</label>
<input name="email" id="email" type="text" />
</div>
<div id="third">
<input type="submit" name="submit" value="Submit" style="width:90px; float:left;" />
</div>
</div>
#first { margin-left: 10px; }
#second { margin-left: 70px; }
#third {width:100px; float:left; }
I’m trying to align the inputs up with each other. I’m confused! Haha
ralphm
February 12, 2014, 4:51am
7
Yes, but “aligned” doesn’t mean much.
EDIT: or am I getting this all wrong. I assumed the image is what you currently have. Is it actually what you are aiming for? Make sure to post a clear example of the code you have, as a single page with CSS in the head. Don’t make us reconstruct your page.
[SIZE=2]Sorry,
yeah the picture I attached to the thread is what I am trying to develop.
Heres my code -
[/SIZE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<title>Employ Ohio</title>
<style media="screen" type="text/css">
* {
margin: 0;
padding: 0; }
body {
background: #fff;
color: #1866a6;
font-family: Arial;
font-size: 14px; }
#container {
width: 950px;
margin: 0 auto; }
#header {
width: 950px;
float: left; }
#header img { padding: 5px 0 0 5px; }
#top_list {
float: right;
margin: 10px 10px 0 0; }
#top_list li {
display: inline;
padding: 0 10px 0 0; }
#bottom_list {
float: right;
color: #ee9b17;
margin: -65px 15px 0 0; }
#bottom_list li {
display: inline;
padding: 0 5px 0 0; }
#about {
text-decoration: underline;
color: #111; }
.myForm div {
width: 325px;
margin: 80px 0 0 0;
float: left; }
.myForm div label {
display: block;
margin: 0 100px 0 0; }
input {
width: 373px;
height: 30px; }
#first { margin-left: 10px; }
#second { margin-left: 70px; }
#third {width:100px; float:left; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="logo.jpg" alt="Logo Here">
<ul id="top_list">
<li>Settings</li>
<li>Sign In</li>
<li>Sign Out</li>
<li>Help</li>
<li>Faq</li>
</ul>
<ul id="bottom_list">
<li>Browse Jobs</li>
<li>Popular Searches</li>
<li>Add Jobs</li>
<li id="about">About Us</li>
<li>Contact</li>
</ul>
</div><!--End of Header-->
<div id="main_content">
<div class="myForm">
<div id="first">
<label for="name">Keywords</label>
<input name="name" id="name" type="text" />
</div>
<div id="second">
<label for="email">Location</label>
<input name="email" id="email" type="text" />
</div>
<div id="third">
<input type="submit" name="submit" value="Submit" style="width:90px; float:left;" />
</div>
</div>
</div><!--End of Main Content-->
</div>
</body>
</html>[SIZE=2]
[/SIZE]
Heres another image of what Im trying to achieve with the inputs.
ralphm
February 12, 2014, 6:06am
10
Something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<title>Employ Ohio</title>
<style media="screen" type="text/css">
* {
margin: 0;
padding: 0; }
body {
background: #fff;
color: #1866a6;
font-family: Arial;
font-size: 14px; }
#container {
width: 950px;
margin: 0 auto;
}
#header {width: 950px; margin-bottom: 20px;}
#header img {padding: 5px 0 0 5px; }
#top_list {
float: right;
margin: 10px 10px 0 0; }
#top_list li {
display: inline;
padding: 0 10px 0 0; }
#bottom_list {
float: right;
color: #ee9b17;
margin: -65px 15px 0 0; }
#bottom_list li {
display: inline;
padding: 0 5px 0 0; }
#about {
text-decoration: underline;
color: #111; }
.myForm {overflow: hidden;}
.myForm div {display: inline-block; vertical-align: bottom;}
.myForm div label { display: block;}
input[type="text"] {width: 370px; height: 30px;}
#third input {width: 90px;}
#first, #second {margin-right: 10px; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="logo.jpg" alt="Logo Here">
<ul id="top_list">
<li>Settings</li>
<li>Sign In</li>
<li>Sign Out</li>
<li>Help</li>
<li>Faq</li>
</ul>
<ul id="bottom_list">
<li>Browse Jobs</li>
<li>Popular Searches</li>
<li>Add Jobs</li>
<li id="about">About Us</li>
<li>Contact</li>
</ul>
</div><!--End of Header-->
<div id="main_content">
<div class="myForm">
<div id="first">
<label for="name">Keywords</label>
<input name="name" id="name" type="text" />
</div>
<div id="second">
<label for="email">Location</label>
<input name="email" id="email" type="text" />
</div>
<div id="third">
<input type="submit" name="submit" value="Submit" />
</div>
</div>
</div><!--End of Main Content-->
</div>
</body>
</html>
Perfect, thanks. I appreciate your help. I got it from here.
but I got it thanks!
ralphm
February 12, 2014, 6:25am
12
No worries. Glad that helps. Actually, I added the overflow when the items were floated, but then changed to display: inline-block, so probably should have removed the overflow. It’s not needed if you use inline-block display.
I used inline-block instead of float because it makes it easy to align each div to the baseline.
You have a picture in your mind, but you haven’t put it into words yet. In your image, the inputs are aligned—bottom aligned, that is. Do you want something else? Do you want them center aligned vertically, for example? You just have do describe clearly what you are aiming for here. The code you posted at first doesn’t replicate what you have in the image.