Sponsor-Board.de

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]

Da fehlt ein [Link: Registrierung erforderlich] mit einer festen Breite Smile

Gruß Sysix

Das ist doch die .nav Klasse die hat eine feste breite "100%".

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

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)">&nbsp&nbsp&nbsp&nbsp<img src="bilder/back.gif" width="20" height="20"/></a>

    </li>

    <li>

        <A HREF="javascript:history.go(+1)">&nbsp&nbsp&nbsp&nbsp<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.

Ein Geniestreich,
es geht um ein CSS Problem.
Schaue über deinen Post.
Was fehlt?

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

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%".

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)

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

Bremengo

Sysix

Bremengo

ensky

Bremengo

Scharock

ensky

Scharock

Bonyamin

Synergy