+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: CSS Menü verschiebt sich (/showthread.php?tid=49644)
CSS Menü verschiebt sich - Bremengo - 18.07.2014 07:48
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:
Code:
/* 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]
RE: CSS Menü verschiebt sich - Sysix - 18.07.2014 07:53
Da fehlt ein [Link: Registrierung erforderlich] mit einer festen Breite
Gruß Sysix
RE: CSS Menü verschiebt sich - Bremengo - 18.07.2014 08:06
Das ist doch die .nav Klasse die hat eine feste breite "100%".
RE: CSS Menü verschiebt sich - ensky - 18.07.2014 08:10
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
RE: CSS Menü verschiebt sich - Bremengo - 18.07.2014 08:30
Code:
<!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.
RE: CSS Menü verschiebt sich - Scharock - 18.07.2014 08:36
Ein Geniestreich,
es geht um ein CSS Problem.
Schaue über deinen Post.
Was fehlt?
RE: CSS Menü verschiebt sich - ensky - 18.07.2014 08:39
ensky schrieb:
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
RE: CSS Menü verschiebt sich - Scharock - 18.07.2014 09:18
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%".
RE: CSS Menü verschiebt sich - Bonyamin - 18.07.2014 10:53
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)
RE: CSS Menü verschiebt sich - Synergy - 19.07.2014 12:51
Wenn Du doch in der HTML
PHP-Code:
<div class="wrapper">
hast muss ja in der CSS auch eine Klasse definiert werden wie das schon hier erwähnt wurde.
PHP-Code:
.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 :-)