Seite 1 von 1
Layout mit CSS - Nur Probleme
Verfasst: 20.05.2005, 02:21
von narc
hallo ich habe ein problem mit dem layout mitels css. ich tüftel hier schon seit stunden. hoffe mir kann jemand dabei helfen.
also im grunde genomen ist die idee einfach, ein header welcher oben ist, ein footer welcher unten ist, und eben der contentbereich, der sich automatisch skalieren sollte, wenn neue texte eingefügt werden.
das blöde ist nur das ich ein hintergrundbild in vier verschienen ecken verwenden muss. dies ist sichtbar bei dem grünem layer auf dem bild, welches ich angehängt habe. die roten layer sind die normalen contentbereiche.
mein problem ist, das mein gerüst nicht in der höhe maximiert wird, und es wird immer wieder zerschossen sobald ich ein background.picture einfüge. ich hoffe mir kann jemand bei meinem problem helfen.
hier der code.
Code: Alles auswählen
* { margin: 0; padding: 0; }
body { height: 100%; text-align: center; background-color: #868369; }
div#container { position: relative; margin: 0 auto; width: 857px; text-align: left; }
#header, #footer { height: 170px; background-color: #b9b9b9; }
#data { padding: 20px; background-color: #008cbf; }
#dx { position: relative; float: left; width: 597px; }
#nx { position: relative; width: 248px; margin-left: 607px; }
#d1, #d2, #n1, #n2 { height: 248px; background-color: #09be01; }
#d1, #n1 { margin-bottom: 10px; }
#inhalt, #news { background-color: #be0030; }
#inhalt { position: absolute; top: 12.5%; right: 0; width: 451px; height: 75%; }
#news { position: absolute; top: 12.5%; left: 0; width: 90px; height: 75%; }
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/T1.css">
</head>
<div id="container">
<div id="head"></div>
<div id="ubgng"></div>
<div id="data">
<div id="dx">
<div id="d1">d1</div>
<div id="d2">d2</div>
</div>
<div id="nx">
<div id="n1">n1</div>
<div id="n2">n2</div>
</div>
<div id="inhalt">/div>
<div id="news"></div>
</div>
<div id="footer"></div>
</div>
</html>
Verfasst:
von
Content Erstellung von
ABAKUS Internet Marketing
Ihre Vorteile:
- einzigartige Texte
- suchmaschinenoptimierte Inhalte
- eine sinnvolle Content-Strategie
- Beratung und Umsetzung
Jetzt anfragen:
0511 / 300325-0
Layout mit CSS - Nur Probleme
Verfasst: 20.05.2005, 14:05
von narc
Kann mir den niemand helfen? Hier treiben sich doch viele CSS Experten oder nicht?
Layout mit CSS - Nur Probleme
Verfasst: 20.05.2005, 14:11
von Garfield
Dein Post ist doch noch nicht mal 12 Stunden her...
Verfasst:
von
SEO Consulting bei
ABAKUS Internet Marketing Erfahrung seit 2002
- persönliche Betreuung
- individuelle Beratung
- kompetente Umsetzung
Jetzt anfragen:
0511 / 300325-0.
Layout mit CSS - Nur Probleme
Verfasst: 20.05.2005, 14:16
von pebosi
soll die seite so aussehen wie in dem bild oben?
hast du dir das schonmal im firefox angeschaut da sieht das bisschen anders aus wie auf dem bild oben
werd mal ein bisschen rumprobieren
gruß pebosi
EDIT:
was anderes: du hast 2mal das tag "<html>" drin, die seite hat kein titel, und das eine div bei dem "inhalt" ist nicht richtig geschlossen...
Layout mit CSS - Nur Probleme
Verfasst: 20.05.2005, 15:45
von narc
Irgendwie ist das alles sehr depremierend. Ich habe früher immer mit Tabellen das Design definiert. Jaja ich weiß, eigentlich darf das nicht gemacht werden. Deshalb wollte ich nun bei meinem neuen Projekt alles mit CSS umsetzen. Doch leider haut das irgendwie nicht hin. Ich habe die alten Entwurfe jetzt verworfen, und habe gerade komplett alles neu aufgebaut. Aber auch jetzt funktioniert es nicht. Wenn ich nun in den roten Layer Conten übergebe, wird das Konstrukt nicht skaliert. Ich weiß langsam nicht mehr weiter. Hier der Code und der Layoutplan als Bild. Hoffe mir kann jemand helfen.
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css" media="screen">
* { margin: 0; padding: 0;}
body { height: 100%; text-align: center; background-color: #868369; }
div#container { width: 857px; height: auto; text-align: left; margin: 0 auto; border: 1px solid blue; }
#head { height: 170px; background-color: #b9b9b9; }
#ubgng { height: 45px; background-color: #b9b9a1; }
#data { background-color: #008cbf; margin: 0 auto; }
#foot { height: 68px; background-color: #b9b9b9;}
#dx { position: relative; width: 600px; float: left; height: auto; background-color: #FFD200; }
#nx { position: relative; width: 257px; float: right; left: 0px; height: auto; background-color: #FFD200; }
#d1 { position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }
#d2 { position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }
#n1 { position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00; }
#n2 { position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00; }
#inhalt { position: absolute; width: 525px; margin: 5px; top: 7%; left: 40px; background-color: #BE0031; white-space: wrap }
#news { position: absolute; width: 200px; margin: 5px; top: 7%; left: 28px; background-color: #BE0031; }
</style>
</head>
<body>
<div id="container">
<div id="head">HEADER</div>
<div id="ubgng">FADEÜBERGANG</div>
<div id="dx">
<div id="d1">D1</div>
<div id="inhalt">INHALT</div>
<div id="d2">D2</div>
</div>
<div id="nx">
<div id="n1">N1</div>
<div id="news">NEWS</div>
<div id="n2">N2</div>
</div>
<div id="foot">FOOTER</div>
</div>
</body>
</html>
Verfasst: 20.05.2005, 17:08
von flproject
das und das
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
passt nicht zusammen. XHTML 1.1 darf niemals als "text/html" ausgeliefert werden, sondern nur als "application/xhtml+xml". das hilft dir jetzt zwar nicht bei deinem problem, ist aber wichtig. nur weil jetzt alle welt XHTML schreibt und denkt das CSS nur damit geht, muss das nicht stimmen. zu deinem problem: das postest du am besten mal im
https://xhtmlforum.de. da findest du sicherlich eher hilfe. hier sind mehr SEO-experten als HTML-experten.
Noch was:
tabellen-layouts durch <div>-suppe zu ersetzen ist keine lösung. wenn du alles in <div>-Elemente packst, was vorher eine tabellenzelle war, hast du HTML nicht verstanden. dann bleib lieber bei tabellen-layouts.
Beispiel:
<div id="header">ABC</div> lieber als <h1>ABC</h1> usw.
Layout mit CSS - Nur Probleme
Verfasst: 20.05.2005, 19:19
von derHund
zu deinem problem: das postest du am besten mal im
https://xhtmlforum.de. da findest du sicherlich eher hilfe.
dort hat er schon vor tagen gepostet, nur fand sich wohl niemand, der ihm die arbeit abnehmen wollte. und selber machen war wohl nicht drin.
@narc: wenn
du es mit css nicht hinbekommst, verwende doch wieder tabellen.
Layout mit CSS - Nur Probleme
Verfasst: 21.05.2005, 03:27
von narc
@derHund
Was soll den hier heißen die Arbeit nicht abnehmen. Ich habe schon darüber nachgedacht, und versucht es selbst zu meistern. Leider ist mir dies misslungen, deshalb auch die Frage hier. Man man man, das sind hier Zustäde.
Von Tabellen ist hier nicht die Rede. Möchte ja gerade von diesen weg kommen, deshalb auch die Frage. *kopfschütel*
