Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.06.2009, 19:24
hujuzka hujuzka ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2009
Beiträge: 5
hujuzka befindet sich auf einem aufstrebenden Ast
Standard CSS Design soll sich dem Content anpassen

Hallo,

ich habe ein Problem mit meinem Design.

Mit CSS selbst und DIV Containern beschäftige ich mich erst seit kurzem, ich versuche also gerade zu lernen Also habt ein wenig Nachsicht.

Folgendes Problem:

Ein Bekannter hat mit Photoshop ein Design erstellt, dieses "gesliced" und mit PS ein CSS Desgin gemacht. Ich mache für diese Seite nun den Code (soll komplett in PHP werden) und habe ein Problem mit der Darstellung des Contents. In der Mitte (in meinem Beispiel grau hinterlegt) soll der Inhalt angezeigt werden. Wenn ich jetzt jedoch einen längeren Text schreibe, "wächst" dieser Bereich nicht mit. Dazu kommt, dass der "Footer" des Designs ja auch mit nach unten wandern soll. Da ich mit CSS noch nicht so gut klarkomme habe ich den Durchblick verloren. Als ich sowas vorher mit Tabellen gemacht habe (oder halt header content und footer als eigene PHP Datei getrennt) war es kein Problem.

Code:
#body	    {
	background-color: #FCC31B;
 	margin: 0 auto;
}


#Tabelle_01 {
	position:relative;
	top:0px;
	margin: 0 auto;
	width:1000px;
	height:900px;
}

#index-01_ {
	position:absolute;
	background-image: url(Bilder/index_01.gif);
	left:0px;
	top:0px;
	width:10px;
	height:321px;
}

#index-02_ {
	position:absolute;
	background-image: url(Bilder/index_02.gif);
	left:10px;
	top:0px;
	width:528px;
	height:84px;
}

#index-03_ {
	position:absolute;
	background-image: url(Bilder/index_03.gif);
	left:538px;
	top:0px;
	width:357px;
	height:27px;
}

#index-04_ {
	position:absolute;
	background-image: url(Bilder/index_04.gif);
	left:895px;
	top:0px;
	width:23px;
	height:900px;
}

#index-05_ {
	position:absolute;
	background-image: url(Bilder/index_05.gif);
	left:918px;
	top:0px;
	width:82px;
	height:900px;
}

#index-06_ {
	position:absolute;
	background-image: url(Bilder/index_06.gif);
	left:538px;
	top:27px;
	width:357px;
	height:57px;
}

#index-07_ {
	position:absolute;
	background-image: url(Bilder/index_07.gif);
	left:10px;
	top:84px;
	width:90px;
	height:237px;
}

#index-08_ {
	position:absolute;
	background-image: url(Bilder/index_08.gif);
	left:100px;
	top:84px;
	width:93px;
	height:45px;
}

#index-09_ {
	position:absolute;
	background-image: url(Bilder/index_09.gif);
	left:193px;
	top:84px;
	width:88px;
	height:45px;
}

#index-10_ {
	position:absolute;
	background-image: url(Bilder/index_10.gif);
	left:281px;
	top:84px;
	width:188px;
	height:45px;
}

#index-11_ {
	position:absolute;
	background-image: url(Bilder/index_11.gif);
	left:469px;
	top:84px;
	width:183px;
	height:45px;
}

#index-12_ {
	position:absolute;
	background-image: url(Bilder/index_12.gif);
	left:652px;
	top:84px;
	width:104px;
	height:45px;
}

#index-13_ {
	position:absolute;
	background-image: url(Bilder/index_13.gif);
	left:756px;
	top:84px;
	width:139px;
	height:45px;
}

#index-14_ {
	position:absolute;
	background-image: url(Bilder/index_14.gif);
	left:100px;
	top:129px;
	width:369px;
	height:192px;
}

#index-15_ {
	position:absolute;
	background-image: url(Bilder/index_15.gif);
	left:469px;
	top:129px;
	width:426px;
	height:192px;
}

#index-16_ {
	position:absolute;
	background-image: url(Bilder/index_16.gif);
	left:0px;
	top:321px;
	width:100px;
	height:149px;
}

#index-17_ {
	position:absolute;
	background-image: url(Bilder/index_17.gif);
	left:100px;
	top:321px;
	width:25px;
	height:218px;
}

#index-18_ {
	position:absolute;
	background-image: url(Bilder/index_18.gif);
	left:125px;
	top:321px;
	width:344px;
	height:87px;
}

#index-19_ {
	position:absolute;
	background-image: url(Bilder/index_19.gif);
	left:469px;
	top:321px;
	width:390px;
	height:128px;
}

#index-20_ {
	position:absolute;
	background-image: url(Bilder/index_20.gif);
	left:859px;
	top:321px;
	width:36px;
	height:204px;
}

#index-21_ {
	position:absolute;
	background-image: url(Bilder/index_21.gif);
	left:125px;
	top:408px;
	width:344px;
	height:41px;
}

