[CSS] Am header verankern

Dieses Thema im Forum "Webdesign" wurde erstellt von White_Angel, 1. Dezember 2010 .

Schlagworte:
  1. 1. Dezember 2010
    Am header verankern

    Hey^^

    ich hab grad son kleines problem und zwar möchte ich ein bild am header verankern,
    und zwar diese weißen abstracten dinger die am header hängen
    das sind einzelne bilddatein für rechts und links
    also so sollte es aussehen
    KLICK

    mein problem ist ich krieg das net so hin wie es sein soll,

    hier ist der jetzige code die id="dleft" is der block in dem das bild drin ist
    das float=left hab ich jetzt nur zum test gemacht da geht er nur zum äußersten rand...
    ich hab schon versucht ein div block in einem div block zu machen nur da hab ich das problem dass der header runter geschoben wird und die png über dem header zentriert ist.
    also es soll soll am header verankert werden und die anderen blöcke unten nicht verschieben
    iwas übersehe ich anscheinend..

    kann mir da jmd schnell aushelfden ?

    Code:
    /*main.css*/

body {
 background-color: #091523;
 margin-top: 0px;
 color: black;
 font-weight: bold;
 background-image: url(bg.jpg);
 }
#test { height: 820px;
 width: 100px;
}
 

#header {
 height: 250px;
 width: 1000px;
 background-color: white;
 border: 2px black solid;
 border-bottom: 1px black solid;
 display: ;

 }
#dleft {
 width: 202px;
 height: 820px;
 float:left;
 
 }

#content {
 height: 500px;
 width: 1000px;
 background-color: white;
 border: 2px black solid;
 border-top: none;
 border-bottom: 1px black solid;
 }
 
#navi {
 height: 35px;
 width: 1000px;
 background-color: white;
 border: 2px black solid;
 border-top: none;
 border-bottom: 1px black solid;
 } 
 
#footer {
 height: 30px;
 width: 1000px;
 background-color: white;
 border: 2px black solid;
 border-top: none;
 } 
 
 
 a:hover {color: blue; text-decoration: none;}
 a:visited {color: blue;}

/* Content */

#content_a {
 height: 480px;
 width: 650px;
 background-color: white;
 border: 1px black solid;
 float: left;
 margin-top: 10px;
 margin-left: 20px;
 text-align: left;
 padding-left: 10px;
 }

#content_b {
 height: 480px;
 width: 250px;
 border: 1px black solid;
 float: right;
 margin-top: 10px;
 margin-right: 30px;
 text-align: left;
 padding-left: 10px;
 }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>&deg;Die Beste Seite auf der Welt&deg;</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<center><div id="dleft">
<img src="dleft.png" /></div>
 <div id="header"></div>
<div id="navi">
 <span style="float:left;margin-left:10px; margin-top:5px; word-spacing:10px;">
 <a href="index.html" alt="home" target="_self">Home</a>
 <a href="bla.html" alt="blubb" target="_self">Blablablubb</a>
 </span>
</div>
<div id="content">
<div id="content_a">
Hier steht der Inhalt
</div>
<div id="content_b">
Testinhalt
</div>

</div>

<div id="footer"></div>
</center>

</body>
</html>
     
    + Multi-Zitat Zitieren
  3. 1. Dezember 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Am header verankern

    Setz das ganze doch absolut dann verschiebt sich da schonmal nichts mehr nach unten dann arbeitest du mit left und right sollte eigentlich funktionieren.



    Beispiel:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
/*<![CDATA[*/
 /* PAGE/GENERAL */

 
 *
{
 margin: 0;
 padding: 0;
}

 html
 {
 margin:0 auto;
 height: 100%;
 }

 body
 {
 background-image: url(images/bg.png);
 color: #000;
 height:100%;
 
 }

.stage{
border:2px solid #FFF;
width:900px;
margin:0 auto;
height:100%;
}

.dleft{
postion:absoute;
background-image: url('images/left.png');
height:362px;
width:165px;
margin-left:-167px;

}


.dright{
postion:absolute;
background-image: url('images/right.png');
height:362px;
width:165px;
margin-left:1067px;

}

.header{
position:absolute;
top:0px;
text-align:center;
color:#FFF;
height:150px;
border-bottom:1px solid #FFF;
width:900px;
}
.content{
height;100%;
margin:0 auto;
color:#FFF;
text-align:center;
}



/*]]>*/
</style>
</head>
<body>

 
 <div class="stage">
 <div class="dleft">
 <div class="dright"></div>
 </div>
 
 <div class="header">HEADER</div>
 <div class="content">CONTENT</div>
 </div>
 
 
 
 
 
 
 
