Ergebnis 1 bis 6 von 6

Thema: Xhtml Css Problem mit Breitenangabe

  1. #1
    Teeny Avatar von $mysql=
    Registriert seit
    06.06.2010
    Alter
    10
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Ausrichtung mit Breitenangabe klappt nicht

    Ich möchte das des Layout überall verfügbar is:

    Das Content Div sitzt nicht rechts von der steuerung, das sollte gerne so sein. Auch mit float: right oder anderen Breitenangaben erziele ich nicht den gewünschten Effekt

    HTML-Code:
    * {margin: 0; padding: 0;}
    body {
    color: #fff;
    background: #627f7d;
    font-size: 12px;
    font-family: arial, sans-serif, verdana;
    }
    div#head {
    height: 150px;
    background: url(img/head.jpg) no-repeat;
    }
    #head h1 {
    font-family: calibri;
    color: #c0c0c0;
    text-align: right;
    margin: 30px 30px 0 0;
    }
    #head h2 {
    font-family: arial;
    color: #c0c0c0;
    text-align: right;
    text-decoration: underline;
    margin: 30px 30px 0 0;
    }
    ul#steuerung {
    width: 100px;
    float: left;
    margin: 50px 0 0 5%;
    padding: 5px 0;
    line-height: 28px;
    list-style-type: none;
    }
    ul#steuerung li a {
    width: 100%;
    color: #c0c0c0;
    background: #000;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 5px;
    }
    ul#steuerung li a:hover {
    border-left: 20px solid #000;
    color: #000;
    background: #387b74;
    text-decoration: underline;
    }
    div#content {
    width: 20%;
    background: #000;
    float: left;
    margin: 4em .8em 0 4em;
    padding: 20px;
    }
    ul#footer {
    width: 100%;
    height: 30px;
    color: #000;
    text-align: center;
    clear: both;
    margin: 35px 0 0 0;
    list-style-type: none;
    line-height: 20px;
    }
    ul#footer li {
    display: inline;
    }
    ul#footer li a {
    color: #000;
    padding: 3px;
    text-decoration: underline;
    border-right: 1px dotted #000;
    }
    ul#footer li a:hover {
    text-decoration: none;
    }
    ul#footer li a.noborder {
    border: none;
    }
     

    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" xml:lang="de" lang="de">
    <head>
        <title>Startseite - http://www.domain.info - Kurzhalten?</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
        <link href="css.css" type="text/css" rel="stylesheet" />
        <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    </head>
    <body>
        <div id="head">
        <h1>Seitenname</h1>
            <h2>Kurze Überschrift</h2>
        </div>
     
        <ul id="steuerung">
            <li><a href="#index.php">Startseite</a></li>
            <li><a href="#">Testseite1</a></li>
        </ul>
     
        <div id="content">
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
        <ul id="footer">
            <li><?php echo date('Y'); ?>&copy;Webseitenname</li>
            <li><a href="#">Informationen</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Impressum</a></li>
         </ul>          
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von $mysql= (13.06.2010 um 22:31 Uhr) Grund: Quelltext aktualisiert in Bezug auf aktuellsten Beitrag!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Xhtml Css Problem mit Breitenangabe

    Das als Link zu sehen wäre einfacher. Seltsam erscheint mir jedoch bei Dir diese Angabe beim #content:

    Code:
    min-width: 20%;
    20% von was? Normalerweise gibt das als "20 Prozent vom umliegenden Element" - das wäre body, aber der hat keine Breite. Was passiert wenn Du das weglässt?

    Und diese margins im selben Element finde ich auch merkwürdig. 4em nach links - wieviel soll das sein? em ist eine relative Angabe.

  3. #3
    Teeny
    Themenstarter
    Avatar von $mysql=
    Registriert seit
    06.06.2010
    Alter
    10
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Xhtml Css Problem mit Breitenangabe

    habe nun alle em Angaben in margin und padding raus und durch pixel ersetzt. Auch die Breitenangabe des #contents ist raus. Nun springt das Content Fenster auch unter die Navigation und nimmt die gesamte Breite ein

    Seite befindet sich noch in lokaler Entwicklung
    Geändert von $mysql= (12.06.2010 um 22:32 Uhr)

  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Xhtml Css Problem mit Breitenangabe

    Wenn Du floatest musst Du auch eine Breite angeben.

    Dein Problem scheint aber zu sein, dass Du einen Contentbereich hast der die ganze Breite abzüglich der Breite der Navigation haben soll. Für den Fall wäre float evtl. auch ungeeignet. Vielleicht solltest Du die Navigation (so unschön es auch ist) absolut positionieren und dem Contentbereich (ebenfalls ohne float) einen padding von der Breite der Navigation geben. Wäre zumindest spontan meine Idee.

  5. #5
    Teeny
    Themenstarter
    Avatar von $mysql=
    Registriert seit
    06.06.2010
    Alter
    10
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Xhtml Css Problem mit Breitenangabe

    was mich nur wundert, warum kann ich nicht beides floaten(steuerung, content) und die breitenangaben 15%(steuerung) und 85%(content) ohne margin, padding-werte setzen. Das sollte logischerweise doch das gewünschte ergebnis erzielen, nur hauts nicht hin. Ich versuche nochmal ein divcontainer drumrum zu setzen, vielleicht klappt das ja so...


    EDIT23:50Uhr
    Rahmen mit width: 100%; klappt nicht, die unschöne Lösung lasse ich mal aussen vor. Weiß jemand noch eine Idee?
    Geändert von $mysql= (13.06.2010 um 00:51 Uhr)

  6. #6
    Teeny
    Themenstarter
    Avatar von $mysql=
    Registriert seit
    06.06.2010
    Alter
    10
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Xhtml Css Problem mit Breitenangabe

    nun habe ich alle möglichkeiten durch, bester ausgangsstand ist noch immer der code im ersten post. Mein Ziel ist folgendermaßen:

    body 100% des Bildschirms
    head 100% des Bildschirms(bild ist 3500px breit)
    navi_links 100px breit
    content_rechts rest des bildschrims abzüglich der 100px
    footer 100% des bildschirms

    wenn ich aber navi_links und content_rechts float: left; gebe und footer clear: both; bricht der content bei auflösungsreduzierung trotzdem um. muss doch zu schaffen sein

    EDIT19:10Uhr: Ein Problem was ausserdem noch besteht, in meinem Editor (Webtocon Scriptly) zeigt er es anders an als wenn ich es auf meinem Server hochlade und im FF und IE anschaue
    Geändert von $mysql= (13.06.2010 um 20:11 Uhr)

Ähnliche Themen

  1. Breitenangabe in px oder em?
    Von #matthias im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 02.11.2009, 18:57
  2. Problem beim validieren XHTML
    Von andyhot im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 09.10.2008, 15:02
  3. Xhtml und img Problem
    Von im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.05.2008, 13:49
  4. xhtml 1.0 oder xhtml 1.1?
    Von DarkSyranus im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 05.08.2006, 21:48
  5. ich und xhtml....
    Von dr.zoidberg im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.02.2006, 14:25

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •