Results 1 to 9 of 9
Thread: Need help with a pure div design
-
12-18-2006, 01:21 PM #1Aspiring Evangelist
- Join Date
- Apr 2004
- Posts
- 360
Need help with a pure div design
Example of design: http://www.eyesoute.com/new/
New div version: http://www.eyesoute.com/new/index2.php
I decided to move one of the sites I posted for review to an all div design to see how I like it, but I'm having some troubles.... I can't seem to get the entire design to stretch 100% width/height, and not have extra space at bottom from the divs stacking on each other.
I would also like to know the best way to get a little watermark (Shown on both pages), to stay in that area, below the text but still in sight... I plan on having the div with content in it, have a background image, so that means I can't just put a background: bottom right, in the content div... Right? Or can divs have more then one background (That would be oh so nice)
Note: You must view the second site in IE right now, for some reason it does not work outside of IE (Another problem I need help with )
Thanks in advanced... I'm not really new to divs, but I am new to making pure div designs.
-
12-18-2006, 01:23 PM #2WHT Addict
- Join Date
- Sep 2004
- Location
- Vancouver, BC Canada
- Posts
- 122
The second page doesnt load all the way. It just shows me the header image.
I'm using Firefox.SharkBait
Web Dev: php, MySQL, HTML, XHTML, JS, CSS
www.DyanmicShark.com - Coming Soon!
My Blog:www.tyleringram.com
-
12-18-2006, 01:27 PM #3Aspiring Evangelist
- Join Date
- Apr 2004
- Posts
- 360
Originally Posted by SharkBait
-
12-18-2006, 01:53 PM #4WHT Addict
- Join Date
- Sep 2004
- Location
- Vancouver, BC Canada
- Posts
- 122
Oops I missed that line some how sorry
SharkBait
Web Dev: php, MySQL, HTML, XHTML, JS, CSS
www.DyanmicShark.com - Coming Soon!
My Blog:www.tyleringram.com
-
12-18-2006, 03:45 PM #5Aspiring Evangelist
- Join Date
- Apr 2004
- Posts
- 360
Err... Well do you have any advice?
-
12-18-2006, 03:57 PM #6Web Hosting Evangelist
- Join Date
- Apr 2005
- Posts
- 503
First, if you must use Xhtml, you have to end the <link> tag with a proper closing />. This is also true of the img tag.
Second, you shouldn't be previewing in IE. IE is old, buggy and non-standard. Do your initial tests in Firefox. Then adjust for IEs quirks and bugs.
Validate your html and css early and often and you would have caught the two errors mentioned above.
No, you cannot have more than one background image.
Without any content, the divs will not expand just because you add 100% to the height or width. In addition, you have to think "100% of what?". Each parent needs a spec to relate to.IE7 is nine years behind the standards or wrong.
But it works in IE!
"IE is a cancer on the web" -- Paul Thurott
"Avoid hacker-bait apps like Internet Explorer" -- Kevin Mitnick
-
12-19-2006, 10:44 PM #7Aspiring Evangelist
- Join Date
- Apr 2004
- Posts
- 360
Well after about an hour and a half of working with a friend of mine, I got it to work... In a way
www.eyesoute.com/new/index2.php
As you can see, a new problem has arisen... When content goes over the 100% mark, the divs don't stretch with it. Now this is obviously because I'm using position absolute on the content... However, it is the ONLY thing that has worked for me....
Any suggestions?
-
12-20-2006, 01:57 AM #8Web Hosting Guru
- Join Date
- May 2006
- Location
- Teh Interweb
- Posts
- 314
You would be WAY better off to put all your styling in your css file instead of inline and external. This would make it amazingly easier to troubleshoot. Also, tags like <font> and <b> should be in your css file as well. I like the idea that you are going on and the color scheme looks nice but the code is almost impossible to follow. Try to seperate your element styling and your xhtml and then let us take another look.
[theBleeber@wht01] ~ $ cat .signature
cat: .signature: No such file or directory
-
12-20-2006, 02:50 AM #9WHT Addict
- Join Date
- Sep 2004
- Location
- singapore
- Posts
- 126
Follow this format
<div id="LogoBackground"><img src="logo" /></div>
<div id="leftsidebar" style:float:left;>content</div>
<div id="rightsidebar style="float:right; background image bottom right">content</div>
<div id="footer" style="clear:both;"> </div>
Your divisions are closed at wrong sections. Google more on two column layouts