448191 Posted August 7, 2006 Share Posted August 7, 2006 I've tried virtually everything, but I can't get this dammn image to center:[code]#bottomslogancontainer { border: 1px solid #006633; position: relative; float: left; text-align: center; display: block; margin: 0 auto; padding: 0; width: 100%; height: 28px;}#bottomslogancontainer img { border: 1px solid #0000CC; display: block; margin: 0 auto;}[/code] Quote Link to comment Share on other sites More sharing options...
killerb Posted August 7, 2006 Share Posted August 7, 2006 why do you have width:100%, and float:left together?IMO, you want to avoid using width, as margins and padding can stuff it all up. The default is to stretch the margin to the parent's padding anyway. That is generally what we want.Are you sure this doesn't work in its simplicity:#bottomslogancontainer{border: 1px solid #006633; height: 28px; text-align: center;}It always works for me!Make sure there are no other CSS rules that may be interfering with it, however unlikely that is. Quote Link to comment Share on other sites More sharing options...
448191 Posted August 7, 2006 Author Share Posted August 7, 2006 [quote author=killerb link=topic=103273.msg411159#msg411159 date=1154954534]why do you have width:100%, and float:left together?[/quote]It's mainly a collection of everything I tried...Anyway, still no go.Plus if I leave out : position: relative; float: left;in FF it stuffs the container in a space that is "occupied" only by margins. Quote Link to comment Share on other sites More sharing options...
AndyB Posted August 7, 2006 Share Posted August 7, 2006 http://www.netmechanic.com/news/vol7/html_no10.htm Quote Link to comment Share on other sites More sharing options...
Ricklord Posted August 7, 2006 Share Posted August 7, 2006 Ive just been having a similar problem and i found that in your html if you do the following it centers the whole container and not just the text within the container. [code]<center><div id="bottomslogancontainer"> blah blah blah </div></center>[/code]this wont work with your width is 100%Dont know if this will help, im a begginer to CSS as well but this might be what your looking for it works for my template which i needed the whole thing centered. Rick Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 7, 2006 Share Posted August 7, 2006 The center tag is deprecated. In summary, don't use it.Don't forget about the margin-left: auto; and margin-right: auto; method! Quote Link to comment Share on other sites More sharing options...
Ricklord Posted August 7, 2006 Share Posted August 7, 2006 Cheers moberemk, I've just taken out the center tags and added the margin left/right to auto in my style sheet. works a treat. Rick Quote Link to comment Share on other sites More sharing options...
killerb Posted August 7, 2006 Share Posted August 7, 2006 Make a new temp page and see if this code works for you:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>Untitled</title> <meta http-equiv="generator" content="PHP Designer 2006 - BETA" /> <style type="text/css"> #bottomslogancontainer{border: 1px solid #006633; text-align: center;} </style> </head> <body><div id="bottomslogancontainer"><img src="image.gif" alt="Pic" /></div> </body></html>[/code]If so, I would suggest the problem lies elsewhere. Quote Link to comment Share on other sites More sharing options...
448191 Posted August 8, 2006 Author Share Posted August 8, 2006 Above does work. So I guess the problem is with one of the related layers. Thing is, because of different behaviour in FF and IE, I implemented a lot of "fixes". Layers positioned absolutely, wrapping containers, etc... I'm not really that experienced with CSS yet. Took me three days of VERY hard work to get where I am. I'm nearly finished. Centering this image is one of the very last things I need to do.When I finish the layout and javascript I'll get to work on finishing the php 'backbone' of the site. Then I'll get me a host. If the're any Dutch people around here who know of a good Dutch based PHP5 host, please let me know.For now you'll have to do with some screenshots, html and css. Hopefully we can figure this out together.I'll be back with code and screenshot shortly. Quote Link to comment Share on other sites More sharing options...
448191 Posted August 8, 2006 Author Share Posted August 8, 2006 OK, I've made a screenshot of the layout where I placed a border around elements that might be relevant.In the css I used named colours so you can easily see what's what.Thanks in advance for ANY help you can provide.[code]#bottomslogancontainer { border: 1px solid green; position: relative; float: left; text-align: center; width: 100%; height: 28px;}#bottomslogancontainer img { border: 1px solid blue; display: block; margin: 0 auto;}#container {border: 1px solid blue; margin: 30px auto; margin-top: 30px; width: 823px; height : 600px; }#MenuIEfix {border: 1px solid darkviolet; position: relative; margin: 0 auto; height: 26px; width: 718px;}#space {border: 1px solid green; padding: 30px; padding-bottom: 20px; position: relative; float:left; margin: 5px; width: 724px; height : 431px; }#bottomdivider {border: 1px solid black; position:relative; float:left; height: 5px; width: 718px; background-color: #999999; font-size: 1px;}#content {border: 1px solid crimson; width: 718px; height : 428px;}#logo {border: 1px solid darkgrey; position: absolute; bottom: 412px;}#slogan {border: 1px solid darkgrey; position: absolute; top: 90px; left: 200px; margin-bottom: 0px;}#textcontainer {border: 1px solid darkblue; position:relative; float:left; margin-top: 30px; margin-left: 15px; height: 188px; width: 472px;}#subnavcontainer {border: 1px solid darkred; position:relative; float:left; margin:0; margin-top:30px; width: 106px; height: 214px;}#logincontainer {border: 1px solid darkorange;position: relative;float:right; width: 104px; height: 100px; margin-top: 30px; margin-left: 15px;}[/code][img]http://home.orange.nl/lekkage/img/screenshot.gif[/img] Quote Link to comment Share on other sites More sharing options...
448191 Posted August 8, 2006 Author Share Posted August 8, 2006 I'll guess I'll just align it absolute again, like I did with the top slogan. Comments still very much welcome though. Quote Link to comment Share on other sites More sharing options...
448191 Posted August 8, 2006 Author Share Posted August 8, 2006 This is what I end up with. Guess it'll have to do.[code]#slogan { position: absolute; top: 90px; left: 170px;}#bottomslogan { position: relative; bottom: 0px; left: 150px;}[/code] Quote Link to comment Share on other sites More sharing options...
448191 Posted August 8, 2006 Author Share Posted August 8, 2006 It might not be very elegant code, but this looks pretty centered to me:[img]http://home.orange.nl/lekkage/img/screenshot2.gif[/img]Everything between the horizontal dividers doesn't though.Oh well, rome wasn't build in a day. :-[I know I'm not in ws critique, but how do you like the look? I'm going for that "cheap but reliable" look. See it? Quote Link to comment Share on other sites More sharing options...
Ricklord Posted August 8, 2006 Share Posted August 8, 2006 Elo, I like the logo and the orange but im not to sure about the navigation. Maybe a backgorund colour and changes to orange on hover just an idea dont know what it would like but i dont think the line underneath does anything for me. Also the lofin button i would customise to fit in better with the site. Apart from that it is very simple which is the image your going for.Rick Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 8, 2006 Share Posted August 8, 2006 ?This isn't the website critique forum!That being said, while that solution may work for now, just remember that that trick won't work for fluid-width designs. Quote Link to comment Share on other sites More sharing options...
448191 Posted August 8, 2006 Author Share Posted August 8, 2006 Again, I know I'm not in WS critique, but bear with me for just this last post. ;DI'm actually pretty proud of the sub navigation. It doesn't only change colour on rollover, when you click one, the item is moved to the top postion and gets that fatter orange bar. The previously selected item is moved to the bottom postion and it's appearance is reverted to plain old grey. Too bad I can't show you, since I don't have a host right now. Plus, the login button is already customized. I should probably use a light grey background for though. Thanks for bringing that to my attention.@moberemk:I know it isn't the best of solutions, and frankly I hate it. But it's the only way I've found to work in both FF and IE sofar. If someone can show me how to fix this properly, please don't hesitate! Quote Link to comment Share on other sites More sharing options...
killerb Posted August 9, 2006 Share Posted August 9, 2006 Build it to work in FF. IE6 is soon to die when IE7 is released this month. IE7 behaves like FF.use this:[code]<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="filename-ie.css"><![endif]-->[/code]Use that file to hold all the hacks that are for IE, like the famous 'IE rounding bug'. All other browsers will ignore that file.Some good practice is what you need. The more frustrated you get, the more you will remember the right way to do it, and yes, CSS is frustrating. Once you learn it, it is great. Most of us just dont seem to get the right direction when learning, so it multiplies the work. I am a firm believer in books for learning code.Here are some axioms. You might already know them, but in case you dont, here goes:[list][*]Use static or relative positioning by default, absolute positioning does not stretch the parent element.[*]Don't use width:100% - margin:0 will do the same thing (stretch the margin to the padding of the parent)[*]if centering divs, text-align:center in the parent, and margin:auto in the child. IE sets margin:auto by default, but it is not the W3C way. (I like IE in a lat of ways, in a lot of ways I dont. Glad it is finally standardised.)[*]Use margins rather than padding - padding interferes with positioning the child elements, and gets quite frustrating. [*]Only padding on elements that hold text (p,blockquote,td,label,textarea,input tags)[*]Clear all floats, except where the text is to wrap-around the image/div. [/list]I dont know what else to say, from there on it just gets too specific. Quote Link to comment Share on other sites More sharing options...
448191 Posted August 9, 2006 Author Share Posted August 9, 2006 Thanks for the tips.I think I'll take your advice on using a seperate file for IE6 and design for IE7 and FF. You're right, I do need some more practice. Making this layout was my first attempt at designing with layers.I've got a working layout, a working ajax implementation, so I'm moving on for now. Right now I'm focusing on getting the php backend up and running (and it'll be a lot of work, I'm trying a lot of new things).Afterwards, and that'll take a couple of months since I've got a full time job, I'll redo the css.Thanks again. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.