✔ Arbeiten ohne Frames mit einem Hintergrundbild 590*650px

[Maik]

Die Abstände zwischen den einzelnen DIVs kannst Du mit margin:0 und padding:0 abstellen.

Wenn Du zudem die linke Spalte als eigenes Element einrichten willst, dann probiere es über den Weg, wie ich ihn heute Morgen aufgezeichnet habe, oder arbeite mit der float-Eigenschaft, um ein zweispaltiges Layout zu realisieren.

 

[Kalma]

fett, das wusste ich noch nicht :-O


Und wie war das nu mit der linken Spalte :suspekt:

 

[Maik]

Etwas mehr Eigeninitiative darfst Du ruhig an den Tag legen, und mein Modell von heute Morgen nochmal in aller Ruhe anschauen

 

[Kalma]

Hey,

habe jetzt folgendes probiert:

<div class="wrapper"> 
	<div class="head"></div> 
		<div class="leftCol"><?php include "menu.php"; ?></div> 	
		<div class="content">
          <?php
          	 //haupt-seiten
             if (($_GET['section'] == "") OR ($_GET['section'] == "news"))
               { include "news.php"; }
             if ($_GET['section'] == "archive")
               { include "archive.php"; }
             if ($_GET['section'] == "about")
               { include "about.php"; }
             if ($_GET['section'] == "links")
               { include "links.php"; }
             if ($_GET['section'] == "referenzen")
               { include "referenzen.php"; }
             if ($_GET['section'] == "music")
               { include "music.php"; }
             if ($_GET['section'] == "gaestebuch")
               { include "gaestebuch.php"; }
             if ($_GET['section'] == "kontakt")
               { include "kontakt.php"; }
          ?>
		</div>  
	<div class="foot"></div> 
</div>

und style.css

.wrapper {
 width: 590px;
 align:center;
}

.head {
 height: 150px;
 background: url(images/kopf.gif);
 width: 590px;
}

.leftCol {
 position: absolute;
 left: 15px;
 top: 150px;
 width: 120px;
 height: 380px;
}

.content {
 background: url(images/body.gif); 
 repeat-y; /* Hintergrundgrafik in der Vertikalen wiederholen */
 width:345px;
}

.foot {
 height: 20px;
 background: url(images/footer.gif);
 width: 590px;
}

aber das will irgendwie nicht: http://www.dflab.de

MfG
David

 

[Maik]

Wenn, dann muß es so lauten:

.content {
 background: url(images/body.gif) repeat-y; /* Hintergrundgrafik in der Vertikalen wiederholen */
 width:345px;
}

Da die Hintergrundgrafik aber auch den linken Rahmen und die Trennlinie der linken Spalte enthält, benötigst Du ein weiteres DIV, das diese Hintergrundgrafik zugewiesen bekommt, und in ihm die DIVs .leftCol und .content dann eingebettet werden.


[editpost]

In dem Thread div height=100% nur im IE? findest Du von mir zwei angehängte Lösungsbeispiele im ZIP-Format. Vielleicht helfen sie Dir ja weiter?

 

[Kalma]

Hey,

habe es jetzt hinbekommen. Ich glaub zwar, ich fett gefuscht, aber nunja^^
http://dflab.de/ << Ergebnis:

Codes:

index.php

<div class="wrapper"> 
	<div class="head"></div> 
		<div class="bla">
			<div class="leftCol"><?php include "menu.php"; ?></div> 	
			<div class="content">
          <?php
          	 //haupt-seiten
             if (($_GET['section'] == "") OR ($_GET['section'] == "news"))
               { include "news.php"; }
             if ($_GET['section'] == "archive")
               { include "archive.php"; }
             if ($_GET['section'] == "about")
               { include "about.php"; }
             if ($_GET['section'] == "links")
               { include "links.php"; }
             if ($_GET['section'] == "referenzen")
               { include "referenzen.php"; }
             if ($_GET['section'] == "music")
               { include "music.php"; }
             if ($_GET['section'] == "gaestebuch")
               { include "gaestebuch.php"; }
             if ($_GET['section'] == "kontakt")
               { include "kontakt.php"; }
          ?>
     </div>
		</div>  
	<div class="foot"></div> 
</div>

style.css

.wrapper {
 width: 590px;
 align:center;
}

.head {
 height: 175px;
 background: url(images/kopf.gif);
 width: 590px;
}

.leftCol {
 position: absolute;
 left: 15px;
 top: 150px;
 margin-top:34px;
 margin-left:9px;
 width: 120px;
}

.content {
 width:345px;
 margin-left: 165px;
 top: 150px;
 font-family:"Arial";
 font-size:10;
}

.foot {
 height: 34px;
 background: url(images/footer.gif);
 width: 590px;
 margin:0px;
 padding:0px;
}

.bla {
 background: url(images/body.gif) repeat-y; /* Hintergrundgrafik in der Vertikalen wiederholen */
 width: 590px;
}

Was kann ich noch besser machen, im Code?

David

 

[tobee]

btw. warum so:

<?php
          	 //haupt-seiten
             if (($_GET['section'] == "") OR ($_GET['section'] == "news"))
               { include "news.php"; }
             if ($_GET['section'] == "archive")
               { include "archive.php"; }
             if ($_GET['section'] == "about")
               { include "about.php"; }
             if ($_GET['section'] == "links")
               { include "links.php"; }
             if ($_GET['section'] == "referenzen")
               { include "referenzen.php"; }
             if ($_GET['section'] == "music")
               { include "music.php"; }
             if ($_GET['section'] == "gaestebuch")
               { include "gaestebuch.php"; }
             if ($_GET['section'] == "kontakt")
               { include "kontakt.php"; }
          ?>

und nicht so:

<?php
switch($_GET['section'])
{
  case "archive":
    include "archive.php";
    break;
  .
  .
  .
  default:
    include "news.php";
    break;
}

Tobee

 

[hela]

Was kann ich noch besser machen, im Code?

Du könntest beispielsweise eine richtige HTML-Datei draus machen, so wie es hier beschrieben ist.

 

[Kalma]

Ja, das kommt evtl. später noch^^


Aber,

ich habe nochmehr Probleme hier.
Wenn zum Beispiel nur eine Zeile in einer Datei ist, sieht es so aus:
http://dflab.de/?section=news

Und wie kriege ich den footer ganz dran?
und das ganze mittig zu kriegn, ist auch nicht ganz ohne

David

 

[Maik]

Du solltest Dich mal etwas intensiver mit CSS beschäftigen