|
You last visited: Today at 02:53
Advertisement
[CSS, HTML] Menü - Problem
Discussion on [CSS, HTML] Menü - Problem within the Web Development forum part of the Coders Den category.
09/06/2013, 16:14
|
#1
|
elite*gold: 35 
Join Date: May 2011
Posts: 3,757
Received Thanks: 486
|
[CSS, HTML] Menü - Problem
Hallo,
folgender Code:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Logos</a></li>
<li><a href="#">Fotografien</a></li>
<li><a href="#">Vektoren</a></li>
<li><a href="#">3D-Objekte</a></li>
<li><a href="#">Sonstige</a></li>
</ul>
</nav>
</div>
</body>
</html>
Code:
body{
margin: 0px auto;
padding: 0px auto;
background-color: #f0f0f0
}
nav ul li{
width: 960px;
height: 35px;
float: left;
background: url("img/menue.png") no-repeat;
list-style: none;
}
nav ul li a{
color: #eeeeee;
padding: 10px;
display: block;
text-decoration: none;
}
Das ganze sieht so aus:
Möchte aber die Menüpunkte nebeneinander in ein und der selben Leiste.
Fehler ist klar: Der Hintergrund ist ja pro Menüpunkt angelegt, aber wie ändere ich das am besten?
Bin relativ neu in html,css etc.
Möchte im ein Dropdown Menü erstellen...
Danke im voraus! 
|
|
|
|
09/06/2013, 16:33
|
#2
|
elite*gold: 0
Join Date: Sep 2005
Posts: 427
Received Thanks: 87
|
Zeig den Inhalt der style.css, dort ist die fehlerhafte Definition der Menüpunkte.
|
|
|
|
|
09/06/2013, 16:46
|
#3
|
elite*gold: 35
Join Date: May 2011
Posts: 3,757
Received Thanks: 486
|
Quote:
Originally Posted by kissein
Zeig den Inhalt der style.css, dort ist die fehlerhafte Definition der Menüpunkte.
|
Code:
body{
margin: 0px auto;
padding: 0px auto;
background-color: #f0f0f0
}
nav ul li{
width: 960px;
height: 35px;
float: left;
background: url("img/menue.png") no-repeat;
list-style: none;
}
nav ul li a{
color: #eeeeee;
padding: 10px;
display: block;
text-decoration: none;
}
So sieht es von oben genannten Bild aus.
Aktuell habe ich probiert, das Bild als header einzufügen und den einfach drauf zu legen.
Sieht so aus:
Aber ich bezweifle, dass es überhaupt funktioniert, da sich ja dann noch ein Dropdown öffnen soll.
Hab dich mal bei Skype geaddet
|
|
|
|
|
09/06/2013, 16:51
|
#4
|
elite*gold: 74
Join Date: Jul 2010
Posts: 13,408
Received Thanks: 3,943
|
Code:
body{
margin: 0px auto;
padding: 0px auto;
background-color: #f0f0f0
}
nav ul li{ <- Für jedes Element <li> gilt also folgender Stil
width: 960px; <- Es ist 960px breit
height: 35px;
float: left;
background: url("img/menue.png") no-repeat; <- Es hat diesen Hintergrund
list-style: none;
}
nav ul li a{
color: #eeeeee;
padding: 10px;
display: block;
text-decoration: none;
}
Dein Problem lässt sich beheben, wenn du den Hintergrund und die Breite nicht für die <li> Elemente sondern für das umklammernde <ul> Element festlegst.
Code:
body{
margin: 0px auto;
padding: 0px auto;
background-color: #f0f0f0
}
nav ul{
width: 960px;
background: url("img/menue.png") no-repeat;
}
nav ul li{
height: 35px;
float: left;
list-style: none;
}
nav ul li a{
color: #eeeeee;
padding: 10px;
display: block;
text-decoration: none;
}
|
|
|
|
|
09/06/2013, 17:00
|
#5
|
elite*gold: 35
Join Date: May 2011
Posts: 3,757
Received Thanks: 486
|
Quote:
Originally Posted by .StarSplash
Dein Problem lässt sich beheben, wenn du den Hintergrund und die Breite nicht für die <li> Elemente sondern für das umklammernde <ul> Element festlegst. |
Top, danke!
Wusste nur nicht wie ich das im Code umsetzen sollte! ;-)
Bei weiteren Problemen mit dem Menü werde ich mich hier nochmals melden
|
|
|
|
|
09/08/2013, 18:55
|
#6
|
elite*gold: 900
Join Date: Apr 2009
Posts: 14,981
Received Thanks: 11,403
|
General Coding -> Web Development
moved
|
|
|
|
 |
Similar Threads
|
jquery Tab Menü Problem
12/17/2012 - Web Development - 2 Replies
Hallo epvp,
habe ein Problem mit einem jquery tab script was ich aus einer alten webseite von mir kopiert habe. Das Script funktioniert soweit, aber bei jedem klick auf die Tabs ändert sich die Url und #tab2 zb steht hinten dran. Das ist soweit auch okay, nur verändert sich auch der Bildausschnitt. Bedeutet, man sieht nichtmehr alles sondern nurnoch den Teil ab den Tabs.
Hoffe das war verständlich.. wie sorg ich dafür dass nicht immer an diesen Punkt gesprungen wird?
<script...
|
[HTML & CSS] Menü erstellen
11/04/2012 - Web Development - 17 Replies
Hi Leute,
ich habe schon gehört, dass man Menüs mit Listen erstellen kann und habe es versucht. Rausgekommen ist:
HTML:
<ul id="menu">
<li> <a class="link" href="deineseite1.html"> deine seite 1</a> </li>
<li> <a class="link" href="deineseite2.html"> deine seite 2</a> </li>
<li> <a class="link" href="deineseite3.html"> deine seite 3</a> </li>
|
[HTML+CSS]How to Dropdown Menü erstellen
11/23/2011 - Coding Tutorials - 6 Replies
Hallo E*PVP,
ich möchte euch zeigen wie ihr ein eigenes Dropdown Menü erstellen könnt!
Ihr erstellt eine HTML Datei und bearbeitet die mit einem Editor eurer Wahl. NotePad++ wäre ein guter Editor. Dann erstellen wir erstmal das Grundgerüst beim HTML, welches aus diesen Bereichen aufgebaut ist :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans itional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
...
|
HTML/Javascript menü aufklappen
11/06/2011 - Web Development - 7 Replies
Hey e*pvpers
Ich suche einen javascript für HTML der es mir erlaubt, wie auf der Seite GIGA - Gaming and Digital Entertainment wenn man auf "Games" geht so eine Box ausklappt.
Danke im Voraus
|
CSS/HTML aufklappbares menü
09/13/2009 - Web Development - 14 Replies
oft durchgekaut, jedoch nach stunden langem googlen und probieren kam ich noch zu keiner lösung. eventuell kann mir ja jemand hier meinen denkfehler zeigen.
2 sachen:
1. ich habe ein div indem ein bild ist, beim anklicken des bildes soll sich darunter ein formularfeld aufklappen.
bsp.
<div>
<ul>
|
All times are GMT +1. The time now is 02:53.
|
|
![[CSS, HTML] Menü - Problem](https://www.elitepvpers.com/forum/iconimages/web-development/css-html-men-problem_ltr.gif){kind=small}
