/    Sign up×
Community /Pin to ProfileBookmark

Design with DIVs…

Copy linkTweet thisAlerts:
Apr 02.2004

Is there a way to achieve the following design using only HTML and CSS:

[url]http://www.geocities.com/stmasi/[/url]

I think it is possible using DIVs for the “sections” (yellow, green, and blue) and I know I can make the “links” (purple) by utilizing lists, but for the main body of the page (green and blue), I’m not entirely certain of how to code the DIVs.

Any ideas?

Thanx.

to post a comment
CSS

21 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_JrApr 02.2004 — Yeah, that can be done. Just an example.

[upl-file uuid=d6bfd141-2c7f-4712-8f4a-30bb3a437fe4 size=3kB]example.txt[/upl-file]
Copy linkTweet thisAlerts:
@twistedsocietyApr 05.2004 — Mmm...<wonders>..can u do that with my site hehe...? I wouldn't mind atleast trying to keep it close to what I have...but..the menulines and such might be a problem though... And of course having the spot at top for logo...shouldn't be a problem...is there a way to have it so there is a height of a 650px or % or something..in other words..each time you add more content...the page automatically adjusts to that...not having it all screwy and stuff..

Twisted-
Copy linkTweet thisAlerts:
@Paul_JrApr 06.2004 — Kinda lost me there... ?
Copy linkTweet thisAlerts:
@twistedsocietyApr 06.2004 — Mmm..I meant...I noticed you made a page layout using css and such..just by looking at the screenshot....but is there a way to do that with my site...just looking at the site instead of screenshot.. hehe...cause I wouldn't mind having the site using less tables.

From the layout u just made for the other guy after looking at the screenshot....is something like what I wouldn't mind having...but just having the nav on the left side instead of far right side.. The other thing I was saying about...was...is there away to have the page heights in % like 100% high or something...so that everytime you add more content to the page..it automatically adjusts to that...instead of having to change the page height settings each time content or text is added...? That's pretty much how mine is setup now...each time I add something say under the Site News...I just use some <br> or <br /> tags or whatever...and just keep bumping old down.....then add new entry above it..and it looks like the page is fine like should be....and I don't have to keep changing the table settings from say a height of 650px to 700px and so on and so on. I hope that explains its a little better hehe...

Twisted-
Copy linkTweet thisAlerts:
@Paul_JrApr 06.2004 — [i]Originally posted by twistedsociety [/i]

[B]Mmm..I meant...I noticed you made a page layout using css and such..just by looking at the screenshot....but is there a way to do that with my site...just looking at the site instead of screenshot.. hehe...cause I wouldn't mind having the site using less tables.[/B][/QUOTE]
Sure, it's very possible. It would definitely take a bit of work, but it's certainly possible.

[i]Originally posted by twistedsociety [/i]

[B]The other thing I was saying about...was...is there away to have the page heights in % like 100% high or something...so that everytime you add more content to the page..it automatically adjusts to that...instead of having to change the page height settings each time content or text is added...? That's pretty much how mine is setup now...each time I add something say under the Site News...I just use some <br> or <br /> tags or whatever...and just keep bumping old down.....then add new entry above it..and it looks like the page is fine like should be....and I don't have to keep changing the table settings from say a height of 650px to 700px and so on and so on. I hope that explains its a little better hehe...

Twisted- [/B][/QUOTE]
Of course. Setting the height to a percentage would be setting the height in relation to the window. So 50% would be 50% of the window height. For just extra whitespace, you could add a bunch of padding to the bottom. (This would be for a pure-CSS, or hybrid, layout not the one you currently have)
Copy linkTweet thisAlerts:
@SamApr 06.2004 — I messed around with it a bit twisted...

Didn't really go into the specific styles, but there's the general layout

[upl-file uuid=0a4c95f6-f9d6-4682-a79c-0e5f897368b6 size=2kB]twisted.zip[/upl-file]
Copy linkTweet thisAlerts:
@Paul_JrApr 06.2004 — Heheh, beat me to it, Sam. ?


Twisted, if you'd like, I could take a shot at creating a pure CSS layout that looks as close to your old one as I can get it, but I can't guarantee anything.
Copy linkTweet thisAlerts:
@SamApr 06.2004 — yeah, mines really bare, but it gets the job done. Just a note twisted, the reason I put the padding-top:90px in header was so that you could contain those top links in the same div when you get around to adding them.

EDIT:

Oh, cool! post 1000
Copy linkTweet thisAlerts:
@Paul_JrApr 06.2004 — [i]Originally posted by samij586 [/i]

[B]EDIT:

Oh, cool! post 1000 [/B][/QUOTE]
Contargulations! ?
Copy linkTweet thisAlerts:
@twistedsocietyApr 06.2004 — COOL!! U guys are great!! ? I was messing around with that example that Paul Jr made up for that other guy....and I came up with this here..but of course the nav would have to be on the other side lol...


