Jump to content

Archived

This topic is now archived and is closed to further replies.

448191

Aligning image...

Recommended Posts

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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
[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.

Share this post


Link to post
Share on other sites
http://www.netmechanic.com/news/vol7/html_no10.htm

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
The center tag is deprecated. In summary, don't use it.
Don't forget about the margin-left: auto; and margin-right: auto; method!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
I'll guess I'll just align it absolute again, like I did with the top slogan. Comments still very much welcome though.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
?
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.

Share this post


Link to post
Share on other sites
Again, I know I'm not in WS critique, but bear with me for just this last post.  ;D

I'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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.