XHTMLforum - Habe ein Problem mit einer Breitenangabe

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Habe ein Problem mit einer Breitenangabe (http://xhtmlforum.de/showthread.php?t=54009)

Habe ein Problem mit einer Breitenangabe

Hallo und schönen Vormittag zusammen!

Ich will gar nicht lange drum rum quatschen - ich habe ein Problem mit folgendem CSS Layout:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Unbenanntes Dokument</title>

<link href="test.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

  <div id="header">

    <div id="logo">Logo</div>

    <div id="extranav">

      <div id="contact">Kontakt</div>

      <div id="language">

        <ul>

          <li><a href="#">Deutsch</a></li>

          <li><a href="#">English</a></li>

        </ul>

      </div>

      <div id="login">Login</div>

    </div>

    <div id="mainnav">

      <ul>

        <li><a href="#">Main01</a></li>

        <li><a href="#">Main02</a></li>

      </ul>

    </div>

  </div>

</div>

</body>

</html>

Hier das CSS dazu

Code:

* {

        margin: 0px;

        padding: 0px;

}



html {

        font-size: 100%;

}



body {

        font: 0.689em Verdana, Arial, Helvetica, sans-serif;

        background: #CCCCCC;

        background-image: url(site-bg.gif);

        color: #000000;

}



h1 {

        font-size: 1.8em;

}



h2 {

        font-size: 1.2em;

}



/* ID's */

#container {

        position: relative;

        width: 900px;

        /* -- centers the container element */

        margin-left: auto;

        margin-right: auto;

        color: #000000;

}



#blackborder {

        background: transparent;

        color: #000000;

        border: 1px #666666 solid;

}



#header {

        position: relative;

        height: 116px;

        background: #FFFFFF;

        color: #000000;

}



#logo {

        float: left;

        width: 210px;

        height: 116px;

        background: #0000FF;

        background-image: url(logo.gif);

        color: #FFFFFF;

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- main navigation on top */

#mainnav {

        font-weight: bold;

        position: absolute;

        left: 229px;

        bottom: 29px;

        margin: 0px;

        padding: 0px;

}



#mainnav ul {

        list-style-type: none;

}



#mainnav li {

        display: inline;

}



#mainnav a {

        padding: 0 4px;

}



#mainnav a:link, #mainnav a:visited {

        color: #69696b;

        text-decoration: none;

}



#mainnav a:hover {

        color: #00763b;

}



#mainnav li.pressed {

        color: #00763b;

        padding: 0 5px;

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- extra navigation on top */

#extranav {

        display: block;

        overflow: hidden;

        color: #000000;

}



#extranav ul {

        list-style-type: none;

}



#extranav li {

        display: inline;

}



#extranav a {

        padding: 0 4px;

}



#extranav a:link, #extranav a:visited {

        color: #69696b;

        text-decoration: none;

}



#extranav a:hover {

        color: #00763b;

}



#extranav li.pressed {

        color: #00763b;

        padding: 0 5px;

}



#contact {

        float: left;

        padding: 10px;

        background: #FF6600;

}



#language {

        float: right;

        padding: 10px;

        background: #00FFFF;

        color: #FFFFFF;

}



#login {

        padding: 10px;

        color: #000000;

}

Leider schaffe ich es nicht, dass die 3 Spalten "Language", "Contact" und "Login" nicht nur so breit sind, wie's wirklich nötig ist. Die 3 Spalten werden immer über die ganze Breite von "Header" gezogen?!

Irgend welche Ideen?
Wäre euch sehr dankbar!

atmosfear

in welchem Browser?
Im IE7 und FF3 stimmts - die 3 DIV sind genauso breit wie der Inhalt (also nicht die ganze Header Breite - wobei welche Header Breite - der hat ja gar Keine).
Die Aufteilung wirkt ein wenig seltsam - aber naja gut - bist ja noch nicht fertig.
Vielleicht wäre es einfacher wenn Du auf einer Zeichnung aufzeigen könntest wie es aussehen soll.

Hallo!

Danke für die schnelle Antwort!
Also wenn ich die Seite im Firefox 3.0.3 betrachte, dann habe ich das Problem, dass der Language Bereich schön rechtsbündig ist, Kontakt aber links plaziert ist, und die Login-Spalte extrem breit wird (also den Rest einnimmt)
Alle 3 Spalten sollten aber rechtsbündig ausgerichtet sein, und nur so breit sein, wie auch der Inhalt ist...

