|
Click to See Complete Forum and Search --> : [RESOLVED] layout problem gYnophObia 06-05-2006, 06:20 AM ok... i was wondering if its possible to make a layout that automatically changes its vertical length to fit it's content.... like a table but i want to be able to custom make everything... not have a default border... like this ->clicky (http://img162.imageshack.us/my.php?image=deeel6uw.png)<- ...any idea how to do that with just knowing html and css? ChiefNX 06-05-2006, 06:36 AM If you do your layout with 'div' tags then they're fluid anyway and completely customisable. gYnophObia 06-05-2006, 07:03 AM If you do your layout with 'div' tags then they're fluid anyway and completely customisable. eh... but uh... i know i can custom make a background image for every page... but thats too much work... here ill tell you what i thought could almost work... if i put an image at the top and create a background that repeats virtically and then at the bottom of all the content place an ending image... hmm... yeah that would work... like this ->clicky (http://img45.imageshack.us/my.php?image=ewww3mb.jpg)<- ... it seems kinda unprofressional... but is that a way to do it? or is there a better way? ChiefNX 06-05-2006, 07:52 AM That's probably what I'd do. Some people might know better ways, but I don't see what's wrong with it. gYnophObia 06-05-2006, 08:58 AM ah.. i think this might be what im looking for ->clicky<- (http://www.w3schools.com/css/tryit.asp?filename=trycss_float6) and if someone is willing... i edited that a lil bit... and i would like you to look at it... <html> <head> <style type="text/css"> div.container { background-color:red; width:500px; margin:0 auto; border:7px ridge green; line-height:150%; } div.header,div.footer { background-color:orange; padding:0.5em; color:white; clear:left; } h1.header { padding:0; margin:0; } div.left { background-color:yellow; float:left; width:160px; margin:0; padding:1em; } div.content { background-color:blue; margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3Schools.com</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349) </p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3Schools - The Largest Web Developers Site On The Net! fnf d d d d d d d dd d d d d d d d d d d d d d d d dd dd d d d d dd dd fnf d d d d d d d dd d d d d d d d d d d d d d d d dd dd d d d d dd </p></div> <div class="footer">Copyright 1999-2005 by Refsnes Data. </div> </div> </body> </html> copy and paste that into an html document and view it and youll see that if i tried to add content to the main area (the blue area) it leaves the navigation bar's (yellow part) background behind.. so my question is does anyone know how to force the yellow bg to be the same length as the blue one? in other words.. the red part showing would be covered by the yellow bg... Little Goat 06-05-2006, 05:54 PM eh... but uh... i know i can custom make a background image for every page... but thats too much work... here ill tell you what i thought could almost work... if i put an image at the top and create a background that repeats virtically and then at the bottom of all the content place an ending image... hmm... yeah that would work... like this ->clicky (http://img45.imageshack.us/my.php?image=ewww3mb.jpg)<- ... it seems kinda unprofressional... but is that a way to do it? or is there a better way? that is the best way to do it, there is no better way. it isn't unprofessional in my opinion. LG Edit: if you want to not use images, you can use this ->clicky<- (http://www.cssplay.co.uk/layouts/3cols2.html) if you cant tell, (I couldn't) it works because of the borders of the container. ray326 06-05-2006, 09:14 PM if i put an image at the top and create a background that repeats virtically and then at the bottom of all the content place an ending image.That's exactly the right way to do it. gYnophObia 06-06-2006, 01:05 AM alright thanks everyone.... one more thing..... as you can see here (http://img102.imageshack.us/my.php?image=dododo5pm.jpg) the background extends a bit farther than the pic at the bottom of the page.... know how to push up the bg a bit and hide it behind the bottom pic no matter the length of the content? .... oh heres the html i used <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="poopy.css" type="text/css" media="all" /> <title>blaaaaaaaaaarg</title> <meta name="discription" content="gYnophObia land!!!"> <meta name="keywords" content="gynophobia, incandesentneko, art, anime, manga"> </head> <body> <div class="poo"> <img src="header.png" /> vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv vv <img src="header.png" /> </div> </body> </html> and the css? ... body { background-image: url(plugguy.gif); background-position: top center; background-attachment: fixed; } div.poo { background-image: url(bod.png); width: 346px; margin: 0 auto; } gYnophObia 06-06-2006, 01:41 AM ah.. i think this might be what im looking for ->clicky<- (http://www.w3schools.com/css/tryit.asp?filename=trycss_float6) and if someone is willing... i edited that a lil bit... and i would like you to look at it... <html> <head> <style type="text/css"> div.container { background-color:red; width:500px; margin:0 auto; border:7px ridge green; line-height:150%; } div.header,div.footer { background-color:orange; padding:0.5em; color:white; clear:left; } h1.header { padding:0; margin:0; } div.left { background-color:yellow; float:left; width:160px; margin:0; padding:1em; } div.content { background-color:blue; margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3Schools.com</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349) </p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3Schools - The Largest Web Developers Site On The Net! fnf d d d d d d d dd d d d d d d d d d d d d d d d dd dd d d d d dd dd fnf d d d d d d d dd d d d d d d d d d d d d d d d dd dd d d d d dd </p></div> <div class="footer">Copyright 1999-2005 by Refsnes Data. </div> </div> </body> </html> copy and paste that into an html document and view it and youll see that if i tried to add content to the main area (the blue area) it leaves the navigation bar's (yellow part) background behind.. so my question is does anyone know how to force the yellow bg to be the same length as the blue one? in other words.. the red part showing would be covered by the yellow bg... oh and also... if anyone looked at this html document up there that has the yellow bg that doesnt go all the way down... i added padding-bottom: to the yellow area and i could make the bg of it come down if i put 20% or something... so im pretty close... know what i can add to padding-bottom: blah?; to make it always automatically adjust the height to cover the red area? Little Goat 06-06-2006, 09:22 AM about the backgound below the image, take the image out of the div and see if that fixes it. ray326 06-06-2006, 01:06 PM Most of the time you'll want to set display:block on images that are used in that manner. gYnophObia 06-06-2006, 05:18 PM wow.. thanks guys.. yeah i put it on the outside of the div but inside a new div that way i can use margin:0 auto; and center it on the whole page.. then i used display:block to help cover the bg... thanks for putting up with me ^ ^; ... but ive run into yet another problem... if you look here >click< (http://img456.imageshack.us/my.php?image=7779qx.jpg) you can see the text goes all the way to the left and right edges... well i tried playing with the margin and padding tag but the padding tag just pushes out the bg and the margin tag just moves the whole thing away from the edges of the whole screen... what i want to do is push the text inward, not the div outward... it works with tables, if i use padding... but apparently not with div tags..... any ideas? also... cough < < ... *still doesnt know how to make the red side part cover the yellow bg of the biggest div without having to add content.. wants the bg of the the red part to go all the way down which means being independent of the amount of content in the red area....* Little Goat 06-06-2006, 05:56 PM about the yellow, try the link I gave you earlier. some people call this "the holy grail" of CSS. :) gYnophObia 06-06-2006, 08:13 PM about the yellow, try the link I gave you earlier. some people call this "the holy grail" of CSS. :) yeah i looked at that... looks like it could be what im looking for but... its kinda too complicated... i see to many things that i dont know waht are used for such as * and # ... and right now im trying to absorb too many things that i dont understand completely yet.. such as "float" and "display: block" and "0 auto;".. ill have to play with these ones first and fully understand them... then ill try to move onto what i dont know so i guess for right now concerning the yellow bg, i can just make the color red instead of yellow to make it appear as though the red extends all the way down... so im still stuck on pushing the text inward with div instead of pushing the border of div outward... any suggestions? ray326 06-06-2006, 09:17 PM Are there any spaces in that text. Always use lorem ipsum to represent "normal" text so you're working more with reality. gYnophObia 06-07-2006, 01:34 AM Are there any spaces in that text. Always use lorem ipsum to represent "normal" text so you're working more with reality. eh.. so lorem ipsum is just gibberish used to represent words? ... well i tried using it and padding but as you can see here (http://img101.imageshack.us/my.php?image=blarg3yx.jpg) it still didnt work... this is the stuff i used in the css document div.poo { background-image: url(bod.png); width: 346px; padding-left:30px; padding-right:30px; } but it pushes out the background... i want the text to be pushed inward which would cause the div to increase vertically since i gave it a specific width right? well anyways.. thats why im trying to accomplish... any one know how to accomplish this? gYnophObia 06-07-2006, 06:57 PM this seems like it would have a simple solution... no one knows how? ray326 06-07-2006, 11:00 PM Ok, I just pasted your last complete code in and it works without any of the trouble you show in your pics. It worked fine with additional text and the left side was ok as long as the container background was yellow. So the next step is "got link?" gYnophObia 06-08-2006, 12:54 AM ok... heres teh page clicky (http://www.freewebs.com/gynophobia/) ... and here is the css body { background-image: url(plugguy.gif); background-position: top center; background-attachment: fixed; } div.plah { margin: 0 auto; margin-top:50px; margin-bottom:50px; width:496px; background-color:orange; } div.poo { background-image: url(bod.png); width: 346px; } div.pee { background-color:red; width: 150px; float:right; } img.dood { display:block } as you can see i didnt add anything yet... but if i add this to the css sheetdiv.poo { background-image: url(bod.png); width: 346px; padding:20px; } then it looks like this (http://img47.imageshack.us/my.php?image=dddd2hp.jpg) and what i want is the purple bg part to be normal and the text to be pushed in... the padding workds when used with a table i believe... but when using divs it seems to push them out instead of the text in... so how do i push the text inward? ray326 06-08-2006, 01:14 PM What you want is roughly. div.poo { background-image: url(bod.png); width: 285px; padding:0 30px } gYnophObia 06-08-2006, 05:39 PM What you want is roughly. div.poo { background-image: url(bod.png); width: 285px; padding:0 30px } ah yeah.. your right.. because i just got it before i read your post... if i give a width to the div.. say width:45px; but i add padding:30px, the padding doesnt change the width.. because the text is the width... the padding will indeed push the div out... but then you have to resize the text to a smaller width... seems like there still needs to be improvements in this css stuff :( .... and also in order to move divs around in a container div, you have to float or push stuff away from the margins in order to place them where you want... instead of being able to have a second div just appear to the right of a first div... i mean.. if we have two divs, the second goes automatically under the other... well css should have a simple code to automatically make it go to the right instead... not sticking to the right margin of the screen.. but sticking to the right side of the first div... eh im just babbling.... anyways thanks guys... youve been of great help! :D i appreciate you taking the time to reply to this annoying newbie ^ ^; especially you ray326.. thanks much! ray326 06-09-2006, 12:48 AM well css should have a simple code to automatically make it go to the right instead.float:left is pretty simple. webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved. |
|