CSS Question

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
I'm currently trying to learn CSS, so this question is going to sound complete 'noobish'. Just a warning.


I've got my page linked to my external style sheet, and it all works properly.

In the page coding I've put <div id="header"> in. If I want that aligned to the center of the page where do I put it and how? In the external style sheet or the page?
 

iMeowbot

macrumors G3
Aug 30, 2003
8,636
0
Okay, let's say that you have, for example:

Code:
<div id="header">
	Meow.
</div>
To put that into a fairly narrow centered div, you could use this in your CSS:

Code:
		div#header {
			margin-left: auto; 
	     		margin-right: auto;
			width:10em;
			border:thin solid black;
		}
(the border is simply for illustrating the boundaries)

To get the text centered within the div, add to the above CSS thingmabob:
Code:
			text-align:center;
Make sure when messing with formatting like this that you don't toss your browser into quirks mode -- that is, if you're using CSS formatting, use it everywhere and stay away from the old Netscape tags (and make sure your HTMl validates). Otherwise, you'll need to add extra gobbledygook to get around quirks.
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
Thanks for the quick reply, iMeowbot. Expect more simple questions, they might be on their way :D
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
As I said, expect another question. Here it is:

Code:
#header {
	margin-top: 15px;
	background-image: url(link);
	background-color: #DADADA;
	background-repeat: repeat-x;
	margin-left: auto; 
	margin-right: auto;
	height: 130px;
	width: 780px;
}
#navigation {
	background-image: url(link);
	background-color: #003973;
	background-repeat: repeat-x;
	margin-left: auto; 
	margin-right: auto;
	height: 38px;
	width: 780px;
}
I need the navigation to go underneath the banner, help? BTW, is that code correct?
 

Laslo Panaflex

macrumors 65816
May 1, 2003
1,291
0
Tokyo
monke said:
As I said, expect another question. Here it is:


I need the navigation to go underneath the banner, help? BTW, is that code correct?
Just put the navigation div under the closed header div in the html.
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
Laslo Panaflex said:
Just put the navigation div under the closed header div in the html.
Like this?
Code:
<div id="header">
<div id="navigation">
I tried that, and even a line between both, but the 'navigation' div lines up on top of the 'header' div.
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
dejo said:
Kinda, but like this:
Code:
<div id="header"></div>
<div id="navigation"></div>
Wow, do I ever feel like an idiot? :eek:

Thanks alot. Expect more :)
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
I'm baaaack. Here's what's happening:

I'm trying to get a logo centered within the banner, but can't seem to do it. I've got the logo ontop, but cannot seem to center it.

Thanks again :)
 

iMeowbot

macrumors G3
Aug 30, 2003
8,636
0
This gets a little harder because we don't see here what CSS and HTML you have surrounding the image, but in general, the CSS to make an image center would be something like:

Code:
img.centeredimg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
Code:
<img class="centeredimg" src="btsux.png" alt="Bluetooth sucks">
The "display: block" is what makes it act div-like.
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
iMeowbot said:
This gets a little harder because we don't see here what CSS and HTML you have surrounding the image, but in general, the CSS to make an image center would be something like:

Code:
img.centeredimg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
Code:
<img class="centeredimg" src="btsux.png" alt="Bluetooth sucks">
The "display: block" is what makes it act div-like.
That worked perfectly, but where could I stick the 'a href' to link it?
 

iMeowbot

macrumors G3
Aug 30, 2003
8,636
0
:D

Okay, so you want an anchor and an img! You can use another div then, those are good when you want to wrap up more than one tag pair with a single set of attributes.

div.mylogo { width:200px; margin-left: auto; margin-right: auto; text-align:center; }

<div class="mylogo"><a href="niftypage.html"><img src="btsux.png" alt="Bluetooth sucks"></a></div>


(Make the div width as wide as the image, or a wee bit more)
 

dejo

Moderator
Staff member
Sep 2, 2004
15,981
447
The Centennial State
monke, this is starting to veer away from CSS and into basic HTML. I'd suggest you find an online tutorial or pick up a good book on getting started with HTML. Hope that didn't come across too hard-assed. :)
 

monke

macrumors 65816
Original poster
May 30, 2005
1,438
2
iMeowbot said:
:D

Okay, so you want an anchor and an img! You can use another div then, those are good when you want to wrap up more than one tag pair with a single set of attributes.

div.mylogo { width:200px; margin-left: auto; margin-right: auto; text-align:center; }

<div class="mylogo"><a href="niftypage.html"><img src="btsux.png" alt="Bluetooth sucks"></a></div>


(Make the div width as wide as the image, or a wee bit more)
Thanks :)

dejo said:
monke, this is starting to veer away from CSS and into basic HTML. I'd suggest you find an online tutorial or pick up a good book on getting started with HTML. Hope that didn't come across too hard-assed. :)
I'm trying to learn off w3schools, but it just doesn't sink in. Got any book recommendations dejo?