PDA

Click to See Complete Forum and Search --> : two simple CSS questions...

weee
10-03-2004, 08:15 PM
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="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!
Jupac
10-03-2004, 08:19 PM
1)margin-left: auto;margin-right: auto;text-align:center;

2) huh?
Paul Jr
10-03-2004, 08:23 PM
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.
weee
10-03-2004, 08:30 PM
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’s display to block"

Thanks guys!
Paul Jr
10-03-2004, 08:34 PM
Originally posted by weee
wraper class like that:

.wrapper {
width: 792px;
text-align: left
}

Yes, like that, but you could use an ID. It is merely a matter of preference, though.

Also, make sure you write the appropriate markup to go along with the CSS.

Originally posted by weee
Why do I need the margin?
The margin is what centers the DIV in the page. The text-align: center; applied to the BODY styles is only for IE 5.x.

Originally posted by weee
Why do I have to make it as a an ID and not DIV?
An ID and a DIV are two completely different things. An ID is an attrubite, and a DIV is an element. I prefer to use IDs over classes, but it is merely a matter of preference.

Originally posted by weee
I'm not sure what do you mean when you're saying:
"try setting the image’s display to block"
Sometimes you will get odd spaces under images, since they are inline elements. By setting the display to block, I mean something like this: .block_img { display: block; }, and then apply the class to the image (class="block_img").
weee
10-03-2004, 08:42 PM
The margin is what centers the DIV in the page. The text-align: center; applied to the BODY styles is only for IE 5.x.

So it should like that:

.wrapper {
width: 792px;
text-align: left
margin: 0 auto 0 autopx;
}

An ID and a DIV are two completely different things. An ID is an attrubite, and a DIV is an element. I prefer to use IDs over classes, but it is merely a matter of preference.

So I guess it's OK working with classes right?

Sometimes you will get odd spaces under images, since they are inline elements. By setting the display to block, I mean something like this: .block_img { display: block; }, and then apply the class to the image (class="block_img").

I tried this but it's still the same:
<div style="display: block;"><img src="imgs/left3.jpg" style="display: block;"></div>

How can I fix it?

Thanks for your support guys!
IncaWarrior
10-03-2004, 09:02 PM
div's are already block elements so you wouldn't need to change that one.

First of all I would not use that padding:1px; since that just pushes the image off 1px from the sides and it looks kind of funny. Second, you should assign a margin to that box so it knows what to use. Try

margin:0;
padding:0;
margin-right:1px;

for .ltop
weee
10-03-2004, 09:06 PM
I can deal with the space on the side but I right now I want tget the space between the image and the bottom div smaller. What do u think is the problem?
Paul Jr
10-03-2004, 09:08 PM
Originally posted by weee
So it should like that:

.wrapper {
width: 792px;
text-align: left
margin: 0 auto 0 autopx;
}
Yup. Just remove the part in red; specifying px/em/ex/pt/pc/ect. is not required when the value is 0 or auto.

Originally posted by weee
So I guess it's OK working with classes right?
Certainly.

Originally posted by weee
I tried this but it's still the same:
<div style="display: block;"><img src="imgs/left3.jpg" style="display: block;"></div>

How can I fix it?
The display: block; is only needed on the image. Didn’t work? Hmm. Are you sure the image is 237 pixels in height?
weee
10-03-2004, 09:19 PM
The problem was in the bottom blue box. I changed the margin:
margin: 0 1 1 1px;

Thanks for everything guys!!!
juan ramon
10-04-2004, 02:50 AM
Visit my page and you can resolve your question. My name is Juan Ramon, and my page is juanramon.org (http://www.juanramon.org)
Paul Jr
10-04-2004, 04:27 PM
Originally posted by juan ramon
Visit my page and you can resolve your question. My name is Juan Ramon, and my page is juanramon.org (http://www.juanramon.org)
It’s in (I think) Spanish, so I don’t know what it says, but it just appears to be a portfolio. :confused: