|
|||
CSS dynamisches Layout Problem
Hallo alle zusammen. Bin grad an einem dynamischen CSS layout und schlage mich mit einem Problem rum.
Das ganze hat eigentlich einen Linken Teil und einen rechten Teil. Wenn man nun den Bildschirm verkleinert, dann sollte der rechte Teil sich verkleiner bis auf's minimum und dann aber stehen bleiben und nicht ans Ende der Seite rücken. Hier der Link für's bessere Verständniss Untitled Document Wie krieg ich dass blos hin dass der rechte Teil rechts floated und der linke Teil links floated aber wenn es eng wird der rechte Teil auf's minimum geht und dann stehen bleibt und ein seitlicher scrollbalken erscheint? css: Code:
@charset "UTF-8"; body { background-image: url(pics/wandGanzBG.jpg); font-family: verdana; font-size: 13px; color: #FFF; } #full { width: 99%; height: 99%; } #logo { margin-left: 70px; float: left; width: 273px; } #sideNav { width: 210px; background-image: url(pics/blackBox.jpg); background-repeat: no-repeat; float: left; margin-top: 50px; } #contentbox { float: right; /* since this element is floated, a width must be given */ width: 55%; padding-right: 70px; } #nav { text-align: left; margin-right: -50px; } #text { text-align: left; margin-top: 230px; } 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" /> <title>Untitled Document</title> <link href="styleNew.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="full"> <div id="logo"> logo </div> <div id="sideNav"> <p> </p> </div> </div> <div id="contentbox"> <div id="nav"> <? include("topNav.html"); ?> </div> <div id="text"> <h1>karte</h1> <p>Die Hauskarte ist für Jedermann-frau ab dem 28igsten Lebensjahr erhältlich.<br /> Sie wird kostenlos abgegeben. Anmelden kann man sich nur direkt im Haus. Tagsüber in der Ladenstrasse und im Kafe , Abends im Klub und im Kafe. Sie ist nicht zu Verwechseln mit einer Klub Member Karte. Denn neben dem vergünstigtem und problemlosen Einlass in den Klub und den wöchentlichen Newsletter bietet sie auch diverse Vorteile in der Ladenstrasse. Ein Stamm Rabatt von 10%, kostenlose Änderung der gekauften Jeans, Pre Sale vor dem offiziellen Ausverkauf und das Beste: ab 10 Personen bieten wir durch Anmeldung unter <a href="mailto:reservation@dashaus4.ch">reservation@dashaus4.ch</a> ein privates Night Shopping in der Ladenstrasse an. </p> <a href="anmeldung.php">Hauskarte anfordern</a> </div> </div> </div> </body> </html> |
Sponsored Links |
|
||||
Du kannst z.B. body min-width geben - der IE < 7 versteht das zwar nicht, aber Abhilfe gibt's hier: Stu Nicholls | CSSplay | Min-Width for Internet Explorer
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
|
|||
Hy, danke für dein feedback, nee leider geht dass nicht, habe es im body versucht und im #full. Ich glaub ich muss das ganze wohl anders aufbauen, abur wie? es soll ja so sein dass das rechte rechts floating ist und das linke links floating.... wäre wirklich froh um jeden imput.
|
|
|||
Ja, musst Du.
Wenn du ein halbwegs flexibles Layout haben willst, verzichte zunächst auf die margins und paddings in #logo und #contentbox. Browser können noch nicht richtig rechnen, aber dazu später mehr. Du versuchst wohl die Seite zu zentrieren, das geht aber in #full besser mit einer festen Breite, die eh vorgibst und margin: 0 auto; Dann gibst Du #logo und #contentbox jeweils eine min-width - nach Bedarf- und prozentuale Größen, z.B. 44% und 55% ( keine hundert insgesamt wegen Rundungsfehlern der Browser) in Bezug auf #full. Das sollte für den Anfang reichen
__________________
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 |
|
|||
Danke für deine Tipps. Habe alles geändert. Doch leider jumpt die rechte Seite immernoch unter die linke Seite beim verkleinern des Browserfensters. Ich möchte einfach dass es bei min. stehen bleibt und dann der horizontale scrollbalken kommt... Untitled Document
Hier ist mein aktuelles CSS, vielleicht hab ich ja was falsch verstanden: Code:
@charset "UTF-8"; body { background-image: url(pics/wandGanzBG.jpg); font-family: verdana; font-size: 13px; color: #FFF; } #full { width: 99%; margin-top: 0px; margin-right: auto; margin-bottom: auto; margin-left: auto; } #logo { float: left; width: 15%; min-width: 273px; max-width: 350px; } #sideNav { background-image: url(pics/blackBox.jpg); background-repeat: no-repeat; margin-top: 50px; float: left; width: 15%; min-width: 273px; max-width: 350px; } #contentbox { float: right; /* since this element is floated, a width must be given */ width: 70%; max-width: 1000px; min-width: 320px; } #nav { text-align: left; margin-right: -50px; } #text { text-align: left; margin-top: 230px; } ul#navlist { white-space: nowrap; margin-right: 0px; margin-bottom: 20px; float: right; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding-right: 2px; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; } #navlist a:link, #navlist a:visited { color: #5A5B5D; background-color: #FFFFFF; text-decoration: none; font-family: Verdana; font-size: 90%; } #navlist a:hover { color: #fff; background-color: #A7A9AC; text-decoration: none; } h1 { background-image: url(pics/titleBg.gif); } h1 { font-family: arial; font-size: 16px; font-weight: bold; text-transform: uppercase; color: #FFFFFF; background-repeat: repeat-x; height: 25px; text-indent: 10px; background-position: 10px; width: 570px; margin-top: 30px; } p { font-family: arial; font-size: 14px; color: #FFFFFF; line-height: 19px; } a { color: #000000; background-color: #FFFFFF; text-decoration: none; padding-right: 2px; padding-left: 2px; } a:hover { color: #FFFFFF; background-color: #23201F; padding-right: 1px; padding-left: 1px; text-decoration: none; } |
|
|||
Es ist das umgebende Element, das eine Mindestbreite braucht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
OK habe noch das probiert:
Code:
#full { width: 955px; margin-top: 0px; margin-right: auto; margin-bottom: auto; margin-left: auto; } weist du was ich meine? |
|
|||
Code:
#full { width: 99%; margin-top: 0px; margin-right: auto; margin-bottom: auto; margin-left: auto; min-width: 1000px; } |
|
|||
Dein Online-Code ist unverändert.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hey cool, du hattest recht! Online gings dann!!! so geil! Es funktionierte im Dreamweaver nicht, da dachte ich geht eh nicht. Falsch gedacht! läuft einwandfrei! Danke dir vielmals!
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS layout problem | donky | CSS | 5 | 05.06.2009 17:56 |
Problem mit CSS Layout | jojoho | CSS | 9 | 20.07.2008 23:16 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
problem ausrichtung grafik und rand (css layout) | celine@23 | Barrierefreiheit | 1 | 28.12.2005 14:05 |
css layout problem mit 3 zentrierten div´s | horst | CSS | 5 | 19.08.2005 10:34 |