Header

Einklappen
X
Einklappen
 
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 template Weiter
  • #1

    Header

    Hallo zusammen,
    Ich will einen header, links mit dem bild header_left.png, mitte header_middle.png und rechts header_right.png.
    Nun hab ich das in Div's Versucht, aber irgendwie klappt das nicht.
    Die länge sollte 80% sein, also das bild header_middle.png kann repetiert werden.

    Ich habs mit dem Code Probiert:
    Code:
    <html>
<head>
<style type="text/css">
<!--
#header_middle {
	width:80%;
	height:77px;
	background:url(header_middle.png);
	}
#header_right {
	background:url(header_right.png);
	width:auto;
	height:77px;
	}
#header_left {
	background:url(header_left.png);
	width:auto;
	height:77px;
	float:left
	}
-->
</style>
</head>

<body>
<center>
<div id="header_left">
</div>
<div id="header_middle">
</div>
<div id="header_right">
</div>
</center
</body>
</html>
    Bücher für Programmierer
    Stichworte: -
  • #2
    Re: Header

    Original geschrieben von andygyr
    Nun hab ich das in Div's Versucht, aber irgendwie klappt das nicht.
    Die länge sollte 80% sein, also das bild header_middle.png kann repetiert werden.
    Wiederholen von Hintergrundbildern ist Voreinstellung - wenn du das also für #header_right nicht unterbindest, und width auf auto lässt, dann geht das Ding schon mal über die komplette Breite, und zeigt dort komplett sein gekacheltes Hintergrundbild.

    Da das mittlere Element nicht gefloatet ist, nimmt es auch nach wie vor eine eigene "Zeile" ein.

    Und ein leeres Element mit width:auto floaten zu lassen, dürfte auch kaum definierbare Ergebnisse bringen.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar

    • #3
      Naja... habs nun geschafft... Nur ein Problem hab ich noch, und zwar möchte ich de divs zentrieren...
      Also das der ganze Header Zentriert sitzt, und zwar im IE wie im Ff!
      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>
<style type="text/css">
<!--
#header_middle {
	width:80%;
	height:134px;
	background:url(header_middle.png);
	float:left;
	}
#header_right {
	background:url(header_right.png);
	width:40px;
	height:134px;
	background-repeat:no-repeat;
	float:left;
	}
#header_left {
	background:url(header_left.png);
	width:40px;
	height:134px;
	float:left;
	}
-->
</style>
</head>

<body>

<div id="header_left"></div>
<div id="header_middle"></div>
<div id="header_right"></div>

</body>
</html>
      Bücher für Programmierer

      Kommentar

      • #4
        wie wärs damit...

        PHP-Code:
        </head>

        <        body>

        <        div align="center">
        <        div id="header_left"></div>
        <        div id="header_middle"></div>
        <        div id="header_right"></div>
        </        div>

        </        body>
        </        html> 

        .... oder damit....

        PHP-Code:
        </head>

        <        body>

        <        center>
        <        div id="header_left"></div>
        <        div id="header_middle"></div>
        <        div id="header_right"></div>
        </        center>

        </        body>
        </        html> 
        ???

        Kommentar

        • #5
          Ne, das funtzt eben nicht!

          irgendwas mit margin-left muss es sein, ich bekomme es jedoch nie schön in die mitte!
          Bücher für Programmierer

          Kommentar

          • #6
            PHP-Code:
            div align="center">
            <            center> 
            pfui bäh, das tut man nicht mehr
            PHP-Code:
            margin: 0px auto; 
            allerderdings mußt du das mit einen neuen div umschließen.

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar

            • #7
              Ist aber immer noch nicht genau in der Mitte!!
              Bei mir jedenfalls nicht! http://andygyr.kilu.de/untitled-1.html
              Bücher für Programmierer

              Kommentar

              • #8
                Gib mal dem mittleren div 90% Breite.
                [FONT="Helvetica"]twitter.com/unset[/FONT]

                Shitstorm Podcast – Wöchentliches Auskotzen

                Kommentar

                • #9
                  Original geschrieben von unset
                  Gib mal dem mittleren div 90% Breite.
                  Besser...! Aber immer noch nicht ganz in der Mitte!
                  Wiso geht das eigendlich nicht? geht das wen ich die div's nicht in % angebe sondern in pixeln?
                  Bücher für Programmierer

                  Kommentar

                  • #10
                    ich zeig dir jetzt besser nicht was mein IE mit deinem testteil da macht denn dann würdestet du warscheinlich anfangen zu weinen.

                    der rechte div sitzt unter den anderen beiden.

                    probier mal noch zusätzlich

                    display:inline; so bekommste das block verhalten der DIVs unterbunden.

                    ansonsten

                    sind sie überall mittig ausgerichtet bei mir ^^
                    Bitte Beachten.
                    Foren-Regeln
                    Danke

                    Kommentar

                    • #11
                      Wiso geht das eigendlich nicht? geht das wen ich die div's nicht in % angebe sondern in pixeln?
                      bei festen pixelangaben geht das. wenn du mit prozenten arbeitest, ergibt sich die breite eines untergeordneten elements relativ zum übergeordneten

                      gruß
                      peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar

                      • #12
                        Hmmm... habs mal probiert: www.andygyr.kilu.de/untitled-1.html
                        Sieht das bei euch jetzt 'normal' aus?
                        Schaut euch auch den Quellcode an...
                        Bücher für Programmierer

                        Kommentar

                        • #13
                          Original geschrieben von andygyr
                          Hmmm... habs mal probiert: www.andygyr.kilu.de/untitled-1.html
                          Sieht das bei euch jetzt 'normal' aus?
                          Wenn es so aussehen soll, dass der rechte Rand jetzt unter den anderen beiden Elementen angezeigt wird, also wenn das das ist, was du als "normal" definierst - ja, sieht bei mir sowohl mit IE 7, Opera 9 und FF 1.5 "normal" aus ...
                          I don't believe in rebirth. Actually, I never did in my whole lives.

                          Kommentar

                          • #14
                            PHP-Code:
                            #center 
                            {
                                                           width: 80%;
                                                           margin:0px auto;
                                                            background-color: #f00;
                                                            height:134px;
                            } 
                            teste mal, da ist rechts noch zuviel platz. tipp: arbeite mit absoluten pixelangaben.

                            gruß
                            peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Kommentar

                            • #15
                              @wahsaga
                              Nein, es sollte leider nicht so aussehen, wie du es beschrieben hast.
                              Es sollte ein Normaler Header sein, der vorne und hinten mit den beiden abgerundeten teilen endet.

                              @Kroff
                              => http://andygyr.kilu.de/untitled-1.html

                              Ich glaube ich arbeite wirklich mit Pixeln ;D
                              Bücher für Programmierer

                              Kommentar

                              Vorherige 1 2 template Weiter
                              Lädt...
                              X