Is there a way to achieve the following design using only HTML and CSS:
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/">http://www.geocities.com/stmasi/</a><!-- m -->
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.Yeah, that can be done. Just an example.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-Kinda lost me there...
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-Originally posted by twistedsociety
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.
Sure, it's very possible. It would definitely take a bit of work, but it's certainly possible.
Originally posted by twistedsociety
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-
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)I messed around with it a bit twisted...
Didn't really go into the specific styles, but there's the general layoutHeheh, 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.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 1000Originally posted by samij586
EDIT:
Oh, cool! post 1000
Contargulations!
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!
TwistedI saw some table tags in there!
Maybe something more like this?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..
TwistedI was kinda still thinking of using a top nav bar navigation system as well....something like here...
<!-- m --><a class="postlink" href="http://www.dynamicdrive.com/dynamicindex1/topmen3/index.htm">http://www.dynamicdrive.com/dynamicinde ... /index.htm</a><!-- m -->
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..?
TwistedIf you're really into the full css layout, you should look into vladdy's menu (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/CSSNav.html">http://www.vladdy.net/Demos/CSSNav.html</a><!-- m -->). No javascript. One CSS error to make it work with craptastic IEhahaha....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...
I'll try that again...using that example.htm page..see what I can do... 
TwistedYou're headin' in the right direction - awesome!
If you have any questions or problems, post 'em!
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
TwistedYou kinda lost me there about the horizontal rule... but I got the columns thing, which is right the way you posted it.Mmm...Im sorry I keep losing u Paul..Im going to upload a screenshot and let ya see it that way once...
<!-- m --><a class="postlink" href="http://www.twisted-society.com/colshot.gif">http://www.twisted-society.com/colshot.gif</a><!-- m -->
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..
TwistedSince 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!!
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=32055">http://forums.webdeveloper.com/showthre ... adid=32055</a><!-- m -->
Twisted-*Smacks itself* Duh! Now I see what you mean. The easiest way to do that would be to just add borders to the columns.
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/">http://www.geocities.com/stmasi/</a><!-- m -->
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.Yeah, that can be done. Just an example.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-Kinda lost me there...
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-Originally posted by twistedsociety
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.
Sure, it's very possible. It would definitely take a bit of work, but it's certainly possible.
Originally posted by twistedsociety
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-
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)I messed around with it a bit twisted...
Didn't really go into the specific styles, but there's the general layoutHeheh, 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.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 1000Originally posted by samij586
EDIT:
Oh, cool! post 1000
Contargulations!
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!
TwistedI saw some table tags in there!
Maybe something more like this?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.. TwistedI was kinda still thinking of using a top nav bar navigation system as well....something like here...
<!-- m --><a class="postlink" href="http://www.dynamicdrive.com/dynamicindex1/topmen3/index.htm">http://www.dynamicdrive.com/dynamicinde ... /index.htm</a><!-- m -->
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..?
TwistedIf you're really into the full css layout, you should look into vladdy's menu (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/CSSNav.html">http://www.vladdy.net/Demos/CSSNav.html</a><!-- m -->). No javascript. One CSS error to make it work with craptastic IEhahaha....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...
I'll try that again...using that example.htm page..see what I can do... TwistedYou're headin' in the right direction - awesome!
If you have any questions or problems, post 'em!
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
TwistedYou kinda lost me there about the horizontal rule... but I got the columns thing, which is right the way you posted it.Mmm...Im sorry I keep losing u Paul..Im going to upload a screenshot and let ya see it that way once...
<!-- m --><a class="postlink" href="http://www.twisted-society.com/colshot.gif">http://www.twisted-society.com/colshot.gif</a><!-- m -->
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..
TwistedSince 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!!
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=32055">http://forums.webdeveloper.com/showthre ... adid=32055</a><!-- m -->
Twisted-*Smacks itself* Duh! Now I see what you mean. The easiest way to do that would be to just add borders to the columns.