|
You last visited: Today at 02:53
Advertisement
CSS Menü-Problem
Discussion on CSS Menü-Problem within the Web Development forum part of the Coders Den category.
12/17/2014, 15:23
|
#1
|
elite*gold: 149 
Join Date: Feb 2010
Posts: 1,298
Received Thanks: 346
|
CSS/HTML Navigation (Problem mit zentrieren und Dropdownbox)
Hey,
ich habe ein Problem mit meinem CSS-Menü.
Screenshot:
Die Menüpunkte sollen zentriert sein und das Dropdown-Menü bei Portfolio kann ich irgendwie auch nicht verändern.
index.html
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>
<a href="#">Startseite</a>
</li>
<li>
<a href="#">Über mich</a>
</li>
<li>
<a href="#">Portfolio</a>
<ul>
<li><a href="#">Fotos</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li>
<a href="#">Kontakt</a>
</li>
</ul>
</div>
<div id="header"></div>
<div id="main">
<p>Das ist die Main</p>
</div>
<div id="footer">
<p>Das ist der Footer</p>
</div>
</div>
</body>
</html>
style.css
Code:
@charset "UTF-8";
html, body {
background-color: #D8D8D8;
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 100%;
min-height: 100%;
position: absolute;
}
#header {
position: relative;
width: 100%;
top: 0;
height: 220px;
background: url(../layout/header.png) no-repeat;
background-position: center;
z-index: 3;
}
#nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 45px;
background-color: #000;
opacity: 0.4;
z-index: 4;
}
#nav ul {
list-style-type:none;
list-style-image:none;
}
#nav li {
float:left;
margin-left: 10px;
margin-right: 10px;
}
#nav li a {
float:left;
text-align: center;
width: 120px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#nav li ul {
display:none;
}
#nav li a:hover {
box-shadow: 0px 8px 6px -6px #888;
-moz-box-shadow: 0px 8px 6px -6px #888;
-webkit-box-shadow: 0px 8px 6px -6px #888;
}
#nav li ul {
width: 50px;
margin-top: 5px;
background-color: #000;
}
#nav li:hover ul {
display: block;
}
#main {
width: 60%;
background-color: #FFFFFF;
padding: 20px;
position:relative;
margin-left:auto;
margin-right:auto;
box-shadow: 0px 0 10px #000;
-webkit-box-shadow: 0px 0 10px #000;
-moz-box-shadow: 0px 0 10px #000;
z-index: 1;
}
#footer {
width: 100%;
height: 50px;
position: absolute;
margin-top:20px;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 2
}
Ich hoffe ihr könnt mir helfen.
Gruß
Critone
|
|
|
|
12/17/2014, 19:53
|
#2
|
elite*gold: 2778
Join Date: Feb 2012
Posts: 3,527
Received Thanks: 1,044
|
Wenn du das Menü einfach in der Mitte haben willst, dann sollte es bei dir mit text-aligne: center; funktionieren.
|
|
|
|
|
12/17/2014, 20:16
|
#3
|
elite*gold: 149
Join Date: Feb 2010
Posts: 1,298
Received Thanks: 346
|
Quote:
Originally Posted by Mr.Tr33
Wenn du das Menü einfach in der Mitte haben willst, dann sollte es bei dir mit text-aligne: center; funktionieren.
|
Das habe ich schon versucht. Wenn ich das bei #nav oder #nav ul sage, bewirkt es nichts.
|
|
|
|
|
12/17/2014, 20:55
|
#4
|
elite*gold: 0
Join Date: Jun 2010
Posts: 3,406
Received Thanks: 2,024
|
Gibt es einen speziellen Grund dass du Position absolute und fixes benutzt?
|
|
|
|
|
12/17/2014, 21:45
|
#5
|
elite*gold: 149
Join Date: Feb 2010
Posts: 1,298
Received Thanks: 346
|
Fixed weil ich das Menü halt oben haben will und es mit scrollen soll.
Und absolute weil ich es irgendwie nur so hinbekommen habe 
|
|
|
|
|
12/18/2014, 18:47
|
#6
|
elite*gold: 50
Join Date: Sep 2012
Posts: 3,841
Received Thanks: 1,462
|
float: left;
|
|
|
|
|
12/18/2014, 20:55
|
#7
|
elite*gold: 149
Join Date: Feb 2010
Posts: 1,298
Received Thanks: 346
|
Quote:
Originally Posted by »FlutterShy™
float: left;
|
Damit willst du mir bestimmt sagen das ich clear verwenden muss. Leider habe ich das mit diesem clear, bis heute, nicht wirklich verstanden 
|
|
|
|
|
12/19/2014, 00:07
|
#8
|
elite*gold: 50
Join Date: Sep 2012
Posts: 3,841
Received Thanks: 1,462
|
nein ich möchte dir damit zeigen das du die elemente links ausrichtest und nicht mittig
|
|
|
|
|
01/02/2015, 16:06
|
#9
|
elite*gold: 149
Join Date: Feb 2010
Posts: 1,298
Received Thanks: 346
|
Quote:
Originally Posted by »FlutterShy™
nein ich möchte dir damit zeigen das du die elemente links ausrichtest und nicht mittig
|
die <li> Elemente sollen ja auch nebeneinander ausgerichtet sein. Oder geht das auch anders als mit float: left?
Nur die gesamte Navigation soll mittig vom Browser sein.
|
|
|
|
|
01/03/2015, 23:25
|
#10
|
elite*gold: 36
Join Date: Dec 2008
Posts: 1,387
Received Thanks: 270
|
margin: 0 auto;
oder
left: 50%;
Schon ausprobiert?
|
|
|
|
|
01/04/2015, 22:51
|
#11
|
elite*gold: 12
Join Date: Feb 2014
Posts: 877
Received Thanks: 272
|
Quote:
Originally Posted by c1rca12
margin: 0 auto;
oder
left: 50%;
Schon ausprobiert?
|
Alles unter 100% ist gefährlich für die Weboptimierung, also bitte davon absehen!
|
|
|
|
 |
Similar Threads
|
Problem mit FapCF Menü
08/25/2014 - CrossFire - 19 Replies
Hallo .com, ich habe folgendes Problem:
Ich bekomme beim neuen FapCF Hack kein Menü, mache alles wie beschrieben, bei einem Freund funktioniert es auch so, nur bei mir erscheint kein Menü.
Framework 4.5 Vorhanden
Wenn jemand weiß wie ich das behebe, wäre ich über Hilfe erfreut :)
|
Homepage Menü Problem
08/18/2014 - Web Development - 10 Replies
Hallo habe eine Frage,
Hier der Fehler
http://i.epvpimg.com/Gl4gc.png
Das kommt dann: das scrollbare:
http://i.epvpimg.com/OrTYe.png
|
[CSS, HTML] Menü - Problem
09/08/2013 - Web Development - 5 Replies
Hallo,
folgender 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" />
|
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...
|
Problem mit D3D Menü Hack =(!?
01/10/2011 - General Coding - 8 Replies
Hallo leute ich bin grad dabei mir ein Menü Hack zu machen.
Ich bekomm aber diesen fehler:
1>LINK : fatal error LNK1104: Datei "D3DX9.LIB" kann nicht geöffnet werden.
|
All times are GMT +1. The time now is 02:53.
|
|
