CSS columns
i've attached a free web design i took to make my site, i've had numerous attempts to change some stuff in it only to find out i messed it up more...
what i want to do is this:
1.) remove the profile boxes from the new members section and lower its height (this i can do myself, no need to explain)
2.) split the "new members" in half so there will be left and right columns (kinda did it myself, but this is the main part where i screwed up by breaking the wrapper & creating gaps between the outer border and the cells)
3.) add 2 panes to the left and right sides of the layout (this i'm too afraid to try)
please, if you take this mission, please add comments on the HTML and CSS files about the changes that you made...
| Attachment | Size |
|---|---|
| dark_shine.zip | 29.7 KB |
Megan posted this at 17:54 — 6th October 2006.
She has: 11,421 posts
Joined: Jun 1999
We can't do this for you but we can help you figure it out
Where did you want to the 2 extra panes? Do you mean vertical columns extending from top to bottom? On the outside of the current layout? (wouldn't that be too wide?). I'm assuming you mean one on each side not two on each side, right?
For new members, do you want longer lists of text links without the boxes?
I'll take a look at the code and see what I can come up with.
Megan
Connect with us on Facebook!
kingo'mountain posted this at 18:15 — 6th October 2006.
They have: 7 posts
Joined: Oct 2006
thats right, ill give you a quick sketch:
[left][ main layout ][right][pane][ ][pane ]
[ ][ ][ ]
what i had in mind, is using a script or something to have 5-6 rows of new members, and the list updates on itself removing the oldest
member from the buttom and putting the newest member on top, if its javascript, i'd love to get ahold of the code
thanks in advance for not ignoring me
Megan posted this at 18:23 — 6th October 2006.
She has: 11,421 posts
Joined: Jun 1999
Alrighty, I'm going to do the columns first. This is a sort of the easy way to do it. There are better ways of getting three columns but that gets into more complicated code which you'll have to look up yourself.
The first thing we need to do is create another outer wrapper outside the one we've got. So put this around the and outer closing (that will go at the very end of the code, right before . You should rename those sidepanels to something that describes what is actually in those columns.
Now we need some code to put those columns in the right place:
#sidepanel1 {float: left; width: 138px; font-size: 80%; padding: 5px}#sidepanel2 {float: right; width: 138px; font-size: 80%; padding: 5px }
This looks good, but we've got a problem with the content boxes now. So we have to fix that code to make them fit properly. So find the .contents class and change the width to 290px.
Ta da! There's a bit of a problem in Internet explorer right now but I think that will be fixed when we get that members section sorted out.
Megan
Connect with us on Facebook!
Megan posted this at 18:41 — 6th October 2006.
She has: 11,421 posts
Joined: Jun 1999
Now we'll do that members box and hopefully straighten out the IE problems. FIrst we need to take those images out and put the links around the text instead. That's easy, no need to explain that.
To redude the height of this block go to #main in the CSS and change that value to whatever you think will work. I'll go with 120px. We also have to change the widht of #main ul to fit with our new layout. I'll change that to 610px. Perfect.
Now I've noticed a problem with the columns in IE - the right side column is pusihng the main content down. I can't find a way to fix that immediately so I'll come back to it later.
Now you want this in two boxes right? Or do you want the profiles just listed in multiple columns? To create multiple columns you'd have to get your script to generate the end of the list and start the new one. Or you could just keep everything as-is - the list will just keep wrapping around onto a new line in this case. You would need to adjust the CSS a bit to make everything fit there.
Megan
Connect with us on Facebook!
Megan posted this at 18:55 — 6th October 2006.
She has: 11,421 posts
Joined: Jun 1999
Arrrgggh! This is really annoying, I have the same code working on another site but it's not working here! (for the right column.)
Megan posted this at 19:21 — 6th October 2006.
She has: 11,421 posts
Joined: Jun 1999
Alright, now I've got those columns fixed. Unfortunately we have to use a little filter for IE 6. Replace the #wrapper CSS with this:
#wrapper {
width: 650px;
margin: 0;
background-color: #F3F3F3;
border-bottom: none;
height: auto;
float: left;
}
html>body #wrapper {
margin-left: 150px;
float: none;
}
IE 6 and below will not see the bit in the html>body. So it will be floating that div to the left. The others will keep it in place and apply a left margin.
I'll try to help you again once I'm clear on what you want to do with that members block. I will be away for the weekend though so hopefully someone else can help you before then.
Let me know if you have problems getting this code working and I'll show you what I have here.
Megan
Connect with us on Facebook!
kingo'mountain posted this at 22:27 — 6th October 2006.
They have: 7 posts
Joined: Oct 2006
well, the panes went well, i've added them without taking the profile boxes off, so that made a gap between the main black bar (with the colored buttons) and the outer border, but once i got rid of the boxes it all aligned like it should, i've also taken the opportunity to get that same black bar i mentioned on top of the inner wrapper because i discovered that once i reduced the width of the wrapper and main, the stats on the bar would overlap with the buttons, so thats fixed too....
about the new members thing ..... i was thinking:
| new members | some other content || | which is just text |
| dan | |
| igor | |
| michael | |
| | |
kingo'mountain posted this at 22:38 — 7th October 2006.
They have: 7 posts
Joined: Oct 2006
i've made major progress since then, just so you wont have to come with a solution to the new members section, i already fixed that, i replaced all the "main" div (the section where the "new members" are") with a simple table, so now its aligned and i finally got what i wanted!...
i've also replaced the main content (text paragraphs) divs with a table, yes, i know tables suck major butt and W3 are going to put out table use for good, but for me its a lifesaver, without it, i'd leave all the site building alone until i die, hehe
now i only need to fill the panes with boxes (not the profile ones) like
making a login form, adding some banners, a few combo boxes and dropdowns (i'll need help with them)
if you want an updated zip with the changes, say so, i'd love to show you how it looks now :jump:
Megan posted this at 13:05 — 10th October 2006.
She has: 11,421 posts
Joined: Jun 1999
Awwww! That's so disappointing! That template was so well coded
:( I foud those boxes to be a bit of a problem anyway - you're going to have trouble if they're not quite the right length. Finding another way to display that would be good. The secret to getting them to line up is to get the width just right. Try playing with the width on the .content class. You could also put a height and overflow: scroll in to get the heights to work right.
I'm glad to hear you've goten things straightened out.
Megan
Connect with us on Facebook!
kingo'mountain posted this at 21:29 — 12th October 2006.
They have: 7 posts
Joined: Oct 2006
you dont understand, i've replaced the .content div because when i add more lines to one of the text blocks, the alignment gets messy and evasive even, a table keeps everything intact, think of tables as cement to building blocks, it bonds them, so i think the 2 (tables and CSS divs) should forever be together because if used right, the stars are the limit
Megan posted this at 13:00 — 13th October 2006.
She has: 11,421 posts
Joined: Jun 1999
There are ways to get around that. Rather than messing up a perfectly good xHTML strict layout
kingo'mountain posted this at 14:29 — 13th October 2006.
They have: 7 posts
Joined: Oct 2006
ok, if you know of a way to get everything nice and dandy without using a single table, i challenge you, only you.... to get everything aligned like it is right now... because i'm hopeless when it comes to CSS.....
i'll have to split the site to the code and the pictures in seperate zips because the filesize limit is not 100k, but only 50k, sorry
Megan posted this at 16:46 — 13th October 2006.
She has: 11,421 posts
Joined: Jun 1999
This is actually no problem. If you had boxes with text on each side it might be a little trickier. This is easy though.
Yikes! You put font tags in there too! You really need to learn some CSS, asap! That poor template, I feel bad for it being massacred by tables and font tags
I actually started working on this for awhile with your code but lots of things were getting messed up so I'm going to work with what I had before. I'll attach my original HTML and CSS files if you need them. The code you had is very different from what I was working on.
From here, what we need to do is make room for the images on the front page. So we'll make a new class for widecontent and apply it to the two div's:
<div class="widecontent">
<h1>Second Header</h1>
<h2>Welcome</h2>
(lorem ipsum text was here). </div>
<div class="widecontent">
<h1>More stolen content from lipsum.org</h1>
(text was here) </div>
The widecontent class will look similar to the content class, only with a different width:
.widecontent {float: none;
clear: left;
width: 650px;
margin: 0;
font: normal 11px/18px arial, verdana, helvetica, sans-serif;
text-align: justify;
}
Now the images need to go in and both the text blocks and the images need a class="content":
<div class="widecontent">
<div class="content"> <img src="images/money.jpg" width="200" height="200" /></div>
<div class="content">
<h1>Second Header</h1>
<h2>Welcome</h2>
<p>text was here </p>
</div>
</div>
<div class="widecontent">
<div class="content">
<h1>More stolen content from lipsum.org</h1>
<p> text was here</p>
</div>
<div class="content"> <img src="images/money2.jpg" width="218" height="218" /></div>
</div>
The problem we have now is that the images aren't centered. We can just use inline CSS to do that, so add style="text-align: center;" to those div's (not the best method, but easy for right now).
Everything is looking good in Firefox and Opera. IE has a bit of a problem with the margins on the .content class. To fix this I just changed the margin on the .content class. This isn't ideal but it works:
.content {float: left;
width: 290px;
margin: 20px 10px 0 15px;
padding: 0;
font: normal 11px/18px arial, verdana, helvetica, sans-serif;
text-align: justify;
}
That's all I'm going to do, okay? You really need to learn some proper web design methods! The attached files are what I had after my last post. You can try to implement what I posted today - if you keep having trouble I can post my final code.
Megan
Connect with us on Facebook!
kingo'mountain posted this at 20:14 — 13th October 2006.
They have: 7 posts
Joined: Oct 2006
can you check my attachment or download privilages, i'm getting an error saying i've gone to a restricted page while trying to download an attachment, while i'm logged in ofcourse
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.