Ich glaube du hast mich falsch verstanden!?
Warum ist die Aufteilung seltsam, das würd mich interessieren - man kann immer was dazu lernen!

EDIT:
Die Breite kommt vom Container, nicht vom Header, sorry...

DANKE
atmosfear

Bitte stell lauffähigen Code ein, oder besser noch einen Link zu deinem Problemfall (siehe Hinweise für Fragende).

Warum positionierst du die Navigation absolut?
Wozu brauchst du so viele Divs? Sie haben keine semantische Bedeutung und sollten nur eingesetzt werden wo es wirklich Sinn macht.

Hallo!

Erstens: Warum sollte der Code nicht lauffähig sein? Ok ich habe die html und body Tags nicht reinkopiert, aber jetzt auch gleich geändert.

Zweitens: Kannst du mir einen Tip geben, wie ich mit weniger divs auskomme? Ich brauche verschiedene Bereiche auf meiner Seite, die ich dann später mittels eines CMS ansprechen kann. Darum die divs, denke ich...

Drittens: Die Navigation muss an einer bestimmten Stelle stehen um dann später in die Headergrafik reinzupassen. Ich wüsste nicht, wie ich es ohne absolute Positionierung hinbringen sollte!?

DANKE!
atmosfear

Zitat:

Vielleicht wäre es einfacher wenn Du auf einer Zeichnung aufzeigen könntest wie es aussehen soll.

Das würde helfen Dich besser zu verstehen.
Also eine richtige Skizze - nicht Text Beschreibungen.
Dann können wir Dir auch eher sagen wie Du es aufbauen kannst.

Wenn Du beim #login ein float:left reinmachst dann bekommt er die Grösse des Inhalts.

Alles klar, hier die gewünschte Grafik:

http://x-cursion.de/faq/screenshot.gif

Gruß
atmosfear

Zitat:

Zitat von atmosfear (Beitrag 405692)

Erstens: Warum sollte der Code nicht lauffähig sein? Ok ich habe die html und body Tags nicht reinkopiert, aber jetzt auch gleich geändert.

Du hast es erfasst, lauffähig heißt, dass es per Copy&Paste funktionieren muss - ohne Bastelei.
Ich persönlich halte es immer noch für einen zu hohen Aufwand und schau mir deshalb nur Links an, aber evtl. reicht der Code anderen Helfern schon.

Zitat:

Zitat von atmosfear (Beitrag 405692)

Zweitens: Kannst du mir einen Tip geben, wie ich mit weniger divs auskomme? Ich brauche verschiedene Bereiche auf meiner Seite, die ich dann später mittels eines CMS ansprechen kann. Darum die divs, denke ich...

Die Divs um die Listen sind überflüssig, die Id kannst du der ul direkt geben. Falls du die Reihenfolge im Code ändern kannst/willst, kannst du dir auch #extranav sparen. #logo würde ich eher in eine h1 packen. #contact und #login sind Links?

Zitat:

Zitat von atmosfear (Beitrag 405692)

Drittens: Die Navigation muss an einer bestimmten Stelle stehen um dann später in die Headergrafik reinzupassen. Ich wüsste nicht, wie ich es ohne absolute Positionierung hinbringen sollte!?

Da reichen entsprechend Abstände aus.

Hallo nochmal,

also gut, soweit bin ich, ich weiss allerdings immer noch nicht, wie ich die Breite der 3 Spalten oben einschränken kann!?
Also die Breite der einzelnen Spalten passt schon, aber bekomme ich "Login" und "Kontakt" nach rechts?

@inta
Habe die absolute Positionierung nun rausgenommen und durch margins ersetzt. Klappt perfekt - hattest Recht...

http://x-cursion.de/faq/screenshot1.gif

Hier noch der aktuelle Code

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Unbenanntes Dokument</title>

<link href="uploads/tf/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

  <div id="header">

    <div id="logo">Logo</div>

    <div id="extranav">

      <div id="contact">

        <ul>

          <li><a href="#">Kontakt</a></li>

        </ul>

      </div>

      <div id="language">

        <ul>

          <li><a href="#">Deutsch</a></li>

          <li><a href="#">English</a></li>

        </ul>

      </div>

      <div id="login">

        <ul>

          <li><a href="#">Login</a></li>

        </ul>

      </div>

    </div>

    <div id="mainnav">

      <ul>

        <li><a href="#">Main01</a></li>

        <li><a href="#">Main02</a></li>

      </ul>

    </div>

  </div>

