Right.. i have an outside div.. with a div inside it.. they both have a fixed height. I want to know is it possible to make the both of them expand when one of them does? Any help would be greatly appreciated..
http://fxdesigns.bs-webhost.co.uk/javiersworld Im doing it for someone.. luk at the black div in the background.. then luk at the white one inside it.. How could i get it so the white one is still smaller inside it?
I'm not 100% sure what you are asking... given that one should be wrapping the other, they should both expand/shrink at the same time, unless you did something silly like specifying an exact height in your css. If you don't mind, I'm going to go through your code on the assumption you want that area to shrink instead of be fixed height... I'll be recoding from scratch as I go here... let's see... first let's reformat the code so it's not indented all willy-nilly... strip the classitus on the menu, change the menu to a list... lose those nonsensical paragraphs around the anchors (Is that a paragraph? NO IT IS NOT!), strip the nonsensical comments (Main content goes here? Like I couldn't figure that out with '<div id="content">')... Wait, you're TEN??? Damn boy, for all the stuff I've just commented on, you've STILL got better code here than 90% of the people with DEGREES in computer sciences. Ok, time to show you semantic markup... You need to mark things as what they are - that logo? That's likely your first 'header' - like the title of a book that appears on the left top corner of every other page of a novel, so let's make that a H1 with text inside it, then put the image over the text... the 'main content area' text kind of looks like a header, so we'll use a header tag... I guess that would be a h2... 'about me' is a header, so that's our H3... You've got two paragraphs, a standout and a closing, that's two paragraphs and two DIV's. Since the top and bottom of the black area would always be after the menu and before the footer respectively, we can attach their images to those elements rather than using extra code on that - then by putting a single div at the top and bottom for the white area borders we chop the code back a bit. The menu is a list so set the LI to display:inline to keep IE happy, set the anchors to inline-block with some padding and FAC and we're good to go there... I upped the colors to the 50% luminance threshold as the dark blue on black was nigh invisible. You've got fonts so small I cannot read them on my computer - and they are all fixed metric. Let's bump all content area fonts to %/em so they are dynamic and scaleable - some fonts will have to stay px because they interact with images, but we'll bump the sized on those a notch too. A number of images are stored in .jpg that really should be .gif or .png. A good rule of thumb is if it's monochomatic (shades of two colors) a 16 color .gif is usually good, and if you want color matching to 'normal' colors in IE, .gif is the way to go. PNG is good for images that need more than 16 colors that are lineart - .jpg really should be reserved for pictures since it's a 'lossy' format and can cause 'artifacting' - you can see this the most on your bg.jpg where the artifacting is causing 'striping' across the page that I'm assuming was unintentional? I redid that gradient real quick and saved that as a .gif. The logo also needed cleaning up, and that too made a good gif. Your various borders can be combined into a single .gif - we can show the part we want by just sliding the background around. This has the advantage of fewer files - meaning less 'handshakes' to the server hosting the page - and sharing a palette which lets us cut the total filesize for all four 'borders' to a mere 480 bytes. So, here's how I'd code that - I'm assuming that both the white and black borders shrinking to the height of the content is what you wanted, ja? http://battletech.hopto.org/for_others/FXDesigns/template.html As with all my examples, the directory: http://battletech.hopto.org/for_others/FXDesigns is unlocked so you can grab the gooey bits. Validates XHTML 1.0 Strict, CSS would validate if not for IE and FF workarounds, tested working in IE 6 & 7, FF, Opera and Safari. If that's not what you were looking to do, could you explain it again?
I've got a question-- I see that his <a>'s belong in a list and not <p> tags but what would you put on standalone <a>s within page text that need a block element around them? Like, <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> <p><a href="#">bijvoorbeeld linkie klikie hier</a><p> <p>more blah blah blah blah blah blah blah blah blah blah blah</p> Code (markup): That's not a paragraph either, but if it's seperate from the real paragraphs (doesn't belong within them), which block element is better? One would rather not wrap in something inline or leave bare and then set display: block with margins etc right?
Thank you so much.. I am NOT 10.. i repeat I am NOT 10.. I am doing this for someone else, he designed it and all, i just coded it for him. I am 13 .. I think the gradient was meant to go like that, i think he likes it lol. Also, what exactly I was wanting to get, is the div's to be a certain height before they get expanded. Thank you for your help.
wow you are a good coder for 13 l glad to hear you got this sorted now sorry i have been busy myself and keep up your good work you doing very well
I didn't exactly get it sorted, im trying to get the white div to be a certain height before they expand.
no. I want both boxes to stay the same height that they are now until there gets enough content that they expand.
In other words, you want min-height... IE 6/earlier lacks min-height but treats height as such, so that's fairly easy. In my version that would be changing .boxContent to read: .boxContent { padding:0 1em; min-height:480px; border:solid #000; border-width:0 32px; background:#FFF; } * html .boxContent { height:480px; /* IE 6/earlier treats height as min-height */ } Code (markup): I just uploaded CSS to reflect that change. (set that 480px in BOTH to however high you want it) if the content is shorter than 480px, it will render that tall - if the content is taller than that, it will grow to fit. Though at that point I'd be looking at a 100% min-height model layout so that it auto-fits to any resolution display.
Ah. Uh. You want a min-height on the box, even if it's empty. Then you want content to expand. Hmmm... this can be done with min-height in your css, but IE6 is stupid here. Most people do two things: they either set min-height for the browsers who understand it, and a hidden height for IE6 (IE6 thinks height means min-height). The other method is using an extra container and one is styled for IE6 and the other for everyone else. #contentsurround{ width: 570px; height: 475px; margin: 0 0 0 0; padding: 0; background: #000000 url(../images/surroundbottom.jpg) no-repeat bottom; } Code (markup): What you've done there is stated explicitly that the height is 475. It will not grow larger for content, because you said it's only so-high... (except in IE6 cause it's stupid like I said). You also appear to be using their heights and widths so that the black surrounds the white. That would likely be done with padding on the contentsurround. http://stommepoes.nl/Tests/minheight.html Copy this, and add more "blah" to the <p>. The way it is now, the white area is a set height even though there's not much "blah" but if you add more "blah" the white and black box will grow. The black box has NO SET HEIGHT, just padding inside to keep 20px-worth of space between the white part and the black part. The white part is the part with the height settings.