CSS twabble!

Show off new creations, get help, or just chat about all aspects of web development and design.

CSS twabble!

Postby Garrador on Wed Sep 12, 2007 7:59 pm

Ok. Now I need some help with "locking" in text.

I write stuff in the content div, but it wont stay inside at all.... could someone help me with that please`? I think the image speaks for itself:

Image

Thanks for your cooperation. =)
You click on Build or type
make (or some equivalent), and you are astonished, then mortified, as you realize that the whole world is being
recompiled and relinked!
- Scott Meyers
User avatar
Garrador
Veteran
Veteran
 
Joined: Fri May 12, 2006 10:39 pm
Location: Norway

Postby Jest@ on Wed Sep 12, 2007 9:17 pm

overflow:scroll on the parent element.
Highlight to read:
It was earth all along
User avatar
Jest@
Veteran
Veteran
 
Joined: Mon Nov 22, 2004 1:50 am
Location: London UK

Postby Blink on Wed Sep 12, 2007 9:35 pm

Jest@ wrote:overflow:scroll on the parent element.


Not so hasty, the div should be expanding to the size of the text.

Is it float based? Can you link to your CSS, or paste it here?
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Postby Jest@ on Wed Sep 12, 2007 9:47 pm

oh, if you want the div to expand, then just don't set a height on it, iirc. Post your CSS if possible.
Highlight to read:
It was earth all along
User avatar
Jest@
Veteran
Veteran
 
Joined: Mon Nov 22, 2004 1:50 am
Location: London UK

Postby Garrador on Wed Sep 12, 2007 9:53 pm

aight =) well now remember I'm very fresh at CSS, so I dont know what could be better or worse :P

Code: Select all
body
{
}

div.container
{
    width:800px;
    background-color:Black;
    margin:0px;
    border:1px solid black;
}

div.header
{
    width:800px;
    margin:0px;
    border:0px;
    height:120px;
    background-color:#cccccc;
}

div.nav
{
    width:800px;
    height:25px;
    background-color:#c0c0c0;
    border:1px solid black;
    border-bottom-width:0px;
    border-left-width:0px;
    border-right-width:0px;
}

div.content
{
    width:760px;
    height:200px;
    background-color:Gray;
    border:1px solid black;
    border-left-width:0px;
    border-right-width:0px;
    padding:20px;
    padding-top:15px; 
}

div.footer
{
    width:800px;
    height:30px;
    color:white;
    background-color:#c0c0c0;
    clear:left;
}
You click on Build or type
make (or some equivalent), and you are astonished, then mortified, as you realize that the whole world is being
recompiled and relinked!
- Scott Meyers
User avatar
Garrador
Veteran
Veteran
 
Joined: Fri May 12, 2006 10:39 pm
Location: Norway

Postby ChopperDave on Wed Sep 12, 2007 10:26 pm

Yeah, don't use a fixed height for your divs.
User avatar
ChopperDave
Rockstar San Diego
 
Joined: Wed Feb 21, 2007 6:06 pm

Postby Garrador on Wed Sep 12, 2007 10:30 pm

ah ok! :) Thanks dave, blink and jesta!
You click on Build or type
make (or some equivalent), and you are astonished, then mortified, as you realize that the whole world is being
recompiled and relinked!
- Scott Meyers
User avatar
Garrador
Veteran
Veteran
 
Joined: Fri May 12, 2006 10:39 pm
Location: Norway

Postby Blink on Thu Sep 13, 2007 12:19 am

You can certainly tidy up that CSS a little, for example:

Code: Select all
border:1px solid black;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:0px;


Can be cut down to (presuming you want only a top border here, guessing this from the above code):

Code: Select all
border: solid #000;
border-width: 1px 0 0;


Also this:

Code: Select all
padding:20px;
padding-top:15px;


Can be (again, presuming you want only a 15px padding at the top and 20px on all other sides):

Code: Select all
padding: 15px 20px 20px;


Always try to build your CSS as neat as possible as you go, it's a bitch to clear up afterwards, I can tell you that with first hand experience!
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Postby Garrador on Thu Sep 13, 2007 5:22 am

ah thanks alot! :D I hate it when it looks all messy and stuff. Thanks! =)
You click on Build or type
make (or some equivalent), and you are astonished, then mortified, as you realize that the whole world is being
recompiled and relinked!
- Scott Meyers
User avatar
Garrador
Veteran
Veteran
 
Joined: Fri May 12, 2006 10:39 pm
Location: Norway

Return to Web Design & Development

Who is online

Users browsing this forum: No registered users