• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Website Trouble!

kyeugh

onion witch
Pronoun
she/her
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:
Code:
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.
Code:
<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.
 
Last edited:
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).
 
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:
1gdx1.png

And the codes are this:
Code:
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;
}
<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>
 
Last edited:
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.
 
Re: Menu Trouble!

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

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

or perhaps
Code:
<ul id="Menu">
<li>listy stuff</li>
</ul>

Or no...? I dunno. I'm just a terribly confused amateur. D:
 
Last edited:
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).
 
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.
 
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.
 
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;>?
 
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.
 
Back
Top Bottom