blue box with css ? - please help

[jeddik]

Hello,
I am still pretty new to using css and I want to know if I can use it to draw a rectangular box of width 160px and hieght 140px with a fill colour of blue.

It would be nice if there was a 2px black border - but thats not too important.

Can this be done in just css or do I need to use a table ?

How is it done ?
The above is just an example, I hope to learn from this one and do the others myself if someone can help me out with it :)

Thanks.

[gil davis]

<style type="text/css">
.box {
width: 160px;
height: 140px;
border: solid black 2px;
background-color: blue;
}
</style>
<span class="box"></span>

[WebJoel]

And using gil's example above, -you can experiment with different border types, position and padding:

<style type="text/css">
.box {
width: 160px;
height: 140px;
border: dotted black 2px;
background-color: blue;
position:relative; left:25px; top:25px;
padding:20px 6px 6px 15px;
}
</style>
<div class="box"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p></div>


<style type="text/css">
.box {
width: 160px;
height: 140px;
border: dashed black 2px;
background-color: blue;
position:relative; left:25px; top:25px;
padding:20px 6px 6px 15px;
}
</style>
<div class="box"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p></div>


<style type="text/css">
.box {
width: 160px;
height: 140px;
border: double black 6px; /* need to increase width for "double" */
background-color: blue;
position:relative; left:25px; top:25px;
padding:20px 6px 6px 15px;
}
</style>
<div class="box"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p></div>

-Some nice alternative effects. :D
I think that you'll want to use a DIV instead of SPAN, though. "Span" is more for styling small sections in a line, not for any larger 'container' of whole blocks of text. It will display differently than expected.

[jeddik]

Works great in IE but not in FF Moz.
I guess it needs a tweak ??

[jeddik]

Thanks fro those extra hints.
I took out the span and it works fine in both browsers now.
:D

[jeddik]

Hello,

I am using the following ccs for my links as it makes nice
buttons for me :) (I didn't create it myself though).

The problem I have is: in FF Mox it works great...
but in IE the buttons are not the same width but
are much wider.

As I didn't write the code I am not sure why there is no width parameter in the #nav - should it have one ??

Any explaination and guidance would be most welcome. :)


#nav a, #nav a:visited {
text-decoration:none;
text-align:center;
background-color:#6666cc;
font-size:0.7em;
font-family:Tahoma;
font-weight:normal;
color:#fff;
display:block;
width:10 em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em ;
}

#nav a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
background-color:#cc6699;
}


<div id="nav" style='position:absolute;left:644px; top:200px'>
<a href="<?php echo "a_run_top.php?a=$N_ow"; ?>" >Next Page</a>
</div>

[WebJoel]

Thanks fro those extra hints.
I took out the span and it works fine in both browsers now.
:D
"span" is an inline element I believe, and would not take the style to precisely in this case. Better to give it the block-level "div" and I didn't include this, but because I added 'lorem ipsum' at the last second before posting, the height of the div should be made "auto", not 140px as this text will overflow that by about half again as much....

-Joel