</body></html>
    Bild



    Edit:// Warte mal da läuft noch was falsch. Auflösung 800x600 und 1024x768 gehen nicht weil ich mit margin-left im Minusbereich arbeite. Ich schau es mir später wenn ich mehr Zeit habe nochmal an, falls sich noch keiner drum gekümmert hat.
     
    + Multi-Zitat Zitieren
  4. 1. Dezember 2010
    AW: Am header verankern

    mach um deine stage noch ein div und dem gibst du das bild mit links-rechts flügel.
    HTML:
    <div id="bg" style="background: transparent url(images/bg_komplett.png) center top no-repeat;">
 <div class="stage">
 <div class="header">HEADER</div>
 <div class="content">CONTENT</div>
 </div>
</div>
     
    + Multi-Zitat Zitieren
  5. 1. Dezember 2010
    AW: Am header verankern

    also ich komm da ziemlich durcheinander habs jetzt mit dem position absoulute versucht, bei meinem quellcode,
    naja der header verschwindet ganz und text-align: center wird im firefox au net ausgeführt
     
    + Multi-Zitat Zitieren
  6. 1. Dezember 2010
    AW: Am header verankern

    Das geht aber doch leider nicht, da wenn man dann die Seite vergrößert oder verkleinert der Hintergrund nicht mehr passend zu dem HTML-Gerüst sitzt?


    Hab mich jedenfalls nochmal neu versucht jetzt mit floats. Das müsste so gehen:

    mittig positioniert mit fixer Breite. Komplett 1024px und der contentbereich mit 600px.
    Kannst du alles nach belieben verändern. Nur der Inhalt darf nicht Größer sein als 1024px - (die Bilderbreite links und rechts).

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
/*<![CDATA[*/
 /* PAGE/GENERAL */

 
 *
 {
 margin: 0;
 padding: 0;
 }

 html
 {
 height: 100%;
 }

 body
 {
 text-align:center;
 background-image: url(images/bg.png);
 color: #FFF;
 height: 100%;
 
 }

 .stage{
 width:1024px;
 margin:0 auto;
 height:100%;
 }

 .dleft{
 float:left;
 background-image: url('images/left.png');
 height:362px;
 width:165px;
 }
 
 .dright{
 float:left;
 background-image: url('images/right.png');
 height:362px;
 width:165px;
 }
 
 .header{
 height:150px;
 border-bottom:1px solid #FFF;
 }

 
 
 .inhalt{
 float:left;
 width:600px;
 border:1px solid #FFF;
 height:100%;
 }
 
/*]]>*/
</style>
</head>
<body>

 <div class="stage">
 <div class="dleft"></div>
 <div class="inhalt">
 <div class="header">HEADER</div>
 <div class="content">Content</div>
 </div>
 <div class="dright"></div>
</div> 
 
 
 
