|
|||
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> 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) |
Sponsored Links |
|
||||
Hi,
um zu lernen wie modernes Webdesign funktioniert muss man das "Tabellendenken" ablegen. Deinem Entwurf sieht man leider an, das du zwar divs hernimmst aber noch in Tabellen denkst, d.h. für dich gibt es wohl keine schnelle und einfache Lösung. Dieses Zeichen:  heißt übrigens Byte Order Mark (BOM). Du brauchst einen Editor der ohne BOM speichern kann. notepad++ kann das und kostet außerdem nix. Alles mit position:absolute in den Viewport zu nageln ist für Anfänger verführerisch, aber führt i.d.R. nicht zum erwünschten Ergebnis. Meistens bekommen Container keine feste Höhe, damit sie mit der Menge des Inhaltes dynamisch mitwachsen können. Du wirst nicht umhin kommen ein vernünftiges Buch durchzuackern, um die Grundlagen modernen Webdesigns zu verstehen. Little Boxes 1 ist bestens dazu geeignet.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
Hm, dann sag ich jetzt einfach mal: Mist !
Ich werde mir dieses Buch mal zu gemüte führen. Danke dafür. Kann man dieses Design denn noch irgendwie retten? Damit es die Funktion bekommt, die ich mir wünsche. Der Content wird nie wirklich lang, evtl. bei 2-3 Seiten kommt mal ein etwas längerer Text oder halt eine Bildergalerie. Gibt es dort evtl. eine alternative Variante? So eine art iFrame welches ich in dem Content Bereich einfüge und in dem ich dann je nach Bedarf nach unten scrollen kann. Ich sehe schon, bin neu hier und mache direkt Probleme Mit freundlichem Gruß *edit "Dieses Zeichen:  heißt übrigens Byte Order Mark (BOM). Du brauchst einen Editor der ohne BOM speichern kann. notepad++ kann das und kostet außerdem nix." Wo hast du dieses Zeichen denn jetzt gefunden, dass du darauf kommst? Das hat mich gerade ein wenig verwirrt Geändert von hujuzka (09.06.2009 um 20:26 Uhr) |
|
|||
Ich seh schon, das wird ein längerer Akt.
Die Sache ist halt, dass die Webseite schnellstmöglich fertig sein muss. Beim Code ansich habe ich schon einiges gemacht bzw. aus älteren Projekten was übernommen. Mir liegt auch keine PSD zur Verfügung um das slicen selbst zu übernehmen. Muss also dieses Design mit dem vorhandenen Quellcode nehmen Jetzt auf die Schnelle mir das Buch durchzulesen (Bestellen etc.) bringt mir jetzt leider nicht so viel, ist wahrscheinlich in einer so kurzen Zeit garnicht möglich. Und wie ich mich kenne, werde ich es auch nicht direkt beim ersten Mal hinbekommen Wie sieht es mit einer relativ "schicken" Alternative aus. Wie ich in dem vorherigen Post schon geschrieben habe, dass ich innerhalb des Content Bereichs scrollen kann. Es ist wirklich nie viel Text, evtl. 30 Zeilen, das ist aber auch das Maximum Schade, dass ich mich mit dieser Seite ein wenig abehetzen muss, würde es gerne mit Hilfe des Buches machen. Mit freundlichem Gruß |
|
|||
Habe meinen ersten Post mal editiert, habe ein paar Sachen geändert, der Übersicht halber. An der Struktur jedoch habe ich nichts geändert. Habe bei google mal nach einem Tutorial mit der Listenversion gesucht, jedoch werd ich daraus nicht schlau (NOCH nicht ! )
Hoffe ihr könnt mir jedoch noch bei meinem Problem helfen, dass sich das Design der Größe des Contents anpasst. Eine Alternative Lösung a la iFrame (oder evtl. gibts ja in CSS eine andere Lösung) ist im Notfall auch willkommen. Mit freundlichem Gruß |
|
||||
Moin,
verzichte auf position:absolute, verzichte wenns irgend möglich auf Höhenangaben für deine Container, damit sie sich dynamisch anpassen können. Wenn ich das Bild sehe ist durch die schwarzen Blöcke leider viel verdeckt. Der orangene Verlauf kann ein HG-Bild sein, horizontal zentriert und mit entspr. Abstand nach oben. Die grobe Struktur wäre ungefähr so: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="ich" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>Webseite</title> <link rel="shortcut icon" type="image/x-icon" href="grafiken/favicon.ico" /> <link rel="icon" type="image/png" href="grafiken/favicon.png" /> <link type="text/css" rel="stylesheet" href="css/bildschirm.css" media="screen" /> <link type="text/css" rel="stylesheet" href="css/druck.css" media="print" /> </head> <!--[if lte IE 7]> <style type="text/css"> @import url(css/ie.css); </style> <![endif]--> <body id="startseite"> <div id="umhang"> <div id="topnavi"> <ul id="navigation"> <li><a href="#">Startseite</a></li> <li><a href="#">Galerie</a></li> <li><a href="#">Kontakt</a></li> usw. usw. </ul> </div><!-- Ende #topnavi--> <div id="kopf"> <h1>Hauptüberschrift</h1> </div><!-- Ende #kopf--> <div id="inhalt"> <h2>Überschrift</h2> <p>Text</p> usw. usw. </div><!-- Ende #kopf--> <div id="fuss"> <p>Hier ist der Fuss</p> </div><!-- Ende #fuss--> </div><!-- Ende #umhang --> </body> </html> In XHTML ist übrigens generelle Kleinschreibung angesagt. Wenn ich das richtig sehe, willst du eine grafische Navigation. Wie du sowas verwirklichst kannst du in der CSS-FAQ Punkt 15 nachlesen. Solltest du das tun wirst du sicher erkennen, das eine schnelle CSS-Lösung für dich einfach nicht funktionieren wird, oder kannst du das dort auf Anhieb umsetzen? Vielleicht wäre es für dich besser diese HP mit Tabellen umzusetzen, weil du dich da auskennst. Solltest du den Ehrgeiz haben dich webdesignmäßig weiterzubilden kannst du es danach in Ruhe machen.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Wegen der schwarzen Balken, Sorry Sie wollte es so, da ihr Name dort fast überall steht bzw. Adresse etc. Habe einfach mit Paint das meiste schwarz gefärbt.
Ok das mit den Listen sieht ja in deinem Beispiel ganz logisch aus, aber um nun die ganzen Bilder dort richtig einzuordnen fehlt mir das know how und die nötige Zeit Schade! Dann werd ich das wohl doch mit Tabellen realisieren müssen und mich danach an die CSS Variante setzen. Mich interessiert diese Technik sehr und man will ja auch mit der Zeit gehen und nicht auf seinem Stand von 19xx stehen bleiben Vielen Dank für die Hilfe. Ich werde versuchen es mit der Liste zu lösen, klappt das nicht, werde ich es mit einer Art iFrame versuchen. Klappt das wiederum nicht wie ich es mir vorstelle, werd ich mir die Haare ausreissen und es mit Tabellen machen Mit freundlichem Gruß |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Seite links ausrichten | like.no.other | CSS | 10 | 26.01.2011 02:10 |
Norwegische Webmaster gegen veraltete Browser | Schelm.isch | Offtopic | 255 | 23.04.2009 22:27 |
Div box dem inhalt anpassen? | homezonebenny | CSS | 1 | 29.11.2007 10:11 |
Probleme mit XHTML und CSS Design un dem IE 5.0/5.5 | plubird | CSS | 1 | 19.02.2004 22:01 |