PDA

View Full Version : How do I...

Jackal05
10-01-03, 05:08 PM
Hello,
This is my code:

<style type='text/css'>
#boxtop {
[DIV STYLE CODE: Hidden]
}

#boxbottom {
[DIV STYLE CODE: Hidden]
}

</style>

<div id='boxtop' style='border-bottom:none;'>The top Portion of the Box [Header]</div><div
id='boxbottom'>The body of the box.</div>

As you can see I am creating a box. Now here is what I want to do I wasnt to have the box show up in the middle without the text inside it being in the middle. In short I want to be able to align it without the code inside being affected. So i was to put in the CENTER TAG and have the box be in the center while the text stay in the left side. (Maybe something in the CSS to make the text stay in the same place)

Talking about text I would also like to know how I can make it so that if I type text in there it doesn't go out of the box. I don't want to have a static width just a code to keep the text inside. (if there is one).
Thanks for helping. :)

Edit:
I ahave another questions too. :P How can I make it so that when I assign like the <p> tag it would take care of the marginning of the text. For instance have 10 px of free space starting from the text going up,down, left, and right of the box's border with 10px of space. :)


What I want: http://jackaldesigns.com/box.jpg
Henry
10-01-03, 07:23 PM
I rushed this but i think it works oh and its a bit small but you can make it bigger by modifying the width and stuff:

<html>
<head>
<title>Ya Box</title>
<style type="text/css">
#title {
padding: 0;
background: #fff;
border-bottom: 1px solid #000;
text-align: center;
}

#box {
padding:0px;
margin-bottom: 0px;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
border: 1px solid #000;
background: #fff;
width: 100px;
}

#content {
padding:3px;
margin: 0px;
border: 0px solid #000;
background: #fff;
}
</style>
</head>
<body>
<center>
<div id="box">
<div id="title">Title</div>
<div id="content">
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
</div>
</div>
</div>
<center>
</body>
</html>
petersleeter
10-21-03, 05:33 PM
The above will give you what you want if you add the text-align:left to the #content and your box will appear and the text will be left aligned.