Website Trouble!

[kyeugh]

So, I'm trying to make a menu. Unfortunately, the menu doesn't want me to make it. So here's the dealy.

This is the CSS for my menu:

Spoiler: CSS

ul {
margin:0;
padding:0;
list-style-type:none;
}
li {
font-weight:bold;
font-variant:small-caps;
background:url('http://upload.wikimedia.org/wikipedia/commons/7/7a/Auto_Racing_White.svg') repeat-x #DDDDFF;
padding:0.1em 0.5em;
}
li ul li {
font-weight:normal;
font-variant:normal;
background:transparent;
padding:0;
}
ul {
position:absolute;
top:60px;
left:0;
width:150px;
}

And then there is the markup for the menu itself.

Spoiler: Menu

<ul>
<li>Creative
	<ul>
	<li><a href="Mohacimim.html">Art</a></li>
	<li>Writing</li>
	<li>Basalt and Granite</li>
	</ul>
</li>
<li>Pokémon
	<ul>
	<li><em>Encyclopedia Pokémonica</em></li>
	<li>Breeding</li>
	<li>Strategy</li>
	</ul>
</li>
<li>Site
	<ul>
	<li>About the Site</li>
	<li>About Me</li>
	<li>Link to Me</li>
	</ul>
</li>
<li>Guides
<ul>
	<li>World Building</li>
	<li>Character Building</li>
	<li>Region Making</li>
	<li>Pokémon Making</li>
	</ul>
</li>
</ul>

I've looked and looked and changed things around to try and get it to work, but nothing does. I can't find what the heck is wrong with my menu, but when I pull it up online, all the text is jumpled up on top of each other. So, uh, help, please.

 

[Butterfree]

Re: Menu Trouble!

It's because the selector ul on the bottom rule selects both the top-level list (the one you actually want to position) and the sublists (which you don't). It would be simplest to give the top-level list an id such as "menu" and use that (i.e. #menu) as the selector for the bottom rule. If you don't want every unordered list you might use on any page with a menu to be formatted this way, you'll also want to add #menu in front of the second and third rules and change the first's selector into #menu (of course, you can also merge the first and last rules in that case, since they have the same selector).

 

[kyeugh]

Re: Menu Trouble!

Alright, well, I was facing a number of problems before the writing of this post, all of which had been solved, except the one I'm writing the post about.

So, I finished just about everything. It's all in the right place and junk, except one thing: now it's not aligned correctly. No matter what I do, the menu refuses to move to the left. It just kind of sits there right under all of my content, smirking at my idiocy with a type of cruelty only tables can replicate.

Anyway, it looks like this:

Spoiler: Infernal menu

And the codes are this:

Spoiler: CSS

ul {
margin:0;
padding:0;
list-style-type:none;
margin-right:auto;
margin-left:0px;
}
li {
font-weight:bold;
font-variant:small-caps;
background:url('http://upload.wikimedia.org/wikipedia/commons/7/7a/Auto_Racing_White.svg') repeat-x #DDDDFF;
padding:0.1em 0.5em;
}
li ul li#menu {
font-weight:normal;
font-variant:normal;
background:transparent;
padding:0;
}
ul#menu {
position:absolute;
top:60px;
left:0;
width:150px;
}

Spoiler: Markup

<div id="menu">
<ul>
<li>Creative
<ul>
<li><a href="Mohacimim.html">Art</a></li>
<li>Writing</li>
<li>Basalt and Granite</li>
</ul>
</li>
<li>Pokémon
<ul>
<li><em>Encyclopedia Pokémonica</em></li>
<li>Breeding</li>
<li>Strategy</li>
</ul>
</li>
<li>Site
<ul>
<li>About the Site</li>
<li>About Me</li>
<li>Link to Me</li>
</ul>
</li>
<li>Guides
<ul>
<li>World Building</li>
<li>Character Building</li>
<li>Region Making</li>
<li>Pokémon Making</li>
</ul>
</li>
</ul>
</div>

 

[Butterfree]

Re: Menu Trouble!

ul#menu selects an ul with the id #menu, but what you did is create a div with the id #menu and wrap it around the ul. Either the selector should be div#menu (or just #menu), or you should ditch the div and just put the id #menu on the actual ul.

 

[kyeugh]

Re: Menu Trouble!

I'm failing to understand somehow. So, the script would be as follows?

<div#menu>
<ul>
<li>listy stuff</li>
</ul>
</div>

or perhaps

<ul id="Menu">
<li>listy stuff</li>
</ul>

Or no...? I dunno. I'm just a terribly confused amateur. D:

 

[Butterfree]

Re: Menu Trouble!

Either the latter, or you change the CSS (not the HTML) to say div#menu instead of ul#menu (or just #menu).

 

[kyeugh]

Now having problems with a different thing altogether, but it didn't deserve its own thread.

I have the menu all sorted out, but I was making a logo-ish banner thing to go across the top. Thanks to the menu, it's not on the actual center of the screen-- it's on to the top of the content section of the page. I applied <div align="center"> to, well, center it, but that isn't quite working. It is centering, rest assured, but on every page, it's slightly shifted. So when you go to a different page of the website, it's not a smooth transition where nothing changes but the content. The logo-ish thing itself actual seems to shift to the right or left, and it's really bothering me because I have no idea how to fix it!

Also tried was <img src="Logo.png" align="center">, which also failed to work.

 

[42aruaour]

You probably should use CSS to align it. Inline CSS would look like this:

<div style="margin:auto; text-align:center;">

I'm guessing you're using HTML5, so you probably shouldn't use the align tag. I believe it's deprecated in HTML5.

 

[kyeugh]

It is. Which is pretty stupid. One would think alignment would be a kind of essential thing to have, but apparently not.

This is for an image though, so would it just be <div style="margin:auto; img-align:center;>?

 

[42aruaour]

Both should work just fine. If you were planning on also having text in the field, then the text-align is a good idea. Also, img-align would probably be better to put in the img tag.
Sort of like <img src="Logo.png" style="margin:auto; img-align:center;">.

Also, If you plan on using HTML5, then make sure to declare the doctype and character encoding correctly.