...

View Full Version : CSS Columns



Decker
09-07-2010, 10:31 PM
WEBSITE LINK (http://ddeckerweb.net16.net/)

Alright, how can I make like one side of the content area, and another side? Like split it in half. Put stuff on one side, put stuff on the other side.

CSS:

body {
font-family: FANTASY;
background-color: #000000;
font-size:100%;
}

#container {
width: 700px;
margin:43px auto 0;
}

#header {
width: 700px;
height: 99px;
background-image:url(images/1.png);
margin: -24px auto;
}

#logo {
width: 400px;
height: 74px;
background-image:url(images/logo.png);
margin: -83px auto;
}

#nav {
background-image:url(images/1.png);
height:34px;
margin: 85px auto;
padding-top:11px;
width:700px;
}

#content {
width: 687px;
height: 350px;
background-image:url(images/content.jpg);
margin: 3px auto;
float: right;
border-style:solid;
border-color:#636363;
}

#menu {
list-style:none outside none;
margin:0 70px;
}


#menu a {
background:url(images/menuLink.gif) no-repeat scroll left bottom transparent;
color:#AFAFAF;
float:left;
font-size:15px;
height:31px;
padding-left:5px;
position:relative;
text-decoration:none;
}

#menu a span{
background:url(images/menuSpan.gif) repeat scroll right bottom transparent;
display:block;
height:27px;
margin:0;
padding:4px 15px 0 10px;
}
#menu a:hover{background: url(images/menuLink.gif) top left no-repeat; color: #252525;}
#menu a:hover span{ background: url(images/menuSpan.gif) top right;}

Apostropartheid
09-07-2010, 10:36 PM
With floats?

Decker
09-07-2010, 10:46 PM
One guy did it before but I don't know how he done it, he made like to sides of the content page.

_Aerospace_Eng_
09-07-2010, 10:53 PM
http://bonrouge.com/2c-hf-fixed.php

Decker
09-07-2010, 11:07 PM
I don't really understand that.

_Aerospace_Eng_
09-08-2010, 03:52 AM
Then I'm not sure what to tell you. That is a CSS layout with 2 fixed columns. He has the html and the CSS. We aren't here to just give you code or change yours without you even trying. What have you tried?

teedoff
09-08-2010, 03:59 AM
Honestly, do you know how to right click on a page and click "view source"? That will show you exactly how the page is coded. This is BASIC stuff that you should be learning on your own, not having ppl here write code for you. View source code and study the html and CSS. Go to w3schools and study the tutorials there. Write your own code and then play and play and play around with things. Change CSS rules and view how it looks, then change it again and see what changed. Thats the only way to learn.

Apostropartheid
09-08-2010, 02:22 PM
Be nice.
If you don't understand basic CSS and HTML, we can't really provide you that much help.
You can learn this from various places; I favoured HTMLDog, but W3Schools is good too.
Once you have a decent understanding of CSS, revisit the page Aero gave you and have another go.
If you're not a web designer and don't intend to learn, on the other hand, I suggest you hire somebody.

teedoff
09-08-2010, 03:53 PM
Sorry I apologize if I sounded rude. That wasnt my intent. I was just trying to strongly suggest he apply some good ole fashioned hands on trial and error and research so that he would learn the basics. As you pointed out Apostropartheid, if he doesnt understand or if he isnt learning the basics, there's not much ppl here can do to help him. Again, sorry if I sounded rude.

and btw, I think I suggested some good books for Decker to purchase as well in one of his other posts, but here they are again:

HTML and XHTML 5th Edition Comprehensive by Carey, Patrick
Dreamweaver CS3 The Missing Manuel by McFarland

even if you're not using dreamweaver, it has very comprehensive chapters and tutorials on html and css. They are not expensive and are very easy to work through with tutorials and example files you can download and work yourself.

Decker
09-08-2010, 11:00 PM
This is an example of what i'm wanting to do (just something I did in paint, was too lazy to open photoshop):

http://img96.imageshack.us/img96/8025/54818597.jpg

effpeetee
09-09-2010, 04:37 PM
There is a lot of help to be found here. (http://exitfegs.co.uk/Sources.html)

Use the Search facility. Single words are quite useful for that.

Frank

teedoff
09-09-2010, 06:16 PM
http://bonrouge.com/2c-hf-fixed.php

Decker, you can go to this site suggested by Aerospace and copy all the code and paste it in your text editor or whatever you are using to write html. Its exactly the same page design as you are wanting with the exception of not having the navigation under the header. You can add that div as well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum