Frame oder wie bekomme ich ein Fenster ?

[noxx2]

hallo,

versuche mich zz etwas im erstellen einer webseite. nun möchte ich gerne
auf meiner seite mittig ein fenster (800px) haben mit den webinfos. drumherum soll
nur eine hintergrundfarbe sichbar sein. leider weiss ich nicht wie man sowas erstellt oder
ggf nennt. geht das mit nem iframe?

hier mal ein bsp: http://energieberater-kroeger.de

 

[threadi]

Das geht mit CSS.

<div id="webinfos">Hier alles rein was in die Mitte soll</div>

#webinfos {
 margin: 0 auto;
 width: 800px;
}

Dadurch wird die 800 Pixel breite Box horizontal zentriert. Wenn Du es auch vertikal zentrieren willst, schau dir diese Seite an:
Horizontale und vertikale Zentrierung mit CSS

 

[noxx2]

danke. ich versuche es mal

Wenn Du es auch vertikal zentrieren willst

Nein, vertikal soll da nichts gemacht werden, kann unendlich lang werden. Hat das Kind auch einen Namen?

 

[threadi]

Welches Kind meinst Du?

 

[noxx2]

Das mit dem "Fenster", also das ich ggf danach googeln kann um mit ein
paar Beispiele anzugucken.

Gleich ne direkte Frage: Wie stelle ich Hintergrundfarben vom "Fenster" ein? Das "Fenster" soll weiss, ausserhalb hellgrau sein.

Edit:

ok, hintergrund habe ich gefunden, da reicht dann wohl
#webinfos { margin: 0 auto; width: 800px;background-color:#E0E0E0}

 

[noxx2]

nomal ich :)

ich versuch gerade in dem fenster 2 grafiken zu positionieren, bekomme es aber nicht so hin wie ich es möchte

<div style="position:relative; top:10px; left:15px"><p>Temperatur letzte 24 Stunden</p><img src="tempdaycomp.png"></div>
<div style="position:relative; top:10px; left:450px"><p>Regen letzte 24 Stunden</p><img src="rainday.png"></div>

Die beiden bilder sollen nebeneinander angezeigt werden. aber das rechte ist immer nach unten versetzt. auch position:absolute brachte
mich nicht weiter.

ich könnte das auch in einer tabelle machen, denke das ist aber nicht "sauber".

danke

 

[noxx2]

hier nochmal ein Bild wie es aussieht mit dem obrigen Code. Bekomme die Bilder nicht nebeneinander.

3 Bilder mit jeweils einer Textüberschrift



Edit: Bild leider etwas klein. Wurde beim upload verkleinert, keine Ahnung warum

gruss


Edit 2:

Hab die Bilder nun erstmal in eine Tabelle gemacht, bekomme es leider nur auf die
"unsaubere" Art hin.

Wenn einer mit sagen kann wie es richtig geht, wäre ich sehr dankbar.

 

[Trüffelkrieger]

float ist das Stichwort.

 

[noxx2]

damit hab ich ebenfalls probiert. aber da flog alles durcheinander.

 

[Trüffelkrieger]

Dann hast du etwas falsch gemacht, zeig doch mal den Code...

 

[noxx2]

habe ich gelöscht gegen die Tabelle, aber ich meine der sah so aus:

<div style="position:relative; top:10px;  left:15px; float:left"><p>Temperatur letzte 24 Stunden</p><img  src="tempdaycomp.png"></div>
<div style="position:relative; top:10px;  left:450px; float:left"><p>Regen letzte 24 Stunden</p><img  src="rainday.png"></div>

Die Bilder tempdaycomp.png und rainday.png sollen nebeneinander liegen. Dadrüber dann jeweils die Überschriften.

 

[Tronjer]

<div id="weisses_aussendiv">
    <div id="oben_mitte"></div>
    <div id="links_oben">
       <p class="content_head">....</p>
       <p class="content">....</p>
       <p class="content_sub">.....</p>
   </div>
   <div id="rechts_oben">
         // siehe oben
   </div>
   <div id="links_unten">
        // siehe oben
   </div>
   <div id="rechts_unten">
       // siehe oben
  </div>
</div>

So könnte die HTM-Struktur analog zu deinem Bild aussehen. Für das CSS gibst du dem Außen-DIV eine Breite, bei der nicht mehr als zwei DIVs nebeneinander passen. Die vier mittleren Containererhalten alle dieselbe Breite und Höhe sowie ein float:left. In diese Divs kannst du anschließend den Content schreiben.

Mit Tabellenlayout wird das nichts, und du solltest dir außerdem gleich angewöhnen, das CSS in den Head oder in eine separate Datei auszulagern.

 

[threadi]

Wer floatet muss auch clearen:
Firefox stellt Hintergrund nicht vollständig dar

Und auf die Position-Eigenschaft ebenso wie top und left kannst und solltest Du verzichten. Abstände bekommst Du mit margin hin.

Und verwende bitte Code-Tags wenn Du Quellcode im Forum zeigst.

 

[Tronjer]

Wer floatet muss auch clearen:
Firefox stellt Hintergrund nicht vollständig dar.

Ja und nein. Sauberer wäre es natürlich, mit einem clearfix auf dem letzten Element zu arbeiten. Aber wenn alles in einem Wrapper gepackt ist, kann man darauf notfalls verzichten. Das auf den Wrapper folgende Element wird ja nicht mehr gefloatet.