Ergebnis 1 bis 5 von 5

Thema: CSS - Kopfberreich

  1. #1
    HTML Newbie
    Registriert seit
    23.07.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS - Kopfberreich

    Hallo,die Frage bezieht sich auf den Kopfberreich der Webseite. Mein Wunsch wäre eine durchgehende Leiste von ganz links nach ganz rechts in der Mitte jedoch ein Logo, meine Idee wäre den linken und rechten Teil vom Logo jedoch in zwei div-Tags zu trennen, wodurch ich dann leichter datum und social icons einfügen kann.In einer Vorlage sieht das dann so aus: s3eycsez.jpg

    unser Code sieht bisher so aus:

    <!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=utf-8" />
    <title>MineSTARM | Blog</title>
    <link href="Webseite/Blog/style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="Webseite/Bilder/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="Webseite/dhtml.js"></script>
    </head>


    <body>
    <!-- KOPFZEILE -->
    <div id="kopfzeile">
    <div id="b1">
    </div>
    <div id="b2">
    </div>
    <div id="logo">
    </div>
    </div>
    </body>
    </html>

    CSS:

    #kopfzeile {
    background-color:#666;
    }


    #b1 {
    background-color:#3A3A3A;
    width:50%;
    float:left;
    height:40px;
    z-index:1;
    }


    #b2 {
    width:50%;
    float:left;
    background-color:#3A3A5C;
    height:40px;
    z-index:1;
    }


    #logo {
    width:110px;
    height:110px;
    clear:both;
    background-color:#090;
    }



    Ich habe schon viel rumprobiert bin aber nie so richtig auf eine perfekte lösung gekommen, hätte jemand einen Vorschlag bzw. wäre es vlt doch etwas geschickter die leiste durchgehend in ein div-tag zu packen??MfG Rene1803


    PS: Ich weiß nicht warum aber über HTML oder CODE wird der Code falsch angezeigt...
    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 Rene1803 (23.07.2013 um 12:04 Uhr) Grund: Code falsch angezeigt

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: CSS - Kopfberreich

    Dein Element mit der ID Kopfzeile benötigt solange es sich um ein Blockelemt handelt weder ein float:left noch ein z-index. Blockelemente nehmen von Haus aus die gesamte Breite des zur Verfügung stehenden Darstellungsbereiches ein.
    Du benötigst also für deine Kopfzeile lediglich eine Höhe, mehr nicht.
    Innerhalb deiner Kopfzeile schiebst du dann das Logo mit float:left nach Links. Um die Icons rechts anzuordnen, umgibst du die Icons auch mit einem Blockelement und schiebst dieses mit float:right nach links. Somit hast du dann das gewünschte Ergebnis.

    Z-Index braucht man nur wenn die Elemente aus ihrem normalen Fluss herausgenommen werden sollen und dann positioniert werden sollen. Dazu ist aber Kenntnis über das Boxmodell nötig.
    http://www.mediaevent.de/css/position-zindex.html

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    23.07.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Beitrag AW: CSS - Kopfberreich

    Leider kriege ich aus deinem letzen Post keine Hilfe heraus, ich verstehe das nicht so ganz, Das Element mit der ID Kopfzeile hat hier jedeglich eine background-color zum erkennen des Kopfberreichs und ist nur als übergeordnetes element erstellt, theoretisch hätte ich es wahrscheinlich ganz weg lassen können.

    Der oben gepostete Code beinhaltet eher nur eigenschaften zwischen dem rumprobieren, nach ein wenig rumprobieren bin ich auf folgendes gekommen:

    Das div-Tag "logo" unter dem div-Tag "b1" unterordnen und über css an die richtige position bringen:

    Code:
    #kopfzeile {    
        background-color:#666;
        height:300px;
    }
    
    
    #b1 {
        background-color:#3A3A3A;
        width:50%;
        float:left;
        height:40px;
    }
    
    
    #b2 {
        width:50%;
        float:left;
        background-color:#3A3A5C;
        height:40px;
    }
    
    
    #logo {
        width:110px;
        height:110px;
        float:right;
        background-color:#090;
        margin-right:-55px;
    }
    so jetzt bleibt nur noch die lösung von folgendem wie kriege ich das hin dass das div-Tag "b2" das "logo" nicht mehr überdeckt: Unbenannt.jpg

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: CSS - Kopfberreich

    Bitte stelle deine Seite online und verlinke sie hier im Forum. Wenn du über keinen Webspace verfügst kannst du einen der vielen Free Webspace Anbieter über die Suchmaschine deines Vertrauens finden.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    23.07.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS - Kopfberreich

    Ja leider habe ich jetzt die Version aus Post Nummer 3 nicht gespeichert und bin nach meherem rumprobieren auf folgende Lösung gekommen:

    ein div-tag mit fester breite (980px) indem ich dann mit fester größe alle weiteren leisten etc. fest setzen kann und im hintergrund ein durchgehendes div tag erstellt dass dann mein oben genannten wunsch erfüllt:

    Im Webspace sieht die Seite dann so aus: Klick mich

    MfG Rene

Stichworte

Berechtigungen

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