CSS Menü verschiebt sich
|
| Verfasser |
Nachricht |
|
Beiträge: 64
Bewertung: 1
Registriert seit: Aug 2012
Status:
offline
|
CSS Menü verschiebt sich
Guten Morgen,
wenn ich mein Browserfenster kleiner mache verschieben sich die Inhalte meiner Menüleiste. Ich habe schon alles ausprobier, weiss jemand einen Rat?
Danke im Voraus,
Sebastian.
CSS:
/* ANFANG NAVIGATION! */
@import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
margin: 0;
padding: 0;
}
.nav {
background: #232323;
height: 60px;
display: inline-block;
width: 100%;
margin: auto;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 16px;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 1px solid #2e2e2e;
font-family: Verdana;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
background-color: #2e2e2e;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
/* Search Box! */
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Verdana;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #02055e;
float: left;
box-sizing: border-box;
transition: all 0.15s;
margin-left: 32px;
position: fixed;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_button {
border: 0 none;
background: #02055e url(bilder/lupe.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
margin-left: 332px;
margin-top: 0px; /* -52px; ohne fixed! */
position:fixed;
}
/* End Search Box! */
/* Drop-Down! */
#options a{
border-left: 0 none;
}
#options>a {
background-image: url();
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
/* End Drop-Down! */
/* ENDE NAVIGATION! */
Hier ein Bild:
[Link: Registrierung erforderlich]
|
|
| 18.07.2014 07:48 |
|
|
Beiträge: 625
Bewertung: 7
Registriert seit: Aug 2010
Status:
offline
|
RE: CSS Menü verschiebt sich
|
|
| 18.07.2014 07:53 |
|
|
Beiträge: 64
Bewertung: 1
Registriert seit: Aug 2012
Status:
offline
|
RE: CSS Menü verschiebt sich
Das ist doch die .nav Klasse die hat eine feste breite "100%".
|
|
| 18.07.2014 08:06 |
|
|
Beiträge: 368
Bewertung: 22
Registriert seit: Jan 2014
Status:
offline
|
RE: CSS Menü verschiebt sich
100% ist eine variable Breite.
.nav nimmt immer 100% der Breite des übergeordneten Containers ein.
Hast du vielleicht einen Link damit wir dir besser helfen können?
lg.
Alex
[Link: Registrierung erforderlich]
"This is Linux land. In silent nights you can hear the Windows machines rebooting."
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]
|
|
| 18.07.2014 08:10 |
|
|
Beiträge: 64
Bewertung: 1
Registriert seit: Aug 2012
Status:
offline
|
RE: CSS Menü verschiebt sich
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CD-Verwaltung</title>
<link rel="stylesheet" type="text/css" href="nav.css">
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<ul class="nav">
<li id="settings">
<a href="#"><img src="bilder/logo.png" width="20" height="20"/><sup>CD-Verwaltung<sup>1.0</sup></sup></a>
</li>
<li>
<A HREF="javascript:history.go(-1)">    <img src="bilder/back.gif" width="20" height="20"/></a>
</li>
<li>
<A HREF="javascript:history.go(+1)">    <img src="bilder/forward.gif" width="20" height="20"/></a>
</li>
<li>
<a href="javascript:document.location.reload();" ONMOUSEOVER="window.status='Refresh'; return true" ONMOUSEOUT="window.status=''">
<img src="bilder/laden.png" width="60" height="60" border="0" /></a>
</li>
<li>
<a href="index.php"><img src="bilder/plus.png" width="24" height="24">Neue CD anlegen</img></a>
</li>
<li>
<a href="ausgabe.php?main"><img src="bilder/regal.png" width="24" height="24">Zur CD-Sammlung</img></a>
</li>
<li id="search">
<form name="suche" action="suche.php?main" method="post">
<input type="text" name="suche" id="search_text" placeholder="Suche Interpret/Titel"/>
<input type="submit" name="search_button" id="search_button" value=""></a>
</form>
</li>
</ul>
</div>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
<div id="footer">CD-Verwaltung 1.0 | Powered by Sebastian Koers</div>
</body>
</html>
Der Html-Code, der wrapper funktioniert nicht.
|
|
| 18.07.2014 08:30 |
|
|
Beiträge: 334
Bewertung: 4
Registriert seit: Sep 2010
Status:
offline
|
RE: CSS Menü verschiebt sich
Ein Geniestreich,
es geht um ein CSS Problem.
Schaue über deinen Post.
Was fehlt?
SponsorBoard
GEIZ - Geil Ein Idiot Zahlt
|
|
| 18.07.2014 08:36 |
|
|
Beiträge: 368
Bewertung: 22
Registriert seit: Jan 2014
Status:
offline
|
RE: CSS Menü verschiebt sich
Hast du vielleicht einen Link damit wir dir besser helfen können?
Anders kann ich dir nicht weiterhelfen.
Außerdem versuche deinen Code einheitlich zu schreiben.
BTW: Kennst du den Unterschied zwischen Klassen und IDs ?
lg.
Alex
[Link: Registrierung erforderlich]
"This is Linux land. In silent nights you can hear the Windows machines rebooting."
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]
|
|
| 18.07.2014 08:39 |
|
|
Beiträge: 334
Bewertung: 4
Registriert seit: Sep 2010
Status:
offline
|
RE: CSS Menü verschiebt sich
Option 1:
Finger von CSS lassen
Option 2:
CSS lernen
Option 3:
Das in dein CSS File einfügen
.wrapper {
width: 1900px;
}
Ich empfehle Option 1 oder 2
Zitat:
Da fehlt ein Wrapper mit einer festen Breite Smile
Das ist doch die .nav Klasse die hat eine feste breite "100%".
SponsorBoard
GEIZ - Geil Ein Idiot Zahlt
Dieser Beitrag wurde zuletzt bearbeitet: 18.07.2014 09:20 von Scharock.
|
|
| 18.07.2014 09:18 |
|
|
Beiträge: 583
Bewertung: 1
Registriert seit: Dec 2010
Status:
offline
|
RE: CSS Menü verschiebt sich
Und auch an der Stelle: Willst du nicht endlich richtig Hilfe annehmen? Oder willst du dich hier bei den Programmierern weiter unbeliebt machen. Täglich hast du ein neues Problem, was auf folgende Punkte hinweist:
1. Kein Interesse das zu lernen
2. Kein Bock auf Dokumentationen (hey wozu auch, du hast ja das Sponsor-Board, right?)
3. Unfähigkeit -> das hat nichts mehr mit Unwissen zu tun sorry.
So ich biete dir jetzt zum vierten Mal Hilfe an. Nimm sie an oder lass es einfach! (dazu gabs ja sogar schon PNs zwischen uns)
Mit freundlichen Grüßen
Bonyamin
############
|
|
| 18.07.2014 10:53 |
|
|
Beiträge: 844
Bewertung: 9
Registriert seit: Apr 2009
Status:
offline
|
RE: CSS Menü verschiebt sich
Wenn Du doch in der HTML
hast muss ja in der CSS auch eine Klasse definiert werden wie das schon hier erwähnt wurde.
.wrapper {
width: 1200px;
}
Es gibt hier viele die Dir die Hilfe anbieten und einen Link haben wollen. Poste doch einfach den Link von der betreffenden Homepage oder fragst für einen Freund :-)
Schaut mal rein @ [Link: Registrierung erforderlich]. KONTAKT @ [Link: Registrierung erforderlich].
Dieser Beitrag wurde zuletzt bearbeitet: 19.07.2014 12:51 von Synergy.
|
|
| 19.07.2014 12:51 |
|
|