</body>

</html>

Und das Stylesheet

Code:

/*

* {

        margin: 0px;

        padding: 0px;

}



html {

        font-size: 100%;

}



body {

        font: 0.689em Verdana, Arial, Helvetica, sans-serif;

        background: #CCCCCC;

        background-image: url(site-bg.gif);

        color: #000000;

}



h1 {

        font-size: 1.8em;

}



h2 {

        font-size: 1.2em;

}



/* ID's */

#container {

        position: relative;

        width: 900px;

        /* -- centers the container element */

        margin-left: auto;

        margin-right: auto;

        color: #000000;

}



#header {

        position: relative;

        height: 116px;

        background: #FFFFFF;

        color: #000000;

}



#logo {

        float: left;

        width: 210px;

        height: 116px;

        background: #0000FF;

        background-image: url(logo.gif);

        color: #FFFFFF;

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- main navigation on top */

#mainnav {

        font-weight: bold;

        margin-top: 39px;

        margin-right: 0px;

        margin-bottom: 0px;

        margin-left: 229px;

        padding: 0px;

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- extra navigation on top */

#extranav {

        display: block;

        overflow: hidden;

        color: #000000;

        background-color: #9999FF;

}



#contact {

        float: left;

        padding: 10px;

        background: #FF6600;

}



#language {

        float: right;

        padding: 10px;

        background: #00FFFF;

        color: #FFFFFF;

}



#login {

        float: left;

        padding: 10px;

        color: #000000;

        background: #FFFF00;

}



/* ------------------------------------------------------------------------------------------------------- */

#imagepic_start {

        width: 900px;

        height: 294px;

        background-image: url(image_start.jpg);

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- main container (main navigation, content & news block) */

#main {

        clear: both;

        display: block;

        overflow: hidden;

        margin-top: 6px;

        border-top: 2px #D5D5D5 solid;

        background-color: #FFFFFF;

        color: #000000;

}



#left {

        float: left;

        width: 161px;         /* actually 209 (149 + 2 * padding) */

        margin-top: 20px;

        padding: 10px 24px;

        border-right: 1px #D5D5D5 solid;

        color: #69696b;

        font-weight: bold;

}



#content {

        margin: 0 0 0 209px;

        padding: 30px 24px;

        color: #69696b;

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- footer */

#footer {

        clear: both;

        margin-top: 6px;

        border-top: 2px #D5D5D5 solid;

        margin-bottom: 10px;

        padding: 10px;

        text-align: right;

        background-color: #FFFFFF;

}



/* ------------------------------------------------------------------------------------------------------- */

/* --- lists and links */

#mainnav ul, #left ul {

        list-style-type: none;

}



#mainnav li {

        display: inline;

}



#left li {

        display: block;

}



#mainnav a, #left a {

        padding: 0 4px;

}



#mainnav a:link, #mainnav a:visited, #left a:link, #left a:visited {

        color: #69696b;

        text-decoration: none;

}



#mainnav a:hover, #left a:hover {

        color: #00763b;

}



#mainnav li.pressed, #left li.pressed {

        color: #00763b;

        padding: 0 5px;

}



/* ------------------------------------------------------*/

#footer ul, #extranav ul, {

        list-style-type: none;

}



#footer li, #extranav li {

        display: inline;

}



#footer a, #extranav a {

        padding: 0 4px;

}



#footer a:link, #mainnav a:visited, #extranav a:link, #extranav a:visited {

        color: #69696b;

        text-decoration: underline;

}



#footer a:hover, #extranav a:hover {

        color: #00763b;

}



#footer li.pressed, #extranav li.pressed {

        color: #00763b;

        padding: 0 5px;

}

DANKE
atmosfear

Wiso machst Du immer noch ein DIV um das contact, language, login und mainnav?
Das geht auch ohne - direkt in das ul die ID reinmachen.
Und wenn Du sowiso nur 1 Link hast (z.B. Kontakt) dann kannst Du auch direkt das a nehmen und brauchst die Liste nicht (Liste = nur bei mehreren Links).
Die Liste ist z.B. sinnvoll bei den Sprachen (da kannst ja u.U. auch noch mehr geben als nur die 2 jetzt).