And the other problem was the dividing the three columns...but it looks like in that setup that samij586 made...he pretty much took care of that hehe...let me know what ya think k..thanks again!

Twisted

[upl-file uuid=6cf653fa-adb3-49bd-b752-fef4d67eb3f5 size=4kB]example.txt[/upl-file]
Copy linkTweet thisAlerts:
@Paul_JrApr 06.2004 — I saw some table tags in there! :eek:

Maybe something more like this?

[upl-file uuid=877cb741-ca73-4dfb-a154-95b8b5706cd4 size=4kB]example.txt[/upl-file]
Copy linkTweet thisAlerts:
@twistedsocietyApr 06.2004 — LMAO!! Oops!...If I was earning points on making this a css based site...I think that would be -5 points each table tag I added there...hahaha.....?

Anywayz...that is basically what I'm looking for to hehe...Maybe I'll try merging the two example layouts you guys came up with once..see what I can do with it... ? Cause really I only need the index page setup like samij586 made there...the rest of the pages are going to contain more or less the content...the other thing that has me worrying is the contactme page...cause that is a script using the cgi-bin and such...mmm...I dunno....one thing at a time I suppose...once I get this index page straightened out...then I can just make the other pages just like that one...but a tad different...not needing the three columns of course..

Twisted
Copy linkTweet thisAlerts:
@twistedsocietyApr 06.2004 — I was kinda still thinking of using a top nav bar navigation system as well....something like here...

http://www.dynamicdrive.com/dynamicindex1/topmen3/index.htm

I had viewed it in IE and Mozilla....and atleast it shows up in both lmao..but in Mozilla there seems to be a transparent background for the menus.. I wouldn't need the menus to have submenus really..but do you guys think it will be better to add that then what I have added before..?

Twisted
Copy linkTweet thisAlerts:
@SamApr 06.2004 — If you're really into the full css layout, you should look into [URL=http://www.vladdy.net/Demos/CSSNav.html]vladdy's menu[/URL]. No javascript. One CSS error to make it work with craptastic IE
Copy linkTweet thisAlerts:
@twistedsocietyApr 06.2004 — hahaha....yeah....I did add that to one of my pages the other day for testing...everything seemed to work ok...except that the arrow images didn't show up when I changed the background color behind the links....I even set it to transparent...but then again that was also mixed amongst tables and such...:rolleyes: I'll try that again...using that example.htm page..see what I can do... ? ?

Twisted
Copy linkTweet thisAlerts:
@Paul_JrApr 06.2004 — You're headin' in the right direction - awesome! ?

If you have any questions or problems, post 'em! ?
Copy linkTweet thisAlerts:
@twistedsocietyApr 07.2004 — I was just wondering with Sam's layout for the cols...is there a way to make the two outter ones a pixel shorter then ya made them..? I believe it would this:

#col2,{

width:186px;

float:left;

padding:9px;

}

#col3{

width:187px;

float:left;

padding:9px;

}

#col4{

width:186px;

float:left;

padding:9px;

}

Instead of that:

#col2, #col3, #col4{

width:187px;

float:left;

padding:9px;

}

To be able to make it so there is a horizontal rule so to speak..if I made the general background color this: 1E2129 and then having the content background color being: 323742 to give it the darker rules up and down like I have at my site now...or I think I would also have to mess with the padding of them as well...thanks in advanced

Twisted
Copy linkTweet thisAlerts:
@Paul_JrApr 07.2004 — You kinda lost me there about the horizontal rule... but I got the columns thing, which is right the way you posted it.
Copy linkTweet thisAlerts:
@twistedsocietyApr 07.2004 — Mmm...Im sorry I keep losing u Paul..Im going to upload a screenshot and let ya see it that way once...

http://www.twisted-society.com/colshot.gif

Making the background color of the content table darker...and just making the cols smaller on outside...would allow that say 1 pixel gap there between cols to show the background color through it....rather then having to make a line image up and down for a content background image...I hope this explains a little better hehe..

Twisted
Copy linkTweet thisAlerts:
@twistedsocietyApr 07.2004 — Since I know your prolly going to get an email when I reply to this thread....I figured I'd add the link to the new thread I started for my site hehe. I know I prolly shouldn't have done that..but Im BAD BAD!!....needs a spanking...<ouch!> That f-ing hurt damn it!!....<starts to cry> LOL!! <kisses N hugs anyways> hahaha....damn I gotta stop lol..hell naa!!

http://forums.webdeveloper.com/showthread.php?s=&threadid=32055

Twisted-
Copy linkTweet thisAlerts:
@Paul_JrApr 07.2004 — *Smacks itself* Duh! Now I see what you mean. The easiest way to do that would be to just add borders to the columns.
×

Success!

Help @stmasi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...