Jump to content


Photo

Aligning image...


  • Please log in to reply
17 replies to this topic

#1 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 07 August 2006 - 12:06 PM

I've tried virtually everything, but I can't get this dammn image to center:

#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;
}


#2 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 07 August 2006 - 12:42 PM

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.
Experience is something you get just after you need it.

#3 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 07 August 2006 - 12:56 PM

why do you have width:100%, and float:left together?


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.

#4 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 07 August 2006 - 01:39 PM

http://www.netmechan...7/html_no10.htm
Legend has it that reading the manual never killed anyone.
My site

#5 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 07 August 2006 - 08:01 PM

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.


<center><div id="bottomslogancontainer"> blah blah blah </div></center>


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

#6 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 07 August 2006 - 08:40 PM

The center tag is deprecated. In summary, don't use it.
Don't forget about the margin-left: auto; and margin-right: auto; method!
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#7 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 07 August 2006 - 09:06 PM

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

#8 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 07 August 2006 - 10:30 PM

Make a new temp page and see if this code works for you:

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

If so, I would suggest the problem lies elsewhere.
Experience is something you get just after you need it.

#9 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 08 August 2006 - 09:54 AM

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.

#10 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 08 August 2006 - 10:57 AM

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.

#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;
}

Posted Image

#11 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 08 August 2006 - 11:20 AM

I'll guess I'll just align it absolute again, like I did with the top slogan. Comments still very much welcome though.

#12 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 08 August 2006 - 11:41 AM

This is what I end up with. Guess it'll have to do.

#slogan {
	position: absolute;
	top: 90px;
	left: 170px;
}
#bottomslogan {
	position: relative;
	bottom: 0px;
	left: 150px;
}


#13 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 08 August 2006 - 12:04 PM

It might not be very elegant code, but this looks pretty centered to me:

Posted Image

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?

#14 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 08 August 2006 - 12:59 PM

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

#15 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 08 August 2006 - 01:52 PM

?
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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#16 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 08 August 2006 - 03:59 PM

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!

#17 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 09 August 2006 - 12:44 PM

Build it to work in FF. IE6 is soon to die when IE7 is released this month. IE7 behaves like FF.

use this:

<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="filename-ie.css">
<![endif]-->

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:

  • 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.

I dont know what else to say, from there on it just gets too specific.


Experience is something you get just after you need it.

#18 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 09 August 2006 - 02:04 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users