homepage Welcome to WebmasterWorld Guest from 54.161.236.92
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
6 columns
instead of 3 columns i would like 6
crayc




msg:4370667
 6:08 pm on Oct 4, 2011 (gmt 0)

<div id="col1">
<h2><b>Latest video</b></h2>
<hr />
<p>
<img src="images/video.png" />
</p>
<p><center> <b> <u>more videos</center></u></b>

</p>
<br />
<p><b><u><center Latest Album</u></b> </p>


</div><!--end col1-->

<div id="col2">
<h2><b>Mixes</b></h2><br />
<hr />
<center><p>

<img src="images/musicplayer.png" />



</p>
</div><!--end col2-->

<div id="col3">
<h2><b>Twitter feed</b></h2><br />
<hr />
<p>Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text.</p>
</div><!--end col3-->




I have 3 columns, i tried setting a div tag of col4 and float left as i want it below column 1. but it does not work. what am i doing wrong. thanks

 

penders




msg:4370685
 6:35 pm on Oct 4, 2011 (gmt 0)

i tried setting a div tag of col4 and float left as i want it below column 1


If you want col4 below column 1, then that isn't a 4th column - that would be the 1st column of the 2nd row...?

If you currently have 3 columns, then presumably you have a width defined for col1, col2 and col3. Presumably the widths divide the content area into 3 (taking into account padding/margins)? In order to get 6 columns then you obviously need to reduce the widths of the other 3 columns so that the total width of all 6 columns is not greater than the total width of your content area. Or have I missed something?

crayc




msg:4370694
 6:43 pm on Oct 4, 2011 (gmt 0)

thanks for the reply, i am a newb. yes a row below col 1. no wonder why it did not work.

penders




msg:4370703
 7:04 pm on Oct 4, 2011 (gmt 0)

In that case, your 4th containing DIV should probably have a similar style to col1? You might need to clear the preceding columns (col1, col2 and col3) if they are all floated?

Does that resolve the issue?

crayc




msg:4370707
 7:12 pm on Oct 4, 2011 (gmt 0)

im sorry, i am confused. are you saying to delete the col1,2 and 3. i tried just adding a br and p tag under the colum 1 video and just keep going from there but once i put the center tag, the image i added disappeared.

BeeDeeDubbleU




msg:4370735
 8:22 pm on Oct 4, 2011 (gmt 0)

Define the styles for each of the three columns. Put a clearfix (Google it) after the first three columns then start again with the new columns.

crayc




msg:4370849
 12:58 am on Oct 5, 2011 (gmt 0)

thanks i googled it but i just don't get it. i will keep searching

BeeDeeDubbleU




msg:4370925
 6:53 am on Oct 5, 2011 (gmt 0)

Let's say that you create three appropriate styles for col1, col2 and col3. You would then create three divs styled as col1, col2 and col3. These should be laid out as specified.

<div id="col1">
.........
.........
</div>

<div id="col2">
.........
.........
</div>

<div id="col3">
.........
.........
</div>

<!--Now add your clearfix to "square off the above three columns -->

<div id="clearfix"></div>

<!--Now add the next three columns (properly aligned due to the clearfix div above) -->

<div id="col1">
.........
.........
</div>

<div id="col2">
.........
.........
</div>

<div id="col3">
.........
.........
</div>

In your CSS your clearfix style should look something like,

.clearfix {
clear: both;
}

What happens is that the clearfix basically draws a line under the longest of the cols and you can start another three cols under that.

(hard to explain and I am no expert.)

crayc




msg:4371171
 5:52 pm on Oct 5, 2011 (gmt 0)

thanks for explaining.it made more sense then mostof the sites i have read. I am going to try it. If anything i am just going to reattempt to keep going down col1. I just need to put an album cover under the video player. But for some reason when you put a center tag, everything disappears.

crayc




msg:4371174
 6:01 pm on Oct 5, 2011 (gmt 0)

Ok i am a moron. I just noticed the why the images disappeared and all this was for naught. I did not close the center tag. BR and p worked fine to keep going below. Well least i learned some thing new with the clear fix. thanks for your help and your time. much appreciated!

Demaestro




msg:4371178
 6:12 pm on Oct 5, 2011 (gmt 0)

BBW has you on the right track, just use class="col1" instead of id="col1" .... ids should be unique but class names can be reused.

penders




msg:4371188
 6:47 pm on Oct 5, 2011 (gmt 0)

But for some reason when you put a center tag, everything disappears.


Yeah, avoid using the <center> tag. All styling should be done in the CSS if you want to do it properly (that includes underlining text). Just for the record, all 3 uses of <center> in your script above are either incorrectly nested, malformed (which was your problem with the disappearing content) or not closed.

crayc




msg:4371197
 6:58 pm on Oct 5, 2011 (gmt 0)

oh so don't use the center tag in the html. center it in the css. ok will google that and see how to do it. thanks

crayc




msg:4371209
 7:27 pm on Oct 5, 2011 (gmt 0)

i got the center tag going in css, that was easier. I guess i should do the same with bold underline tags as well. thanks again

penders




msg:4371428
 7:58 am on Oct 6, 2011 (gmt 0)

I guess i should do the same with bold underline tags as well....

<p><center> <b> <u>more videos</center></u></b></p>


This looks a lot like a heading, so perhaps it should be just that, something like:
<h3>More Videos</h3>

You can style this is your CSS however you like:
h3 { 
font-weight: bold; /* Although headings are usually bold by default */
text-decoration: underline; /* But do you really want it underlined? */
text-align: center;
background-color: red;
color: white;
}

crayc




msg:4371864
 12:30 pm on Oct 7, 2011 (gmt 0)

thanks. did not know it was bold by default. the more videos is a link so i think underline is best. i am about 98 percent done on page one. the rest of the other pages should be easier as it does not have as much things on it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved