Antworten zum Thema „hilfe bei div“

Pokerface · 01.03.2009

Hallo alle zusammen,
könnte mir bitte jemand helfen diese positionierung der div-container hinzubekommen?
http://i144.photobucket.com/albums/r176/Reptilica/strukturKopie.jpg
ich hab bis jetzt folgenden quelltext:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Sus-Kaiserau</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
  <body>
    <div align="center">
    
    <div style="min-width:966; min-height:197;">
    <img src="banner.png" width="966" height="197" />
    </div>
    <div style="min-width:218; min-height:100;">
    <img src="oben.png" width="218" height="100" />
    </div>
    <div style="min-width:748; height:100%; float:right; border:thin solid black;">
    
    </div>
   
    
    
    </div>
  </body>
</html>

und es wird so angezeigt:
http://i144.photobucket.com/albums/r176/Reptilica/screen2.jpg
könntet ihr mir bitte helfen die div-container wie auf dem entwurf zu positionieren?
ich wäre euch sehr dankbar

mfg

Der_Ritter · 01.03.2009

AW: hilfe bei div

Mal aus dem Kopf grad hingeschrieben - UNGETESTET !!!

Code:

<div id="container" style="float: left; width: 966px; height: auto;"> <!-- Der alles umschließt -->

<div id="header" style="width: 966px; height: 197 px; background-image: url(./banner.png); background-repeat: no-repeat;></div> <!-- Header Div -->

<div id="linke_spalte_container" style="float: left;" width: 218px; height: auto;"> <!-- Container für die drei Divs in der linken Spalte -->

<!-- Hier deine 3 Divs mit ensprechenden Angaben OHNE float und bei veränderbarer Höhe = height: auto; -->

</div> <!-- Container Linke Spalte Ende -->

<div id="hauptbereich" style="float: left; width: 748 px; height: auto;"></div> <!-- Hauptbereich -->

<br style="clear: left;" /> <!-- um das Floaten aufzuheben -->

</div> <!-- Ende der id container -->

Dies mal als Ansatz. Wie gesagt, mal eben aus dem Kopf geschrieben und nicht getestet. Vielleicht hilfts dir weiter.

Gruß
Der_Ritter

Pokerface · 01.03.2009

AW: hilfe bei div

danke für die mühe, aber irgendwie klappt das nicht.
ich habe zum testen "test test test" in den hauptbereich geschrieben und der text wurde oben links angezeigt.

mfg

Der_Ritter · 01.03.2009

AW: hilfe bei div

Naja, ein bisschen den Code betrachten und was draus machen war ja der Sinn. Dann hättest du auch die kleinen Fehlerchen gefunden, die sich eingeschlichen haben.
Aber da du offenbar ne fertige Lösung gebacken haben willst und ich heute nen guten Tag habe, mach mal Copy Past vom Quelltext - dann klappt's auch mit dem Nachbarn.
Was du noch machen kannst, ist ein Div um den Linke Spalten Container und den Hauptbereich. Diesen als Wrapper, der dann z.B. ne Hintergrundgrafik oder eine Hintergrundfarbe mit im Hauptbereich runterzieht. aber das darfst du dan selber noch lösen

Hier nun der Ansatz für dein Layout. Kopieren und glücklich sein:

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>
</head>

<body>
<div id="container" style="float: left; width: 966px; height: auto;"> <!-- Der alles umschließt -->

<div id="header" style="width: 966px; height: 197px; background-color: #CC0033;">HEADER</div> <!-- Header Div -->

<div id="linke_spalte_container" style="float: left; width: 218px; height: auto; background-color: #993300"> <!-- Container für die drei Divs in der linken Spalte -->

LINKE SPALTE CONTAINER
<div id="blockoben" style="width: 218px; height: 100px; background-color:#FFFF33">OBEN</div>
<div id="blockmitte" style="width: 218px; height: 300px; background-color:#003399">MITTE<br />HIER DANN HEIGHT IN AUTO AENDERN !!!</div>
<div id="block unten" style="width: 218px; height: 150px; background-color:#9900CC">REST REST</div>

</div> <!-- Container Linke Spalte Ende -->

<div id="hauptbereich" style=" width: 748 px; height: auto; background-color:#00FF33;">HAUPTBEREICH<br />HAUPTBEREICH<br />HAUPTBEREICH<br />HAUPTBEREICH<br />HAUPTBEREICH<br /> </div> 
<!-- Hauptbereich -->

<br style="clear: left;" /> <!-- um das Floaten aufzuheben -->

</div> <!-- Ende der id container -->
</body>
</html>

Sieht dann so --> aus.

Gruß
Der_Ritter

Pokerface · 01.03.2009

AW: hilfe bei div

danke, ich bin eigentlich nur für die gestaltung der seite verantwortlich (deshalb kenn ich mich nich so aus), aber da sie auf tabellenbasis aufgebaut war, gab es probleme.

mfg

Der_Ritter · 01.03.2009

AW: hilfe bei div

In diesem Falle musst du dir zumindest Grundkenntnisse in CSS-Layout aneignen, denn der vorgegebene Quellcode ist ja nur das Grundgerüst. Auf kurz oder lang wirst du Layoutprobleme bekommen, wenn du nicht weißt, wie das funktioniert, und wo du ansetzen musst. Ohne CSS Kenntnisse wirst du die Seite vermutlich nicht fertig stellen können. Und CSS-Layout in der seite ist ohnehin nicht das Gelbe vom Ei, da man Inhalt und Layout über diese Technik trennen möchte. Deswegen werden CSS-Befehle in der Regel in eine extra CSS-Datei gepackt und in die Seite über einen Eintrag im HEAD-Bereich eingebunden.

Gruß
Der_Ritter