The Cave of Dragonflies forums

Go Back   The Cave of Dragonflies forums > Websites > Webmaster Help and Discussion

Notices

Reply
 
Thread Tools
  #1  
Old 08-26-2013, 05:51 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Posticon Scared Website Trouble!

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:
CSS

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

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.
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠

Last edited by Nira; 08-27-2013 at 07:03 PM. Reason: Changed thread title
Reply With Quote
  #2  
Old 08-26-2013, 06:16 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default 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).
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
  #3  
Old 08-26-2013, 06:54 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default 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:
Infernal menu


And the codes are this:
CSS
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;
}

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&#233;mon
<ul>
<li><em>Encyclopedia Pok&#233;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&#233;mon Making</li>
</ul>
</li>
</ul>
</div>
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠

Last edited by Nira; 08-26-2013 at 10:01 PM.
Reply With Quote
  #4  
Old 08-26-2013, 11:32 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default 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.
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
  #5  
Old 08-26-2013, 11:51 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default 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:
__________________
「夢はもういい(おやすみ ハイセ)」
♠ JOHARI WINDOW ♠

Last edited by Nira; 08-26-2013 at 11:57 PM.
Reply With Quote
  #6  
Old 08-27-2013, 12:18 AM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default 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).
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
  #7  
Old 08-27-2013, 07:11 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default Re: Website Trouble!

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.
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠
Reply With Quote
  #8  
Old 09-19-2013, 12:16 PM
42aruaour's Avatar
42aruaour 42aruaour is offline
Time: I come from the past. O.o
 
Join Date: July 17, 2013
Location: This Universe, Planet Earth
Age: 18
Posts: 118
Pronoun: he
42aruaour is an unknown quantity at this point
Default Re: Website Trouble!

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.
__________________
"Keep looking up... After it rains." Fringe TV Show. Season 4 Episode 20: Worlds Apart.

Can't keep up with that cookie thing because of school.
Reply With Quote
  #9  
Old 09-19-2013, 12:58 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default Re: Website Trouble!

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;>?
__________________
「夢はもういい(おやすみ ハイセ)」
♠ JOHARI WINDOW ♠
Reply With Quote
  #10  
Old 09-19-2013, 09:17 PM
42aruaour's Avatar
42aruaour 42aruaour is offline
Time: I come from the past. O.o
 
Join Date: July 17, 2013
Location: This Universe, Planet Earth
Age: 18
Posts: 118
Pronoun: he
42aruaour is an unknown quantity at this point
Default Re: Website Trouble!

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.
__________________
"Keep looking up... After it rains." Fringe TV Show. Season 4 Episode 20: Worlds Apart.

Can't keep up with that cookie thing because of school.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:08 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Pokémon, Pikachu and all other Pokémon characters © Nintendo, Game Freak and Creatures Inc. The Cave of Dragonflies, content, styles, etc. © Butterfree/Dragonfree/antialiasis.
Forum now hosted by Eevee's HQ.