PDA

View Full Version : Floating boxes with CSS


labrynth_of_fire
11-18-2003, 04:24 PM
Can someone help me get this box all the way to the left on the BLUE image (left side) not the banner (http://zultone.com) and heres the code,
<html>
<head>
<title>Zultone.com</title>
</head>
<body>
<style type="text/css">
body {font size: 15pt;
font-family: Papyrus;
color: blue;
background-image: url(images/navbar.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0% 50%;
background-color: blue;
text-decoration: none;
}
div {background-color: green;
font-size: 15pt;
text-decoration: overline;
font-weight: bold;
font-family: carson;
color: blue;
}
p {text-indent: 0.5in;
margin-left: 50px;
margin-right: 50px;
}
.right {text-align: right;}
.left {text-align: left;}
.justify {text-align: justify;}
.center {text-align: center;}
.letterspaced {letter-spacing: 10pt;}
.wordspaced {word-spacing: 20px;}
.sub {vertical-align: sub;}
.super {vertical-align: super;}
p.indent {text-indent: 20px;
line-height: 200%;}
p.negindent {text-indent: -10px;
background-color: blue;}
#bigchar {background-color: red;
color: black;
font-size: 28pt;
font-family: Impact;}
p.carson {font-size: 12pt;
font-family: Courier;
letter-spacing: 4pt;
line-height: 5pt;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}
.underline {text-decoration: underline;}
.blink {text-decoration: blink;}
.line-through {text-decoration: line-through:}
.overline {text-decoration: overline;}
.normal {white-space: normal;}
.pre {white-space: pre;}
.nowrap {white-space: nowrap;}
a:link {color: puprple;text-decoration: none;}
a:visited {color: red ;text-decoration: none;}
a:active {color: green;text-decoration: line-through;}
a:hover {color: pink;text-decoration: underline;}
#one {background-color: grey;
margin: 1cm;}
#two {background-color: grey;
margin-top: 1cm;
margin-bottom: 1cm;
margin-right: .5cm;
margin-left: 100%}
#three {background-color: red;}
#groupnav {text-align: left;
background (url
font-size: 12pt;
font-family: Tahoma;
color: black;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 12pt;
word-spacing: 20px;}
#content1 {font size: 15pt;
font-family: Impact;
color: black;
background-color: white;
text-decoration: none;}
#nav1 {text-align: left;
font-size: 12pt;
font-family: MS Serif;
color: red;}
p.aligned-left {border-style: dashed;
font-size: 12pt;
font-family: MS Serif;
color: red;
border-width: 2px;
width: 220px;
height: 100%;
float: left;
align: left;}


</style>




<p id="nav1">
<p class="aligned-left">

Navigation

<a href="http://zultone.com/main.html">
Main page</a>

where the

name zultone

came from

</p>
</p>








<table border=3 bordercolor=blue bgcolor=red>
<tr><td><center>
Heather's kickin' site! (http://swordofthegarden.0catch.com/heather/index.html)
</center></tr></td>
<tr><td>
<center>Taylor's kicken' site! (http://devoted.to/taylorg)</center>
</tr></td>
</table>
</center>

</body>
</html>
[/url]
mysticlighthouse
11-21-2003, 04:39 PM
I'll be happy to help you... could you be a little more descriptive on what you are actually wanting?
labrynth_of_fire
11-21-2003, 11:09 PM
I'll be happy to help you... could you be a little more descriptive on what you are actually wanting?
Theres that little red navigation box, I can't get it to the farthest left of the screen, i want it all the way left, intsead of partway
mysticlighthouse
11-22-2003, 08:59 AM
throw a "margin:0" in your body selector.
tikanet
11-24-2003, 08:04 PM
Oh, and it's not just in consideration of good form that a document or external call to a style declaration be placed in the <head> tag. If you have a body block in the style declaration, browsers like to be able to parse the CSS info before having to apply it anywhere inside the <body> of the file to which it's attached.
mysticlighthouse
11-24-2003, 09:16 PM
That's what I said... put it in the body selector
labrynth_of_fire
11-25-2003, 02:47 PM
thanks for the tips everyone!
I did away with the box and used tables instead (I redesigned my whole site....again..)....