Hi all I was wondering if you could help me with the solution to a text alignment problem I'm having, basically Iv created the header and footer of my practice page and now Iv tried to add content and its kinda went mad, basically I want to have a 2 column layout with images running down the left of the page under the 'Welcome to my site' image then text etc on the right(main) section of the page but as you can see Iv added the text and there seems to be a great gap interfering with the flow of content. I would be grateful if anyone could advise me were I am going wrong or of any reading I can do to achieve my goals. http://www.glen-lodge.co.uk/mytester.html Many thanks Kyle
Hmmm, I'd need to know how it's supposed to look to really help, but here are some tips: before digging into CSS bugs, make sure your HTML is valid. CSS is unpredictable with invalid code. (you forgot to close your closing list elements in the footer > ) As general HTML advice, you are using way too many divs and using images to convery information. All content should be some for of text, and images should be placed over text if decoration is necessary. Images are like Javascript-- they make a page nice if not overdone, but never let them get in the way of content. Since this is a test page, I'll stop there. I noticed you have a banner-wrap div? And inside you have stuff floated. And what you have are unclosed floats. What happens in most browsers, according to the specs, is when a box has floated children, they pop out. The div parent collapses. Your banner-wrap div is like a few pixels tall, actually. It's not growing to enclose the floats, except in IE6 or any IE set in quirks mode. IE6 is doing it wrong, btw. Gary Turner has a page about enclosing floats, just google the phrase. (you have a proper doctype and thus no quirksmode, so IE7 should be displaying the same as FF for the most part.) In general, for a column of floated thingies on the left side, you would have a box (a div) containing the images you want with a width set to the widest image, and floated left. The images inside (sitting alone, they don't need to be wrapped in divs) can be set to display: block and they'll stack right on top of each other, within that floated div. Your text would wrap around the left-floated div who is holding the images, and your footer would, again, need to clear that float. I can't really see what exactly the page is supposed to look like to go any further, though.
Hi Guys, Thanks so much for taking the time to look at my work, I realise I have a long way to go in the world of css and html and I appreciate your input, here is a jpg of my proposed design http://fc03.deviantart.com/fs32/i/2008/233/9/a/test_template_by_kyllle.jpg and I appreciate anymore advise you can give or any help at all!!! Thanks again guys!! Kyle
Ahhhhh ok... what you want might be kinda complicated, but I like the look. Looks like a magazine spread. Questions: Is the grey-black blockie part a single image, a bunch of images, or what? Because this determines if the welcome-to-mysite can fake the cover-over by really being part of the grey-black block image, or if it really does need to be sitting over the top like that. Same goes for the Hey! image. If the grey-black block is an image and can fake the other two, that's easier, but if you actually need the Hey! and wel-come to truly sit over the grey-black block, that does give you the flexibility of changing the image of the grey-black (and if grey-black isn't an image holder but is actually supposed to be grey ad black blocks, they could just be divs with that background colour). The answer to this question will pretty much determine how you'd write this. It's not the easiest of designs you've chosen. One of the techniques I'm thinking of already is the negative-margin-wrap thing just because it's good for sitting over other things: http://battletech.hopto.org/html_tutorials/3coldiv/template.html If you don't set stuff so precisely as he does, you'll see that both the left and right columns there are actually sitting over the spaces on the sides he created with the margins. You don't actually need the margins, they just give visual space-- the columns can sit right over the text if you let it. But that's the complicated way-- another possibility would be setting those left things in a block called "sidebar" and floating it left, then pulling it up with negative top margins. This can make the footer tricky. Also know that when you're making a jpg, you have a set canvas. Real web pages are viewed on different screens, different browsers, different font sizes, different resolutions and dpi's. Your page won't look exactly like that on the web-- you'll hear this all the time: "The Web is Not Print!" meaning, the user can f*ck with your design by having a monitor taller than your design, for instance. So your actual code will be more flexible than your image, just so you know. Images themselves, in the web page, will not change (unless scaled by zoom or MAGic) but the text can and will change on you.
Hi again and thanks for such a speedy response!!! basically I want the 'welcome to my site' to be an individual image that will also be a link so want it seperate from the actual banner, the same goes for the hey which I know makes things trickier :s I realise that a 2 column layout needs to be put in place so to float the left column info and then have the main content on teh right, I feel i shall be able to achieve this but how will i be able to move the right content up slighly towards the banner so there wont be a great deal of white space?? Thanks again!!
So what's the grey-black going to be? Or is it going to stay grey-black? I could try to make a loose demo of this, to let you look at the code and have a look at it. The Hey! might end up being absolutley positioned in this case-- either relative to the sidebar (meaning it would actually be IN the sidebar, code-wise) or relative to the wrapper (I'd prolly make a wrapper around the left-floated sidebar and the restofthetext on the right). Though if Hey! was going to be a link, it could still be an "image" on part of the grey-black, as a trick. Depending. Is Hey! also a link? In general, the welcome could just be part of a floated sidebar, and then pulled up with a negative top margin (a better solution than the relative positioning you see on sites). If grey-black or anything above it doesn't always have the same height thouhg it could be a problem. In general, I'm thinking that instead of three HTML images for grey-black, I'd have a single css background (of a box)-- unless those are going to be three separate, changing images. But the general idea actuallt is that images are not real content (most of the time) and they belong in the background as much as possible. Yes, even links : ) The cool thing about CSS backgrounds is that if you have a multi-page site, and you want to change the background on all pages at once, instead of opening every HTML file you have, you just make a single change in your CSS file. See my working-draft page for my company (who knows when they'll get back to it) and in the CSS you'll see the sleeping dog reference-- and there are about 8 other images made for that size ready to be swapped out whenever the boss wants. There's a photo of a windmill during last winter's short freeze that's also very beautiful-- the dog is just my current default. And I can change him with a single file because he's a background. What is your coding level? What do you already know about HTML and CSS?
Hi again, well my coding level is very basic but I am trying very hard to get my head around the powers of css in order to develop my skills and hopefully start creating some nice well presented websites!! it would be great if you could show me some techniques in relation to the design I have created as I feel I just need to see someone elses approach to this task in order to fully understand the practise of what css and html goes were in to get the job done to the best of my ability. as far as the 'hey' it probably would be an image link but if you feel this can be acheived a better way then your advise is very welcome! Thanks again for your time!! Kyle
K I'll see what sort of demo I come up with, and then you'll go from there, okay. I'll post it here, unless some disaster happens at work and I need to focus on other things (I'm learning Javascript, and need breaks form it from time to time, but otherwise work here is very s l o w... I'll try to use the sizes and the fake-images you have on your HTML page.
OKay, here's what I've got: http://stommepoes.nl/Kyle/practice.html practice.css It's not exactly the same as yours, AND a major stipulation-- you have a LOT of links. It seems the original plan was to make the three squares of grey-black to be links as well. This *can* be done, but you'd have to limit the sizes, and be wery wery careful due to that sidebar being pulled up, becuase you do NOT want links covering links, or any boxes covering links. When you see people on these forums saying HELP! I can't click my links!, that's people who've covered their links with something. Not even an image can sit exactly over an image and keep it clickable, except with something like Gilder-Levin image replacement (there are people who set transparent images over normal images and links just to stop right-click copying). First, I'd like to show you your images: I took arrow.jpg (which is 437bytes) and indexed it (limited the # of colours) and made it a gif. Looks the same, but now is 130 bytes. Also did this with the home, even though it's not separated in my version: home.jpg : 577bytes home.gif : 155bytes even the fancy menu I made is a gif and not a bad size. If it were a jpg, it'd be larger than necessary and have the possibility of jpg artifacts showing (which occur every time you open the file in an editing program and gets worse every time). For things like photographs or many many colours, jpg's are better than lossless things like gifs and png's, but for those cases I often save a png version on my home machine to keep the quality, and use the jpg on the website. menu.gif is 17kb... likely if deathshadow or some image optimisation person made it, it'd be smaller but oh well. I think I made it a bit too big, but it's just a demo. Apologies for the gay font, again it shows the reason for doing it at all-- this is URW Chancery L italic which I think almost nobody has (maybe some UNIX people)-- you only use images for links when you need some fancy font nobody else has. Now you can guarentee almost everyone will see the goofy font. So! The beginning, html (my comments added in bold: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[b]strict doctypes rule[/b] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Practice makes</title> <!--meta name="generator" content="EditPlus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""--> <meta http-equiv="Content-Type" content="text/html; charset=utf=8" />[b]sorry my server is set to utf-8 so I had to save this page as utf-8... keep yours if you want, so long as they match the server you're hosted on[/b] <link rel="shortcut icon" href="images/favicon.gif" /> <link rel="stylesheet" type="text/css" href="practice.css" />[b]external stylesheet[/b] </head> <body> <div id="top">[b]decided to group the page in four chunks... wouldn't need this if I hadn't added the skip link : ) [/b] <a class="skip" href="#main">skip to content</a>[b]skip links rock-- esp when you start with tons of links and navigation, this helps the blind, teh googlies, and keyboarders skip past all the normal page bs[/b] <ul id="nav"> <li><a class="h" href="#">HOME<span></span></a></li> <li><a class="a" href="#">ABOUT<span></span></a></li> <li><a class="p" href="#">PRODUCTS<span></span></a></li> <li><a class="g" href="#">GALLERY<span></span></a></li> <li><a class="o" href="#">OTHERS<span></span></a></li> <li><a class="e" href="#">EXTRAS<span></span></a></li> <li><a class="c" href="#">CONTACT<span></span></a></li> </ul> [b]what was that? A complicated technique I first saw deathshadow do... it's neat-o, but you don't HAVE to use it. Will explain more in the post.[/b] </div> <div id="header"> <ul id="right_nav"> <li><a class="current" href="#">Links</a>|</li>[b]I assumed the arrow would move depending on the page people were on, so used this "current" class-- if that's not the case, then change the class name to something more appropriate[/b] <li><a href="#">Links</a>|</li> <li><a href="#">Links</a>|</li> <li><a href="#">Small Links</a></li> </ul> </div> <div id="wrapper"> <div id="sidebar"> [b]this is assuming no image... if there was an image, this would likely be done like p.welcome[/b] <a id="hey" title="link to 'heyit"sme'" href="#">HEYIT'SME</a> <p class="welcome">Welcom to my site!!!!<a title="link to some other part of the site" href="#"> </a></p>[b]and here's the text available to everyone even if they have images turned off for faster web surfing[/b] <h2>Left Column Text</h2>[b]headers rock![/b] <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <img src="#" width="215" height="100" alt="This is an image that I want to display in a left column" />[b]again, this might not really want to be an image, but that depends on what it's an image of. If it's really an HTML image, it needs awesome alt text.[/b] </div> <div id="main"> <h1>Heading of main content</h1> <p class="subheading">with a little sub heading</p> <p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis justo ante, bibendum sit amet, egestas quis, placerat sed, neque. Integer facilisis leo non augue. Proin vehicula. Nulla nisi.</span></p> <p>Nam sit amet dui ac justo ullamcorper mollis. Nam nec ipsum. Pellentesque ut lacus eget pede sodales aliquam. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vestibulum dolor in metus. Ut condimentum, justo id congue pharetra, quam arcu vehicula felis, id malesuada ipsum risus in felis. Etiam tincidunt. Vestibulum dapibus adipiscing lectus. Sed eu velit. Vestibulum fermentum fringilla leo. Nam fermentum lacinia libero. Sed semper tincidunt turpis. In libero. Proin pretium nunc vitae velit. Maecenas auctor iaculis neque.</p> <p>Nam neque. In non purus sed nisi dictum aliquet. Proin gravida, nisl sit amet gravida sodales, massa est blandit ante, sit amet vestibulum purus eros eget nunc. Integer odio purus, hendrerit sodales, imperdiet vel, convallis ac, leo. Maecenas malesuada. Curabitur in velit a nulla pretium vulputate. Nulla tempus egestas sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit ipsum eu tellus. Maecenas luctus porttitor lectus. Donec viverra, nulla at blandit tempor, lectus odio vehicula justo, ac facilisis enim enim non sem. Praesent feugiat. Aliquam sodales adipiscing lacus. Integer leo. Phasellus sit amet risus. Nullam mollis, orci id congue consequat, felis diam feugiat magna, non dictum sem dui vel sapien. Aliquam et eros. Sed auctor neque luctus pede. Etiam blandit sapien non velit molestie pharetra.</p> <!--main--></div>[b]ds tells everyone to keep comments [i]inside[/i] the closing tags-- I'm not floating main or wrapper but it's a good habit to get into because between floated things, these comments can wreck havoc in IE : ( [/b] <!--wrapper--></div> <div id="footer"> <ul> <li><a href="#">Footer</a> |</li ><li><a href="#">Footer</a> |</li ><li><a href="#">Footer</a> |</li ><li><a href="#">Footer</a></li> </ul>[b]because you've got that pipe inside the floated li's, and you'd forgotten your closing > anyway, I did it ds-style here. I don't normally do this, but then I don't normally float my li's. If the pipe were an image, I'd set the li's to display: inline (or whatever for IE7) and float the a's instead, giving them the image.[/b] </div> </body> </html> Code (markup): Instead of all those divs, I tried to use the elements that made the most sense. There will only be one h1 per page, and it should be I think the Main Header Content thingie, because that will be the true title of each page, and will be different per page like it should be (teh googlies index each page alone, not whole sites). Grey-black box is made into a single image, set in the background. If you wanted them to be yet even more links (my god man, how big is this site going to be???) then I'd make some absolutely positioned a's and set the size equal to the blocks MINUS where something else covers the block. But that's not generally accessible and thus not a great idea, but I've gotten away with it when I had a list and needed clickable "background" images. Otherwise, if there's going to be actual content there, this set-up may break, because of the sidebar being pulled up over the grey-black box like that, and HEY! being an absolutely positioned child of #sidebar. CSS /*practise.css */ [b]this is my universal reset... I don't use your border: 0 here because only one thing gets borders by default: images[/b] * { margin:0; padding:0; } [b]if there are any forms except login/password or search forms, I do not set padding on * to 0. I use a bigger reset to exclude some form controls because they need to keep their default padding for some obscure accessibility reason I'm not 100% on...[/b] img { border: 0; } ul, li { list-style: none; }[b]This is because all your lists were menus.. if you later need your bullets back, you need to #nameoflist, #nameoflist li { display: list-item; list-style: whatever; } [/b] body{ background-color: #fff; font-family: helvetica, arial, sans-serif; [b]since you seem artsy, I'm surprised you wanted to set a global font-family like this... but it's ok... the inherit stuff you had was kinda useless though, as there's only one parent of body, "html", which has no fonts set anyway... anything with "inherit" is generally useless, because if you need to say that then you might as well use the line to say the actual property you need, or you're just wasting code[/b] } #top { height: 50px; [b]I only used height because I'm using an image for the menu... if I wasn't, this would be at LEAST [/b]min[b]-height: 50px or set in em's even[/b] background-color: #000; overflow: hidden; /*catches skip link from spilling out onto the page with text-enlarge*/ } a.skip { float: left; width: 65px; color: #000;[b]google's ok with this kind of link-hiding, cause it shows on :hover and :focus, and is for accessibility reasons not spamming reasons[/b] } a.skip:focus, a.skip:hover, a.skip:active { color: #fff; } #nav { width: 865px;[b]width of the image[/b] height: 50px;[b]height of the image[/b] margin: 0 auto;[b]doesn't perfectly center because of the skip link sitting on the left... oh well[/b] overflow: hidden;[b]again, stops text from leaking out from under the image upon text-enlarge--overflow: hidden hides overflow (who'd a thunk?) but only when you've set dimensions like we have... otherwise, it also wraps floats like you were using it for (also fine)[/b] #nav li { display: inline;[b]something to pacify IE7[/b] } #nav a { float: left; height: 50px;[b]height of the image[/b] text-align: center; color: #fff;[b]set a colour for those without images[/b] position: relative;[b]sets a reference for the spans[/b] } /*IE trigger*/ #nav li a:hover, #nav li a:active { visibility: visible;/*it doesn't really matter what you say, so I picked something that cannot change appearance*/ } [b]this is pretty cool... you can even have three states instead of two if you want![/b] /*begin sprites-n-doors trick: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites */ #nav a span { position: absolute; height: 50px; top: 0; left: 0; background: url(menu.gif) 0 -50px no-repeat;[b]here's the image... each span will show a piece of it, and will slide its position around upon mousehover or focus[/b] } #nav .h, #nav .h span { width: 123px; [b]unfortunately, you need a class or id on each anchor in the HTML, and set an individual width on each span[/b] background-position: 0 -50px; [b]default image position[/b] } #nav .h:focus span, #nav .h:hover span, #nav .h:active span { background-position: 0 -1px;[b]position moves on mouse/kbd event[/b] } [b]next element, en so-on[/b] #nav .a, #nav .a span { width: 108px; background-position: -123px -50px; } #nav .a:focus span, #nav .a:hover span, #nav .a:active span { background-position: -123px -1px; } #nav .p, #nav .p span { width: 147px; background-position: -231px -50px; } #nav .p:focus span, #nav .p:hover span, #nav .p:active span { background-position: -231px -1px; } #nav .g, #nav .g span { width: 122px; background-position: -380px -50px; } #nav .g:focus span, #nav .g:hover span, #nav .g:active span { background-position: -380px -1px; } #nav .o, #nav .o span { width: 113px; background-position: -502px -50px; } #nav .o:focus span, #nav .o:hover span, #nav .o:active span { background-position: -502px -1px; } #nav .e, #nav .e span { width: 116px; background-position: -616px -50px; } #nav .e:focus span, #nav .e:hover span, #nav .e:active span { background-position: -616px -1px; } #nav .c, #nav .c span { width: 133px; background-position: -735px -50px; } #nav .c:focus span, #nav .c:hover span, #nav .c:active span { background-position: -735px -1px; } #header, #wrapper { width: 943px; margin: 5px auto 0; } #header { min-height: 313px;[b]to keep the background images showing, otherwise this isn't needed if there were actual content in place of the grey-black box[/b] background: url(tempheaderbg.gif) 0 0 no-repeat; } * html #header {height: 313px;}[b]IE6 has issues[/b] #right_nav { float: right; padding-left: 2em; background-color: #fff; } #right_nav li { float: left; font-size: .7em; [b]set fonts here for that pipe | [/b] line-height: .9em; } [b]footer links were the same and I was too lazy to repeat the code, so added it here, which is ok[/b] #right_nav li a, #footer li a { text-align: center; text-decoration: none; color: #000; font: 1.1em/1.2em "courier new", courier, monospace;/*monospace and arial make no sense*/ [b]here you had two monospace fonts, courier and courier new, and then a sans-serif font, arial, and no backup (for those without any of those fonts). I decided you expected to see monospace like courier and set it accordingly. Try not to mix major families: serif, sans-serif, monospace[/b] text-transform: uppercase; padding: 0 10px; } #right_nav a.current { padding-right: 25px;[b]make room for the arrow[/b] background: url(arrow.gif) 85% center no-repeat;[b]85% may need to change depending on the width of the real text here... kinda delicate[/b] } [b]let keyboarders and others know which link they're on[/b] #right_nav a:focus, #right_nav a:hover, #footer a:focus, #footer a:hover { text-decoration: underline; } #wrapper { margin-bottom: 1em;[b]I set margin-bottom on things containing floats, since in modern browsers if I tried margin-top on #footer instead, the margin may try to slide behind the #wrapper and not be seen (except in IE who does it wrong)[/b] } #sidebar { float: left; width: 215px; margin-left: 20px; margin-top: -120px;[b]if you have actual text content above this instead of background images on grey-black box, you might want to make this a flexible unti instead...[/b] position: relative;[b]for #hey's positioning[/b] display: inline; /*IE6 double margin bug*/ } #hey { position: absolute; left: 260px; top: 50px; /*everything hereafter is text styling only*/ background-color: #f3ebd8; color: #a1a1a3; padding: 0 2px; text-decoration: none; font: bold 1.5em/1em impact, sans-serif; } [b]more Gilder-Levin image replacement[/b] #sidebar p.welcome { width: 215px; height: 175px; margin-bottom: 1em; color: #0f0; /*just to make it stand out with or without the grey-black box and no boxed.jpg*/ position: relative;[b]reference for the a[/b] } p.welcome a { position: absolute; height: 100%;[b]100% of parent, the p[/b] width: 100%; top: 0; left: 0; background: url(boxed.jpg) 0 0 no-repeat; } #sidebar h2 { font-size: 1em; padding: 0 5px; margin: .5em 0; } #sidebar p { font-size: .8em; margin-bottom: 1em; text-align: justify; /*never use this if you actually want people to read what you write! for styling only!!!*/[b]seriouzly, don't use it[/b] } /*only to show the non-existant image's place*/ #sidebar img { display: block; border: 1px solid #ed008c; height: 100px; width: 213px; } #main { margin: 20px 0 0 255px;/*width of sidebar plus sidebar's left margin plus the spacing we want*/ } [b]here I decided that instead of wrapping the h1 and the subheader in another box and colouring that grey, I gave the h1 a large bottom margin to extend the grey, and pulled subheader up into it, then gave subheader a large bottom margin to keep the normal paragraph text down where it belongs[/b] h1 { background-color: #e1e1e1; padding: .5em 0 2em 1em; font-size: 1.5em; } #main p { font-size: 1em; margin-top: .5em; } #main p.subheading { padding-left: 2em; font-size: .8em; margin-top: -3em;[b]yoink![/b] margin-bottom: 3em; } #main p span {[b]span is what I used here but you may want a class on the p instead... it depends on what this text is supposed to be... if it ended up being a quote for example, this would not be a p or span but a <blockquote> instead[/b] font-style: italic; font-size: .7em; margin-bottom: 2em; padding-bottom: 1px; /*margin collapse*/ } #footer { clear: both; [b]clears #sidebar[/b] background-color: #e1e1e1; min-height: 50px;[b]making the footer box hold the grey[/b] } * html #footer {height: 50px;}[b]IE6 has issues[/b] #footer ul { width: 24em;[b]gave a width so I could center[/b] margin: 0 auto; } #footer li { float: left; background-color: #fff; } [b]these declarations simply override the ones done earlier by #right_nav... because they come later in the CSS and are just as specific (no less).[/b] #footer li a { color: #7f7f7f; vertical-align: top; } Code (markup): As you can see, a lot still depends on what the total content will be... it's hard to make a site based on an image because the content determines which HTML tag you should use, most of the time. The Gilder-Levin image replacement you asked about: http://www.mezzoblue.com/tests/revised-image-replacement/ scroll to the bottom. For the sprites menu thingie: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites Here's your menu image: http://stommepoes.nl/Kyle/menu.gif I had it opened in GIMP while I was figuring out the coordinates, just used the micrometer/compass thingie to measure where one word started and ended, and the widths. The first time I did one of these, it was quite a bit of trial and error with the coordinates. If you get stuck, go back to 0, 0 or until you can see SOMETHING and then you can feel your way from there which direction does what. I did it backwards, should have had the white text on top and the pinkie stuff below, so I could sit at 0 0 to begin... but oh well. : ) Does anything here not make sense? Also, a crusty might come along and have ideas to better my code-- there's always more than one way to do things.