Hi There.
I have this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<style type="text/css">
body {
background-color: #000;
margin: 60 0 0 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.leftcol {
background-color: #fff;
width: 192px;
float: left;
margin: 0px;
}
.ltop {
padding: 1px;
height: 237px;
color: #fff;
background-color: #fff;
}
.lbottom {
background: #134f8e;
height: 91px;
padding: 10px;
margin: 1px;
text-align: left;
font: 12px;
color: #fff;
}
.rightcol {
width: 600px;
float: left;
}
.cont1 {
padding: 0px;
height: 24px;
background-color: #91d4fe;
}
.cont {
padding: 0px;
height: 306px;
background-color: #f00;
}
</style>
<title></title>
</head>
<body>
<div class="leftcol">
<div class="ltop">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/left1.jpg">
</div>
<div class="lbottom">
Welcome<br><br>
text text text text text text text text
text text text text text text text text
</div>
</div>
<div class="rightcol">
<div class="cont1">
xsas
</div>
<div class="cont">
Blah blah
</div>
</div>
</body>
</html>
My questions are:
1. I want to have the whole things in the middle of the screen and not align to the left. How can I do it?
2. On the left side (image attched) there's an image and under it there's the Welcome text. The problem is that I want to have only 1 pixel of white space between the upper image and the blue bottom box. Why it gives me this 4 PIXLES space? How can I fix it?
Thanks a lot!1)margin-left: auto;margin-right: auto;text-align:center;
2) huh?To clarify what lakers said, apply text-align: center; to your BODY styles. Then, wrap all of your HTML in a DIV, and assign that DIV an ID of, say, wrapper. Now, style the wrapper DIV by setting a width to it, set the left and right margins to auto, and, re-align the text to the left, apply text-align: left;.
As for number two, try setting the image’s display to block.wraper class like that:
.wrapper {
width: 792px;
text-align: left
}
Why do I need the margin?
Why do I have to make it as a an ID and not DIV?
I'm not sure what do you mean when you're saying:
"try setting the image鎶
I have this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<style type="text/css">
body {
background-color: #000;
margin: 60 0 0 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.leftcol {
background-color: #fff;
width: 192px;
float: left;
margin: 0px;
}
.ltop {
padding: 1px;
height: 237px;
color: #fff;
background-color: #fff;
}
.lbottom {
background: #134f8e;
height: 91px;
padding: 10px;
margin: 1px;
text-align: left;
font: 12px;
color: #fff;
}
.rightcol {
width: 600px;
float: left;
}
.cont1 {
padding: 0px;
height: 24px;
background-color: #91d4fe;
}
.cont {
padding: 0px;
height: 306px;
background-color: #f00;
}
</style>
<title></title>
</head>
<body>
<div class="leftcol">
<div class="ltop">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/left1.jpg">
</div>
<div class="lbottom">
Welcome<br><br>
text text text text text text text text
text text text text text text text text
</div>
</div>
<div class="rightcol">
<div class="cont1">
xsas
</div>
<div class="cont">
Blah blah
</div>
</div>
</body>
</html>
My questions are:
1. I want to have the whole things in the middle of the screen and not align to the left. How can I do it?
2. On the left side (image attched) there's an image and under it there's the Welcome text. The problem is that I want to have only 1 pixel of white space between the upper image and the blue bottom box. Why it gives me this 4 PIXLES space? How can I fix it?
Thanks a lot!1)margin-left: auto;margin-right: auto;text-align:center;
2) huh?To clarify what lakers said, apply text-align: center; to your BODY styles. Then, wrap all of your HTML in a DIV, and assign that DIV an ID of, say, wrapper. Now, style the wrapper DIV by setting a width to it, set the left and right margins to auto, and, re-align the text to the left, apply text-align: left;.
As for number two, try setting the image’s display to block.wraper class like that:
.wrapper {
width: 792px;
text-align: left
}
Why do I need the margin?
Why do I have to make it as a an ID and not DIV?
I'm not sure what do you mean when you're saying:
"try setting the image鎶