CSS Question

[monke]

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]

Okay, let's say that you have, for example:

<div id="header">
	Meow.
</div>

To put that into a fairly narrow centered div, you could use this in your CSS:

		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:

			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]

Thanks for the quick reply, iMeowbot. Expect more simple questions, they might be on their way

 

[monke]

As I said, expect another question. Here it is:

#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]

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]

Just put the navigation div under the closed header div in the html.

Like this?

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

 

[dejo]

Kinda, but like this:

<div id="header"></div>
<div id="navigation"></div>

 

[monke]

Kinda, but like this:

<div id="header"></div>
<div id="navigation"></div>

Wow, do I ever feel like an idiot?

Thanks alot. Expect more

 

[monke]

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]

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:

img.centeredimg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

<img class="centeredimg" src="btsux.png" alt="Bluetooth sucks">

The "display: block" is what makes it act div-like.

 

[monke]

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:

img.centeredimg {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

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

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]

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]

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

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?