</body></html>
     
    + Multi-Zitat Zitieren
  7. 2. Dezember 2010
    AW: Am header verankern

    na klar geht das.
    hast du das mal getestet?

    @White_Angel
    gib uns doch mal deine bilder für das gerüst.
     
    + Multi-Zitat Zitieren
  8. 2. Dezember 2010
    AW: Am header verankern

    Stimmt hast recht, jetzt geht es. Hab wohl gestern was übersehen als ich es ausprobiert hatte.


    Also hast du jetzt zwei Lösungen.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
 <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
 <title>Home</title> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <style type="text/css" media="all"> 
 /*<![CDATA[*/ 
 /* PAGE/GENERAL */ *

 { margin: 0; padding: 0; } 
 html { margin:0 auto; height: 100%; } 
 body { background-color:#000; color: #000; height:100%; } 
 .stage{ border:2px solid #FFF; width:1000px; margin:0 auto; height:100%; }
 .header{ text-align:center; color:#FFF; height:150px; border-bottom:1px solid #FFF; width:1000px; } 
 .content{ height;100%; margin:0 auto; color:#FFF; text-align:center; }
 /*]]>*/ 
 </style>

 </head>

 <body>

 
 <div id="bg" style="height:100%;background: transparent url(images/bg.jpg) center top no-repeat;"> 
 <div class="stage"> 
 <div class="header">HEADER</div> 
 <div class="content">CONTENT</div> 
 </div> 
 </div>

    Aber die Variante ist unsauberer und funktioniert erst ab einer Auflösung von 1280x1024
    Bei 800x600 und 1024x768 gibt es die Grafik an der Seite erst, wenn man rauszoomt.
     
    + Multi-Zitat Zitieren
  9. 2. Dezember 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Am header verankern

    so einfach geb ich mich nicht geschlagen

    @hacker5
    ein screenshot von dir
    {bild-down: https://www.xup.in/tn/2010_12/90226050.jpeg}

    du legst .stage mit 1024px breite fest (hell grauer bereich).
    scrollbalken bei 17''!

    der eigenliche inhalt von flügel-links, content und flügel-rechts ist 932px.
    mass ist ok. als max. mass nehm ich 990px.

    wenn ich ein hintergrundbild mit flügel-links und rechts habe, das eine breite von 932px hat,
    wiso sollte das bei 1024 unsauber sein.
    das mußt du mir bitte erklären.

    deine variante würde bei 800px übrigens auch nicht gehen und würde sogar eine scrollbalken machen.
    meine schneidet nur die grafik ab ohne scrollbalken.
     
    + Multi-Zitat Zitieren
  10. 2. Dezember 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Am header verankern

    Das meine erste Float-variante bei 800x600 Scrollbalken erzeugt ist mir klar und war sogar bewusst so gemacht. Da kaum noch einer mit der Auflösung rumsurft ist es eigentlich auch egal aber ich mags nicht wenn das Design zerstückelt wird und somit wichtige Informationen verloren gehen könnten z.B. wichtige Wiedererkennungswerte einer Firma verloren gehen.

    Dazu erzeugt die zweite Variante die ich gepostet habe mit deinem Vorschlag bei 800x600 bei mir auch Scrollbalken und die Grafiken werden abgeschnitten

    Wieso genau bei 1024x768 das Design abgeschnitten ist weiß ich selber nicht.
    Jedoch wenn du das Script mit der.stage und dem bg Div drum testet mit dem Bild.

    Dann musst du mal dein Browserfenster auf 1027x768 verkleinern. Ich sehe dann nur noch die Borderlines vom Grundgerüst.


    Im Grunde eigentlich auch egal, der TE auch wenn er sich nicht mehr zu Wort meldet hat ja jetzt mehrere Varianten wie er es machen kann ^^
     
    + Multi-Zitat Zitieren
  11. 3. Dezember 2010
    AW: Am header verankern

    also wenn der content bereich schon 1005px hat,
    dann passen die flügel natürlich nicht.
    naja seis drum, wir haben lösungen abgliefert und TE kann entscheiden.

    BW hast'e von mir

    viele grüße
     
    + Multi-Zitat Zitieren
  12. 3. Dezember 2010
    AW: Am header verankern

    Ahh da liegt das Problem also. Naja das war von mir ja nicht beeinflussbar, hab das Bild vom TE aus dem ersten Post genommen. Dann sollte der TE wohl den Content ein wenig verkleinern und dann wirds auch was mit der fehlerfreien Darstellung.


    Danke ^^
     
    + Multi-Zitat Zitieren
  13. 8. Dezember 2010
    AW: Am header verankern

    da bin ich wieder^^

    also soll das heißen, dass es jetzt bei allen varianten iwelche probs sind wenn die auflösung anders ist und keine perfekte lösung gibt? falls das so ist dann lass ich die flügel ganz raus, weil der content soll schon etwa so groß sein
    oder ich füge sie als bg hinten zentriert ein
     
    + Multi-Zitat Zitieren
  14. 9. Dezember 2010
    AW: Am header verankern

    deine seite ist 1005px breit.
    das ist aus meiner sicht totaler quatsch, da 990px das absolute max. mass für 17'' ist.
    dann noch links/rechts ne grafik, naja ich weiß nicht.
    entweder du packst die flügel mit in 990px und dein content wird kleiner,
    oder du verzichtest darauf.

    andere lösung wäre, mach dein layout auf 19''.
    bei diskusionen über "was ist standard monitor 17'' oder 19'' Zoll",
    klinke ich mich dann aus.

    beide varianten funktionieren.
    vorteil an hintergrundgrafik, es gibt so schnell kein scroller und css ist weniger, mehr nicht.
     
    + Multi-Zitat Zitieren
  15. 9. Dezember 2010
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: Am header verankern

    Jein. Also die variante mit den Floats von mir funktioniert in allen Auflösungen. Das einzige ist, dass 800x600 User einen Scrollbalken bekommen. Was aber nicht weiterhin schlimm ist oder stört. Dazu gibt es eigentlich keine 800x600 User.


    Die andere Variante läuft auch ansich "problemlos" aber den Rest hat dir onip ja schon erklärt.
    Würde es an deiner Stelle ggf. an 17" oder 19" anpassen und die zweite Methode mit dem Hintergrundbild nehmen.
     
    + Multi-Zitat Zitieren
  16. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten