Jump to content

Aligning image...


448191

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]
Link to comment
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.
Link to comment
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.
Link to comment
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
Link to comment
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.
Link to comment
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.
Link to comment
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]
Link to comment
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?
Link to comment
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
Link to comment
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!
Link to comment
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.

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.