Frage zur Positionierung und Einbettung von Bildern und Elementen im Header

wotan100 · 18.06.2011

Hallo! Ich bins schon wieder! ;-)
Also jetzt hab ich wirklich mal ne knackige Frage! Für mich halt!*g
Ich weiß ich will hoch hinaus, aber ich habe gedacht fragen kostet ja bekanntlich nichts! ;-)
Also ein bisschen Css- Grundverständnis ist da z.B. einfachere Seitenaufbau mit div Containern mit fixen Breiten oder floats. Jedoch umso mehr Images(.png) ich verwende desto schwieriger und stümperhafter wirds alles so zu positionieren wie ich will.

So und jetzt zur eigentlichen Frage:
Wie schafft man es bei einem Header von 100% breite Images bzw. Logo, Suche und ggf. Navi so perfekt einzubetten und immer geanu mittig über dem inhalt div zu positionieren?
http://de.ign.com/

Der Header ist doch ein Image oder? Warum gibt es hier kein repeat-x?
Wie schaffen sie se das Ign Logo so einzubetten das es beim Großziehen oder Kleinerschieben des Browsers nicht verschoben wird?
Wie schaffen sie es mehrere Elemente aud gleicher höhe zu positionieren ohne dass diese beim Verkeinern des Browsers ineinander fallen?

Ich weiß dass war jetzt wieder viel aufeinmal, aber es interessiert mich brennend!

Mfg Wotan!!!

kyle66 · 21.06.2011

AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im Header

Hallo,

zu Frage 1:
-Der Header ist 100% breit.
-Drin ist ein Div mit fester Breite 980px und margin: 0 auto; Das bewirkt, dass dieses DIV immer zentriert wird. Und in diesem kannst du dann deine Element positionieren.

zu Frage 2:
Es gibt ein DIV mit einem Verlauf (dunkles rot oben, helles rot unten), hier gibt's auch ein repeat-x.
Die Grafik +Logo ist in einem inneren DIV und wird natürlich nicht wiederholt.
Zusätzlich ist sie noch (in einem relativ positionierten DIV) absolut positioniert mit einem negativen linken Abstand, so dass sie nach links gezogen wird.

zu Frage 3:
Mit der fest angegebenen Breite von 980px; Theoretisch wäre natürlich auch eine min-width denkbar.

Grüße
kyle

snukz · 21.06.2011

AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im Header

wie schon von meinem Vorgänger richtig beantwortet liegt die Kunst in den 100% Breite und der festen Breite des divs.
Habe selbst erst vor kurzem eine ähnliche Seite gemacht, in der ich einen zentrierten Header mit eingebundenem Logo habe.
Jedoch habe ich dies mit dem css-Befehl "background-image" gelöst.
Bei meiner Seite kam allerdings die schwierigkeit hinzu, dass mein Header und der Hintergrund das gleiche Muster hatten und diese ineinander übergehen sollten.
hier der Link:

hubspe · 22.06.2011

AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im Header

Moin,

so schwierig ist das nicht.

body bekommt den roten Balken als HG-Grafik (2500xca.130px mit center top positioniert).
Alles andere steckt z.B. in einem div#wrapper der horizontal zentriert ist.
Beim header ist der BG transparent. Alles andere wird im header mit float usw. angeordnet.

edit. @wotan100 wenn ich so lese wie du schreibst scheinst du mir ein Kandidat zum Studium von Little Boxes zu sein.

wotan100 · 22.06.2011

AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im Header

Danke euch allen!
Hört sich für mich trotzdem nicht so einfach an. *g
Werd mir das am Nachmittag alles nochmal genauer ansehen

Danke Hupse!

edit. @wotan100 wenn ich so lese wie du schreibst scheinst du mir ein Kandidat zum Studium von Little Boxes zu sein.

auch das werd ich mir ansehen!

Danach zeig ich euch meine Stümperlösung die ich bis jetzt gebaut hab!*g

LG

wotan100 · 24.06.2011

AW: Frage zur Positionierung und Einbettung von Bildern und Elementen im Header

Hey!
Also ich hab des so probiert:

Code:

[B]<!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>Untitled Document</title>

<style type="text/css">
body{

    margin:0 auto;
    background:#666;
    background::#999;
    }
    #container_gr
    {
        margin:0px auto;
        width:1300px;
        min-height:1024px;
        background:#CCC;
    }
    #container_kl
    {
        width:60%;
        margin: 0px auto;
        position:relative;
        min-height:600px;
        background:#FF3;
    }
    #header_gr{
        width:100%;
        height:120px;
        background:#F00;
    }
    #header_cn{
        width=100%;
        height:120px;
        background:#0C3;
    }
    #service {
          position: absolute;
        top: .25em;
        right: 1em;
        font-size: 80%;
    }
    #navi{
        width:780px;
        height:25px;
        margin:0 auto;
        vertical-align:middle;
    
        background:#333;
        color:#0F6;
    }
    #navi ul{
        margin:0px;
        padding:0px 0px 0px 50px;
        list-style-type:none;
    }
    #navi li{
        width:80px;
        float:left;
        margin-top:-5px;
        padding:0;
        text-align:center;
    }
    #navi a,
    
    
    #navi a:link,
    #navi a:visited
    {
        height:22px;
        display:block;
        text-decoration:none;
        color:#fff;
        padding:8px 0 0 0;
        vertical-align:middle;
        
    
    }
    #navi a:hover
    {
        height:25px;
        color:#0F9;
        font-size:16px;
    }

     #navi #aktuell1 a
     {
         font-size:16px;
         color:#FC6;
    
     }

    #logo{
        position:absolute;
        width:170px;
        height:140px;
        background:#C9C;
        float:left;
        margin-top:-120px;
        margin-left:-190px;
    }
    #navigation_video {
        margin-top:50px;
      float: left;
      width: 162px;

     
    }
    
</style>
</head>

<body>
<div id="header_gr">
       <div id="container_gr">
       <div id="header_cn"></div>
<div id="navigation_video">Videos:</div>
    
                
                    <div id="container_kl">
            
                        <div id="logo">logo</div>
                           
                                <div id="pic"></div>
                                    <div id="navi"> 
                                        <ul>
                                            <li><li id="aktuell1"><a href="#" ><span>Startseite</span></a></li>
                                            <li><a href="#" class="linkA"><span>Friends</span></a></li>
                                                     
                                                     
                                             <li><a href="#" class="linkA"><span>Videos</span></a></li>
                                            
                                        </ul>
                                       
                                    </div> 
                                    
                          </div>
    
</div>           
        </div>

        </body>
</body>
</html>[/B]

Ich weiß nicht wie unsauber es ist also bitte gebt mir feedback! ;-)
Ich weiß auch nicht wirklich was ich hier floaten soll oder besser gesagt wie?!
Das mit div#wrapper hab ich glaub ich mal gelesen.
Das ist ja wenn sich der Container im Viewport zusammenzieht oder ausdehnt aber nicht verschwindet oder?
Ich hoffe ich habs relativ richtig erkärt?!
Aber wie das funktioniert weiß ich auch nicht...
lg