|
|||
Wie immer gilt als erstes: Validieren:
http://validator.w3.org/check?verbos...um%2Findex.php Dann wäre ein gut strukturiertes HTML sinnvoll. Insbesondere sollten sinnvolle Elemente (h1, h2, p, ol, etc.) eingesetzt werden. Außerdem solltest Du Dir in einer CSS-Referenz den Abschnitt über Selektoren durchlesen, denn es ist nicht nötig allen Elementen eine Klasse (oder in deinem Fall fälschlicherweise dieselbe ID) geben. Beispielsweise: Code:
<div id='wrapper'> <h1>[img]graphics/index_02.gif[/img]</h1> <div id='content'></div> <div id='submenu'></div> <div id='footer'></div> </div> Zitat:
a) Lies dir was zum "CSS-Box-Modell" durch, das erklärt Dir wir "width", "padding", etc. zusammenhängen. b) Überlege Dir grundsätzlich, ob du alles pixelgenau machen wilst. Gerade wenn du von einer zerschnittenen Grafik als Basis kommst ist es schwierig vorzustellen, aber HTML/CSS funktioniert besser, wenn du Layouts auf Prozente (also flexibel abhängig von der Fenstergröße) oder in EM (flexibel abhängig von der Schriftgröße) erstellst. Eine alternative alles links zu Floaten wäre beispielsweise: "menu" links zu floaten, "submenu" rechts zu floaten und dann "content" garnicht zu floaten, sondern Margins links und rechts zu geben, die jeweils so Breit sind wie "menu" und "submenu" plus etwas extra als Abstand . Robin |
Sponsored Links |
|
|||
danke für den Hinweis mit der xhtml Überprüfung..
mein zweites Problem hast du aber nicht verstanden... die Abstände sind alle schon richtig berechnet. Die Seite soll nur flexibel in der Höhe sein.. in der Breite bleibt sie immer bei 800px... mein hauptproblem liegt sicherlich in der zweiten box unten links... wie bekomm ich die dahin (dynamisch in der höhe!!)... und das problem was ich mit dem rahmen angesprochen habe ist folgendes... guck dir meine beispielgrafik an, wie es aussehen soll und dann guck dir andirs vorletzten Beitrag an.. das funktioniert mit der rechten seite nicht, weil der Rahmen den ich haben will ca. 12px weiter links von dem Rahmen verläuft, den ich mit seiner Methode bekommen würde. Danke für die Hilfe...falls jemand noch Ideen hat, immer her damit... ansonsten muss ich vielleicht einsehen, dass es sich nicht umsetzen lässt. |
Sponsored Links |
|
||||
Zitat:
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Ich dachte, das wäre klar.
Dennoch, here you go: EDIT:Noch mal ein bisschen mehr der grafik angepasst. Ich hab zwei Bilder gebastelt, die das Vorgehen verdeutlichen. Die Headergrafik in einem Stück und einen kleinen teil, der nach unten überlappt. Selber basteln 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" lang="de" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Dreispalter</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } body { text-align: center; /* fuer aeltere IE */ } #wrapper, #wrapagain { text-align: left; width: 804px; margin: auto; } #wrapagain { width: 802px; border-right: 2px solid black; border-top: 1px solid black; } #header { margin-top: 20px; height: 100px; border: 1px 0px 0px 0px solid black; background: url(schleepy1.gif) top left no-repeat; position: relative; } #header img { position: absolute; bottom: 0; left: 0; margin-bottom: -3px; } #wrapmenue { float: left; width: 162px; background: #fff; color: black; } #hauptmenue, #subhaupt { margin-top: 30px; border: 1px solid black; width: 158px; height: 120px; background-color: #bfd4fb; color: black; height: 250px; } #subhaupt { margin-top: 12px; height: auto; } #content { float: left; display: inline; width: 448px; border: 1px solid black; background-color: #bfd4fb; color: black; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 30px; } #submenu { float: left; display: inline; width: 158px; border: 1px solid black; background-color: #bfd4fb; color: black; margin-top: 30px; height: 250px; } #footer { clear: left; height: 20px; border: 1px solid black; background-color: #bfd4fb; border-right: 0; } //--> </style> </head> <body> <div id="wrapper"><div id="header">[img]schleepy2.gif[/img]</div><div id="wrapagain"><div id="wrapmenue"><div id="hauptmenue"> hauptmenue bla bla </p></div><div id="subhaupt">zweites links unten und so weiter</div></div><div id="content"> Am cleartype in IE7/ beta gefällt mir gar nix. Schriften sehen darin so verwaschen aus wie sie vorher gepixelt haben ( manchmal) Dafür ist das Ding mit den vergrösserten Grafiken ziemlich gut, wenn auch nicht auf jeder Stufe Immerhin stellt microsoft so ein Tuningtool zur Verfügung. mit der man sich das genehme Aussehen der Schriftenglättung einigermassen einstellen kann. Dann ist die Kantenglättung brauchbar, obgleich FF und Opera trotzdem schöner rendern. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p></div><div id="submenu"> submenu</p> bla bla</p></div><div id="footer"> footer</p></div></div></div> </body> </html>
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
hey.. vielen Dank andir...
es ist nicht ganz so geworden, wie ich es haben wollte.. aber mit dem Ergebnis bin ich sehr zufrieden. Ich hätte es nicht 100%ig umsetzen können und mit 99% geb ich mich dann gern zufrieden Nochmals, gute Arbeit andir und der Rest natürlich auch ein Problem hab ich allerdings noch.. ich denke es handelt sich evtl. um die "seltsamen Lücken" http://www.carsten-protsch.de/zwisch...e/luecken.html oder http://www.dodabo.de/html+css/img-table/ mit Firefox läuft selbstverständlich alles perfekt Also das Problem beim IE ist, dass der rechte Rand nen pixel zu weit rechts ist.. außerdem stimmt da was mit den abmessungen der drei spalten nicht.. im FF passt alles wunderbar nebeneinander aber im IE ist das alles zu weit, sodass er die rechte spalte unter die anderen verschiebt (weil nicht mehr genügend platz vorhanden ist) ich hab den Code mal gekürzt.. ich hoffe ich hab den Fehler nicht mit weggekürzt. hier zum gucken! 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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Northwest Philadelphia Interfaith Hospitality Network (NPIHN)</title> <style type="text/css"> * { margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; } body { text-align: center; /* fuer aeltere IE */ } img { border: 0pt; vertical-align:top; } a:link, a.menulink:link, a.footerlink:link, a:visited, a.menulink:visited, a.footerlink:visited { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: #366DBE; background-color:transparent; } a:hover, a.menulink:hover, a.footerlink:hover, a:active, a.menulink:active, a.footerlink:active { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: #214273; background-color:transparent; } a.menulink:link, a.menulink:visited, a.menulink:hover, a.menulink:active{ font-size: 14px; } a.footerlink:link, a.footerlink:visited, a.footerlink:hover, a.footerlink:active { font-size:9px; } #wrapper, #wrapagain { text-align: left; width: 800px; margin: auto; } #wrapagain { width: 798px; border-right: 2px solid black; display: block; } #header { position: relative; background-image: url('graphics/header.gif'); height: 108px; } #wrapmenu { float: left; width: 122px; background: #fff; color: black; } #hauptmenu, #submain { margin-top: 20px; border: 2px solid black; width: 122px; height: auto; background-color: #CFDCF1; color: black; } #submain { margin-top: 12px; } #content { float: left; border: 2px solid black; display: inline; width: 512px; height: auto; min-height: 412px; margin-left: 13px; margin-top: 20px; margin-right: 11px; margin-bottom: 12px; background-color: #CFDCF1; background-image: url('graphics/heart.png'); background-repeat: no-repeat; } #submenu { float: left; display: inline; width: 122px; border: 2px solid black; background-color: #CFDCF1; color: black; margin-top: 20px; margin-bottom: 12px; } #footer { clear: left; border: 2px solid black; width: 796px; height: 12px; background-image: url('graphics/footer.png'); } div.contentbox { border: 2px solid black; height: auto; margin: 17px; color: black; background-color: #EBF1FA; } .footerformat { text-align: center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 9px; } </style> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="wrapagain"> <p style="text-align:center;"> <?php echo " <span style='text-decoration: blink; font-weight:bold;'>keep up-to-date about NPIHN</span><span style='font-weight:bold;'> -></span>[img]graphics/feedicon.gif[/img]"; ?> </p> <div id="wrapmenu"> <div id="hauptmenu"> <?php include('menu.inc.php'); ?> </div> <div id="submain"> <?php include('login.inc.php'); ?> </div> </div> <div id="content"> <?php include('content.inc.php'); ?> </div> <div id="submenu"> <?php include("shoutbox.inc.php"); ?> </div> <div id="footer"> <p class='footerformat'>© 2006 - www.philashelter.org</p> </div> </div> </div> </body> </html> |
|
|||
Überprüfe erstmal bei submenu ob es die richtige Breite hat, bei mir rutscht es im IE nach unten, da wohl der Platz fehlt ( Breite)
Browsercache leeren und mal anschauen. Was die obere Grafik angeht würde ich die Schriften rausnehmen und über die Grafik platzieren. So siehts einfach nur gepixelt aus und das nicht schön. grüsse
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
jop..
ich hab's jetzt anders gelöst... hab für IE und FF verschiedene Maße genommen... Code:
<!--[if gte IE 5]> <style type="text/css"> </style> <![endif]--> aber das mit der pixeligen Schrift ist ne gute Idee..thx soweit bin ich dann erst einmal glücklich... für Verbesserungsvorschläge bin ich immer zu haben!! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Inspiration - Sammlung von Links | emti | Ressourcen | 8 | 01.12.2009 19:02 |
CSS-Layout der Browsergröße anpassen | Jen | CSS | 3 | 14.11.2008 09:39 |
CSS Problem Design auf anderen Rechnern verschoben | MALPI | CSS | 3 | 09.10.2008 11:51 |
Redundanter Inhalt durch CSS -> PHP? | smartens | CSS | 11 | 04.07.2007 19:18 |
CSS Design Probleme | Hawklan | CSS | 5 | 12.08.2004 12:45 |