lilyofthevalley Posted January 8, 2007 Share Posted January 8, 2007 Note: I tweaked a few things, and changed the code due to the tweaks. Still can't solve my issue, though, although the site does validate for Strict XHTML.Okey Dokey. I've managed to get most of the bare bones for my main page for what will be the overall basic design of this site down. This is XHTML with an external CSS.I cannot for the life of me get my top nav image based links in the center of my fluid, yet absolute, three column div to center for the life of me. From what I've been reading, CSS is sadly lacking when it comes to centering. I tried several workarounds, among which included the W3Schools example of creating a horizontal list--no go, and by trying to apply the img.displayed as block, but it didn't like that either. Most of the centering suggestions I found did not apply with multiple horizontal images on the same line within a three column design. Often they would skew my content center column by pushing it all the way towards the right, and partially overlapping my fixed right column in the process. The CSS validates as it is written--hooray--but it's not what I want. Any suggestions as to how I can center those top nav image links would be greatly appreciated.The page is here: ComicsGal.com.XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Comics Gal- a place where I talk about the comics I read</title> <link rel="stylesheet" type="text/css"href="cgmainstyle.css" /> </head><body><!--top nav--><p class="center"><img src="img/latestreads.gif" alt="latest reads" /></p> <!-- links --> <div id="links"><a href="about.html"><img src="img/aboutb.jpg" alt="about" /></a><a href="athand.html"><img src="img/athandb.jpg" alt="at hand" /></a><a href="/cgreads"><img src="img/blogb.jpg" alt="blog" /></a><a href="contact.html"><img src="img/contactb.jpg" alt="contact" /></a><a href="links.html"><img src="img/linksb.jpg" alt="links" /></a></div> <!-- update --> <div id="updatepanel"> <img src="img/cgupdate.jpg" alt="last update 7 January 2007" /> </div> <!-- logo --> <div id="logopanel"> <img src="img/logo.jpg" alt="logo" /> </div> <!--top nav ends--><hr /><!--center body text--> <!-- Content here --> <!-- Right column here --> <div id="rightpanel"> <h3> ADVERTISING</h3> <p>This is where AdSense will live.</p> </div> <!-- Left navigation --> <div id="leftpanel"> <h2> PUBLISHERS</h2> <p> <a href="comicsgalreads/topcow.html"><img src="img/dc.jpg" alt="DC" /></a><br /> <a href="comicsgalreads/index.html"><img src="img/image.jpg" alt="image" /></a><br /> <a href="comicsgalreads/index.html"><img src="img/marvel.jpg" alt="MARVEL" /></a><br /> <a href="comicsgalreads/topcow.html"><img src="img/topcow.jpg" alt="TOP COW" /></a><br /> <a href="comicsgalreads/index.html"><img src="img/vertigo.jpg" alt="VERTIGO" /></a><br /> <a href="comicsgalreads/index.html"><img src="img/warnerbooks.jpg" alt="Warner Books" /></a><br /> <a href="comicsgalreads/index.html"><img src="img/wildstorm.jpg" alt="Wildstorm" /></a><br /> <a href="athand.html"><img src="img/more.jpg" alt="more to come" /></a></p> </div> <div id="content"> <h1>I offer a hearty welcome to all comic enthusiasts!</h1> <p>Chances are, if you've found this site, you like comics for one reason or another. Well, so do I. I've been reading comics for a long time, but not long enough ago that I was around during the Golden Age of comics.</p> <p>You'll notice that I'm reading all sorts of comics (and will probably add info on comic strips and web comics as well when time permits). I love variety, so my tastes run all over the gamut. I actually have a lot more comics than what I'm currently showing here, but the site is young, and more will be added as time permits. To get an idea of the comics I have at hand, but haven't had time to write about, check out the, what else but, at hand page.</p> <p>One of the reasons I started this site was to talk about the comics that I read. But even more than that, I would really like to hear what other people think about those comics as well. That's why I opted for a blog, where one can pipe in with their thoughts as well.</p> <p>I hope you find something you like within. If so, feel free to bookmark this page so you can come back and visit often!</p> </div><!--center body text--></body></html> CSS: body {margin:0;padding:0;background-color:#E9E2B4;} h1 {font-size:20pt; font-family:"comic sans MS", sans-serif; text-align:center} h2 {background-color: black; font-size:13pt; color: white; font-family:"comic sans MS", sans-serif} h3 {background-color: black; font-size:13pt; color: red; font-family:"comic sans MS", sans-serif; text-align: center} p {margin-left: 2.5px; font-family:"comic sans MS", sans-serif} p.center {margin-left:0px;text-align:center}hr {color: red;margin-top:10px}img {border:0}img.displayed {display:block; margin-left:auto; margin-right:auto}/* top nav divs*/ #logopanel {position:absolute; top: 0px; /* resize these bits to liking */ left: 0; width: 109px; /* works best with fixed width right - left divs*/} #updatepanel {position:absolute; top: 0px; /* resize these bits to liking */ right: 0; width: 103px; /* works best with fixed width right - left divs*/} #links {position:absolute; top: 55px; padding-left: 200px; /* 20px to play with */ padding-right: 120px; /* 20px to play with */}/* top nav divs end*/ /* main body divs*/ #leftpanel {position:absolute; top: 100px; /* resize these bits to liking */ left: 0; width: 200px; /* works best with fixed width right - left divs*/} #rightpanel {position:absolute; top: 100px; /* resize these bits to liking */ right: 0; width: 200px; /* works best with fixed width right - left divs*/} #content {position:absolute; top: 100px; padding-left: 200px; /* 20px to play with */ padding-right: 200px; /* 20px to play with */} /* main body divs end*/ Link to comment Share on other sites More sharing options...
real_illusions Posted January 8, 2007 Share Posted January 8, 2007 #links {position:absolute;top: 55px;padding-left: 200px; /* 20px to play with */padding-right: 120px; /* 20px to play with */}change that to#links{margin-left:auto;margin-right:auto;margin-top:55px;}It should be centered and 55px from the top. Plus, if you make the browser smaller..the image links go onto a new line, causing the site to collapse in on itself and generally look horrible.If you use less absolute positioning with other elements, then you can help get rid of this problem. Link to comment Share on other sites More sharing options...
lilyofthevalley Posted January 8, 2007 Author Share Posted January 8, 2007 real_illusions: I tried what you suggested, and no go. What happens is it pushes that div to the left, and it's also now lower than it used to be.I believe I tried variations very similar to that, and one of them may have been exactly that (I trialed and erred a lot *laugh*) without any success either.In my experience, every time I tried to fiddle with the absolute values, things went completely haywire.I did see some float related three column layouts, but either they were encumbersome in their need for tweaks, or they just didn't work for the same reason I've been having problems here.I will definitely keep looking, as you suggested, at other non absolute layouts, and see if I can find a better one. Thank you for responding. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 8, 2007 Share Posted January 8, 2007 Create your html page using div's in the following order:left hand image: float leftright hand image : float rightbanner : margin:autonav links : margin:autoThen a div with the hr tag and clear:both in the css for that div.Here is a link to a page which is awfully similar, although not exactly as you want it.http://mlafever.jlhaslip.trap17.com/schools.html Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 9, 2007 Author Share Posted February 9, 2007 jlhaslip: I tried what you suggested, and some really funky things started happening to the format, none of them centering the links. The best I could manage when I got rid of all of the absolute in my CSS was it decided that float meant everything hung out on the left hand side regardless of which way I was telling it to float--eek!What I did wind up doing, which I cringe to admit, because it means I still can't quite get divs to do what I want is the following: <!-- recently read banner --><p class="center"><img src="img/latestreads.gif" alt="latest reads" /><br /> <!-- links --> <a href="about.html"><img src="img/aboutb.jpg" alt="about" /></a><a href="athand.html"><img src="img/athandb.jpg" alt="at hand" /></a><a href="http://comicsgal.com/comicsgalreads/"><img src="img/blogb.jpg" alt="blog" /></a><a href="contact.html"><img src="img/contactb.jpg" alt="contact" /></a><a href="links.html"><img src="img/linksb.jpg" alt="links" /></a> I've looked at it in IE7, Netscape & Firefox, and all three put both the banner & the links where they are supposed to be.The one thing I don't like is that if I try to close off the p, it adds a blank line I don't want, forcing the rest of the page down. I haven't found a way to fix this yet, so I'm being bad and leaving it as is for now.I did, however, notice that despite the overall margin=0, firefox still bumps the banner down a notch. It's not a huge deal, just annoying. Link to comment Share on other sites More sharing options...
Anders Moen Posted February 9, 2007 Share Posted February 9, 2007 I think I know what you've done wrong, but if I'm gonna fix it,you need to post with an image to show me how it's gonna look. Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 9, 2007 Author Share Posted February 9, 2007 I'm in the midst of tryin to conquer the div demons at the moment, but the version I mention above which is still not right (and, rightly, wont' validate) is here: Comics Gal Homeedit: oops. my bad, this is the one that does validate, but now the hr is pushed down. But the ventered links are still a workaround that I'm not proud of.(The battle is not going well, but I'm hoping!) Link to comment Share on other sites More sharing options...
Anders Moen Posted February 9, 2007 Share Posted February 9, 2007 Actually, when I now think about, I can't fix it because its 1024 px so I can't see when it's centered. Sorry Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 9, 2007 Author Share Posted February 9, 2007 It's ok, it was nice that you tried.What I can't understand is that if they want us to stop using tables so badly, why did they make it so darn difficult to do absolute center formatting???? I've been browsing through this CSS forum, and so many people have issues with exactly that. *sigh* Link to comment Share on other sites More sharing options...
Anders Moen Posted February 9, 2007 Share Posted February 9, 2007 Well, just to center a div is easy: CSS:body { text-align: center }#container { width: 400px; margin: 0 auto; }XHTML:<html><head><title>lol</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="container">HELLO!!! margin: 0 auto should work :)</div><div id="container">Remember to use a doctype, or else I don't think it'll work in IE</div></body></html> Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 9, 2007 Author Share Posted February 9, 2007 jlhaslip: I DID IT! Well, you did it, really. I finally figured out what I was missing after I looked at the CSS for the site you linked to. For some reason, it desperately wants the text-align:center in order for it to work. I still can't get the hr to line up properly, but I think I might have a way around that as well...Thank you, thank you, thank you! *happy dance* I just hope it works when I check it in other browsers (this is IE7 I'm using right now.)andersmoen: hee...thanks, but I found that last bit of inferred wisdom that I needed spelled out for me. Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 9, 2007 Author Share Posted February 9, 2007 Ok, and now I figured out the right place for the clear to affect the hr, so it's all working, and it still validates and I am soooo happy I could pop!Thank you again! Link to comment Share on other sites More sharing options...
Anders Moen Posted February 9, 2007 Share Posted February 9, 2007 Hehe, I'm glad I could help. It was thanks to me, right? lol Link to comment Share on other sites More sharing options...
S@m Posted February 9, 2007 Share Posted February 9, 2007 Great example how to center your layout. Super easy.http://www.simplebits.com/notebook/2004/09/08/centering.html Link to comment Share on other sites More sharing options...
roondog Posted February 9, 2007 Share Posted February 9, 2007 You might want to get rid of some of that absolute positioning. as someone said on smaller browser windows it goes all funny, but if you don't mind that i guess its ok. On a side note as you like comics you might like this amatuer comic adventure www.skullcopica.co.uk (its not a cheap plug for any of my sites). Link to comment Share on other sites More sharing options...
jlhaslip Posted February 9, 2007 Share Posted February 9, 2007 Glad to have been of some assistance. Hope you learned something, too. Keep plugging away, it'll all be good soon. Well, actually, a web site is a living thing which needs to be fed and maintained, but it gets easier with time... Good Luck on it.Oh, and IE doesn't recognize the margin: 0 auto, so that's why the CSS includes the text-align:center.:)Just another work-around for IE. Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 10, 2007 Author Share Posted February 10, 2007 andersmoen: Hee, I wish I had seen your latest post while I was trying to find that element. I saw your response just as I was coming back to say I found the missing link.S@m:I have that site bookmarked already, but at this exact second, I don't remember why I was trying something else. might be a good reason, or it might be a site I simply forgot to go back to. Thanks for bringing it up again.Roondog: I started using absolute positioning when some of the float layouts I tried kept overlapping, despite the padding I was trying to tell them to use. I'll give it a shot again. I might have inadvertently fixed whatever was vexing me before, so it might be ok this time. The header seems to be surviving, so who knows? (So if it's not a cheap plug...what does that make it? I'll definitely try to check it out when I have some time.) jlhaslip: so if IE doesn't recognize the margin 0, why is firefox bumping the center section of my header further town from the top? That puzzles me. As long as I remember what works, I learned something. So time will tell. Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 10, 2007 Author Share Posted February 10, 2007 Roondog: Ok, I totally remember why I did the absolutes. It's spilling all over itself again. I'll go back and see if I saved any references for padding/setting margins to clear that mess apart. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 10, 2007 Share Posted February 10, 2007 jlhaslip: so if IE doesn't recognize the margin 0, why is firefox bumping the center section of my header further town from the top?It is the 'auto' part which ie has trouble with. That is what performs the centering. It 'automagically' finds the correct value for the margins for the block of info to be centred.And I don't have FF or IE until Monday (laptop is on its way back from being repaired), so I can't check the 'bumping down' until then, but check that both the top margins and the top padding are declared. Sometimes the browser uses one or the other to space things by default. IE might be using margins and FF might be using padding, or vice versa, so declare both of them in your css and they should produce the same results. Maybe.*edit* added this part as an after thought.Change this:#banner {margin-left:auto; margin-right:auto; text-align:center} to this: #banner {margin: 0 auto; padding: 0; text-align:center} to see if it works the same in both. And then alter the padding to drop the banner down to where you want it to rest. Link to comment Share on other sites More sharing options...
roondog Posted February 13, 2007 Share Posted February 13, 2007 Just noticed you are using an image for the read line if i have read the code correctly. instead of this you could put the whole top section in a div and give it a red bottom border.something like this. <html><head><style type="text/css">#top{width:1024px;height:150px;border-bottom:red solid 2px;}</style></head><body><div id="container"><div id="top"><!--Insert banner and navigation here--></div><!--insert rest of page here--></div></body></html> You could also put the bottom section in a similar div. I don't know if this is correct practice but i like to think it tidies things up. Link to comment Share on other sites More sharing options...
croatiankid Posted February 14, 2007 Share Posted February 14, 2007 block level elements are supposed to be centered with margin:0 auto ,inline with text-align:center; Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 22, 2007 Author Share Posted February 22, 2007 Ok...I'm getting back around to working on this again. I'm going to take a stab at it with some of the suggestions and post back with how it goes.Thanks for all the tips! Hopefully more positive result input back to ya'll soon.croatiankid: inline meaning in the html, yes? Just want to make sure I'm understanding that right before I attempt to commit it to memory. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 22, 2007 Share Posted February 22, 2007 your website is showing internal server error 500 Link to comment Share on other sites More sharing options...
croatiankid Posted February 22, 2007 Share Posted February 22, 2007 no, inline elements are elements such as SPAN IMG B I EM STRONG etc.block elements are ones like P DIV etc. search the web for inline and block elements in html. Link to comment Share on other sites More sharing options...
lilyofthevalley Posted February 22, 2007 Author Share Posted February 22, 2007 croatiankid: ok thanks...I'll do that.Prateek:Where are you finding the 500 error? When I go to the site, it seems to be up, blog's up, and of course any pages I haven't built yet just aren't there (*edit* all but two should be 404 on blog with the left hand links), but I'm not seeing the 500 anywhere. I'll check again. Please post the URL to where you're getting the 500.*edit* Ok, figured out the problem...I deleted that version...used to have a coming soon on the main, but it's just up on the main and beyond now. I'll change the link in my first post on the thread. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now