#index-22_ {
	position:absolute;
	background-image: url(Bilder/index_22.gif);
	left:125px;
	top:449px;
	width:734px;
	height:21px;
}

#index-23_ {
	position:absolute;
	background-image: url(Bilder/index_23.gif);
	left:0px;
	top:470px;
	width:100px;
	height:218px;
}

#index-24_ {
	position:absolute;
	left:125px;
	top:470px;
	margin: 0 auto;
	background-color: #C0C0C0;
	width:734px;
	height:261px;
}


#index-25_ {
	position:absolute;
	background-image: url(Bilder/index_25.gif);
	left:859px;
	top:525px;
	width:36px;
	height:60px;
}

#index-26_ {
	position:absolute;
	background-image: url(Bilder/index_26.gif);
	left:100px;
	top:539px;
	width:25px;
	height:47px;
}

#index-27_ {
	position:absolute;
	background-image: url(Bilder/index_27.gif);
	left:859px;
	top:585px;
	width:36px;
	height:1px;
}

#index-28_ {
	position:absolute;
	background-image: url(Bilder/index_28.gif);
	left:100px;
	top:586px;
	width:25px;
	height:314px;
}

#index-29_ {
	position:absolute;
	background-image: url(Bilder/index_29.gif);
	left:859px;
	top:586px;
	width:36px;
	height:300px;
}

#index-30_ {
	position:absolute;
	background-image: url(Bilder/index_30.gif);
	left:0px;
	top:688px;
	width:10px;
	height:212px;
}

#index-31_ {
	position:absolute;
	background-image: url(Bilder/index_31.gif);
	left:10px;
	top:688px;
	width:90px;
	height:212px;
}

#index-32_ {
	position:absolute;
	background-image: url(Bilder/index_32.gif);
	left:125px;
	top:731px;
	width:734px;
	height:70px;
}

#index-33_ {
	position:absolute;
	background-image: url(Bilder/index_33.gif);
	left:125px;
	top:801px;
	width:734px;
	height:85px;
}

#index-34_ {
	position:absolute;
	background-image: url(Bilder/index_34.gif);
	left:125px;
	top:886px;
	width:770px;
	height:14px;
}
HTML-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=utf-8" />
<META http-equiv="Content-Language" content="pl" />

<LINK REL="stylesheet" HREF="body.css" TYPE="text/css"  />
<LINK REL="stylesheet" HREF="tables.css" TYPE="text/css"  />
</head>
<body id="body">

<div id="Tabelle_01">
	<div id="index-01_"></div>
	<div id="index-02_"></div>
	<div id="index-03_"></div>
	<div id="index-04_"></div>
	<div id="index-05_"></div>
	<div id="index-06_"></div>
	<div id="index-07_"></div>
	<div id="index-08_"><a href="index.php?action=2"><img src="Bilder/index_08.gif" border="0" /></a></div>
	<div id="index-09_"><a href="index.php?action=3"><img src="Bilder/index_09.gif" border="0" /></a></div>
	<div id="index-10_"><a href="index.php?action=4"><img src="Bilder/index_10.gif" border="0" /></a></div>
	<div id="index-11_"><a href="index.php?action=5"><img src="Bilder/index_11.gif" border="0" /></a></div>
	<div id="index-12_"><a href="index.php?action=6"><img src="Bilder/index_12.gif" border="0" /></a></div>
	<div id="index-13_"><a href="index.php?action=7"><img src="Bilder/index_13.gif" border="0" /></a></div>
	<div id="index-14_"></div>
	<div id="index-15_"></div>
	<div id="index-16_"></div>
	<div id="index-17_"></div>
	<div id="index-18_"></div>
	<div id="index-19_"></div>
	<div id="index-20_"></div>
	<div id="index-21_">titel</div>
	<div id="index-22_"></div>
	<div id="index-23_"></div>
	<div id="index-24_">inhalt</div>
	<div id="index-25_"></div>
	<div id="index-26_"></div>
	<div id="index-27_"></div>
	<div id="index-28_"></div>
	<div id="index-29_"></div>
	<div id="index-30_"></div>
	<div id="index-31_"></div>
	<div id="index-32_"></div>
	<div id="index-33_"></div>
	<div id="index-34_"></div>
</div>
</body>
</html>
Ich habe die Seite nochmal in den "Ursprungszustand" versetzt, also nur die index.html sowie die bilder seperat hochgeladen. http://homeofthepage.ho.ohost.de/ (Hab auf Wunsch der jungen Dame, der zukünftigen Besitzerin, ein Paar Sachen zensiert wegen Ihrem Namen etc.)

Hm wie immer habe ich zuviel geschrieben, hoffe jedoch, dass ihr versteht was ich meine und das es eine relativ schnelle und einfache Lösung gibt. Falls ihr noch mehr Informationen braucht oder eine andere Schilderung des Problems, nur zu

Mit freundlichem Gruß

Chris

Geändert von hujuzka (09.06.2009 um 23:56 Uhr)
Mit Zitat antworten
Sponsored Links