CSS Woes ...

For your website woes and whees
Post Reply
User avatar
slightly-caustic
Celebrity
Celebrity
Posts: 474
Joined: Sun Dec 28, 2008 2:30 pm
Dolling Style: Pixel
Avatar Base: http://pixel-glam.com/
Location: USA
Contact:

CSS Woes ...

Post by slightly-caustic » Tue May 17, 2011 2:31 pm

Err, me and the CSS ... we're not friends.

I have been trying to make a layout using CSS, but I don't really know much about it so I have been experimenting as I go. So, I apologize in advance for the poor state of my code.

My most recent problem has been trying to make side by side columns, in this case "commentary" and "answers" so that they match the styling of the other little sections in the body.

I tried to do it with a table also, that didn't work either ...

This is the current incarnation of the layout: Here
-If you are having trouble shortening my username, you can call me Cat-

ImageImage

Image

User avatar
Ninique
Celebrity
Celebrity
Posts: 316
Joined: Mon May 04, 2009 9:00 pm
Dolling Style: Pixel
Location: Canada
Contact:

Re: CSS Woes ...

Post by Ninique » Tue May 17, 2011 7:51 pm

I'm not 100% sure that this is what you mean, but the way that you normally use to put side columns, or things side-by side using CSS without tables is called "floats". I strongly suggest that you read this tutorial, as it will explain it better than I can: http://css-tricks.com/all-about-floats

By the way I took a look at your source, and there's a lot of unnecessary code in there. Like, you don't need to use <font> tags for specifying the font and colors you want. (In fact, it's recomended you don't. Font tags are an old way to do things, and they are a huge pain to maintain). Instead, just specify the properties you want in the CSS, to the container that your text is in:

Code: Select all

.split1{
color: #ff3a19;
font-size: 16px;
font-style: italic;
}
Also, you don't really need to put another div on the top and on the bottom of each of those "split1" divs. There's a nice property in CSS called borders which will do that for you. (In the following code, solid means that you want the whole border to be one solid colour. You also have the choice of making it dotted, dashed, or double) :

Code: Select all

border-top: 1px solid #ff3a19;
border-bottom: 1px solid #ff3a19;
Image
Av base is Glam Exclusive by Hollay, edit by DarkPhoenix

User avatar
slightly-caustic
Celebrity
Celebrity
Posts: 474
Joined: Sun Dec 28, 2008 2:30 pm
Dolling Style: Pixel
Avatar Base: http://pixel-glam.com/
Location: USA
Contact:

Re: CSS Woes ...

Post by slightly-caustic » Tue May 17, 2011 9:57 pm

I it took me a couple of hours, but everything you suggested worked perfectly. Thank you!
-If you are having trouble shortening my username, you can call me Cat-

ImageImage

Image

Post Reply

Return to “Screen Writer's Lounge”