|
|||
Hilfe bei einer CSS-Aufgabe.. verzweifele langsam
Hallo ihr Lieben,
ich habe hier eine Aufgabe bekommen und verstehe nicht wirklich, wie ich das so hinkriegen soll, wie gefordert. Eventuell hat einer von euch einen Tipp oder kann mir helfen. Ich habe folgende HTML-Datei: HTML-Code:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Aufgabe</title> <link href="mystyles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <h1>Hier geht's los </h1> <div id="column1"> <p align="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> <div id="column2"> <p align="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> </div> <div id ="helper"></div> <div id="footer"> <p>Hier ist Schluss</p> </div> </div> </body> </html> und folgenden CSS-Code: Code:
@charset "utf-8"; #wrapper { margin:0px; padding:0px; background-color: #CCC; width: 400px; /* Eintrag von mir */ } #column1 { background-color: #FFC; width: 190px; padding: 5px; float: left; /* Eintrag von mir */ } #column2 { background-color: #6F9; padding: 5px; margin-left:auto ; /* Eintrag von mir */ } #helper { /* Eintrag noch offen*/ } #footer { background-color: #FCC; height: 40px; padding: 10px; } 1. Gesamtbreite von 400 Pixel 2. Eine beliebige Überschrift gefolgt von zwei gleich breiten Spalten mit Blindtext. 3. Eine Fußzeile 4. Die Fußzeile schließt das Layout ab - und zwar UNABHÄNGIG davon, in welcher Spalte mehr Blindtext steht. Leider bin ich mir besonders beim #helper nicht sicher, was ich eintragen soll. Kommentare im CSS (Eintrag von mir) sind die Ideen, die ich dazu hatte, stimmen diese? Hat jemand Ideen? Gruß John |
Sponsored Links |
|
|||
Ich nehme an, der HTML-Code ist vorgegeben?
Es gibt verschiedene Wege wie du das lösen kannst. Du hast eine Kolumne schonmal gefloatet. Das ist der richtige Ansatz, aber offensichtlich nicht ausreichend. Warum fließt der Text um column 1 und warum nimmt column 2 die ganze Breite ein? Wenn Du jetzt column2 eine Breite von 190px gibst, was siehst Du dann? Welcher weitere Schritt wäre dann erforderlich um column 2 neben clolumn 1 zu bringen? Warum ist auch das nicht ausreichend bzw. sieht merkwürdig aus? Was könnte hier noch fehlen? fragt Hobbylehrer andir.
__________________
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 |
|
|||
>> Ich nehme an, der HTML-Code ist vorgegeben?
Richtig, der ist vorgegeben. Es gibt verschiedene Wege wie du das lösen kannst. >> Du hast eine Kolumne schonmal gefloatet. Das ist der richtige Ansatz, aber offensichtlich nicht ausreichend. Stimmt Warum fließt der Text um column 1 und warum nimmt column 2 die ganze Breite ein? Code:
@charset "utf-8"; #wrapper { margin:0px; padding:0px; background-color: #CCC; width: 400px; /* Eintrag von mir */ } #column1 { background-color: #FFC; width: 190px; padding: 5px; float: left; /* Eintrag von mir */ } #column2 { background-color: #6F9; padding: 5px; margin-left: 200px ; /* Eintrag von mir */ } #helper { /* Eintrag noch offen*/ } #footer { background-color: #FCC; height: 40px; padding: 10px; } >> Warum ist auch das nicht ausreichend bzw. sieht merkwürdig aus? Was könnte hier noch fehlen? Der #helper fehlt noch... aber ich komm einfach nicht drauf, was es bewirken soll... ich geh mal stark davon aus, dass es sich da um Aufgabe 4 handelt, oder?? Wenn du oder jemand anderes noch einen Tipp geben kann oder zumindestens meine bisherigen feststellungen bestätigen kann, wäre ich sehr dankbar darüber. Und auch jetzt bereits, danke an den Hobbylehrer Andir |
|
|||
Du solltest die Fragen lösen... ich kenne die Antworten schon... ^^
Was ist, wenn Du beide columns floatest (mit bestimmter Breite versehen)? Wo landet der Footer und wie kannst Du das verhindern? Was hat #helper damit zu tun? Wie gesagt, ich kenne die Antworten schon Ich versuch nur, Dir auf den Gaul zu helfen. Hinweis: Wer floatet muss auch clearen muss jetzt leider weg
__________________
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 Geändert von andir (20.04.2012 um 14:47 Uhr) |
|
|||
hehehe, genau das soll ich und dein Tipp hat mich schon weiter gebracht und ich denke, ich weiß nun auch, was ich für den #helper nutzen soll.
Wäre mein neuer CSS-Lieblingslehrer bereit mal zu schauen ob ich die Aufgabe nun "richtig" gelöst habe (mal davon abgesehen, das der ganze Code sicherlich effizienter hätte gelöst werden können): Code:
@charset "utf-8"; #wrapper { margin:0px; padding:0px; background-color: #CCC; width: 400px; /* Eintrag von mir */ } #column1 { background-color: #FFC; width: 190px; padding: 5px; float: left; /* Eintrag von mir */ } #column2 { background-color: #6F9; padding: 5px; float: left; width: 190px; /* Eintrag von mir */ } #helper { clear:left; } #footer { background-color: #FCC; height: 40px; padding: 10px; } |
|
|||
Richtig, das ist wohl die angestrebte Lösung, obwohl ein Extra-Element wie #helper hier wenig elegant ist.
Pluspunkte kannst Du sammeln, indem Du darüber nachdenken kannst (und umsetzen), wie Du die faux-columns-Technik (FAQ) für wrapper einsetzen könntest, damit es so aussieht, als wäre es immer zwei gleich hohe Spalten
__________________
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 |
|
|||
Klingt aufregend mit der Faux-Columns-Technik... bin erstmal froh, dass ich nun die vom Lehrer wohl gewünschte Aufgabenlösung gefunden habe, AAAABER ich werde definitiv mir diese Technik anschauen, hier weiter fleißig mitlesen und hoffentlich noch viel viel lernen
Vielen Dank für deine tolle Hilfe !!!! (auch wenn der übermäßige Gebrauch von Ausdruckszeichen verpöhnt ist) |
Stichwörter |
css, design, layout, spalten |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 17:01 |
Benötige Hilfe :( Html / Css Problem? | Stefanie | CSS | 9 | 17.05.2011 19:12 |
Benötige dringend Hilfe mit CSS in Firefox & IE :( | r4m0n | CSS | 3 | 20.03.2009 12:12 |
CSS Hilfe bei meiner Seite | matschi | CSS | 10 | 28.05.2007 00:49 |
CSS Newbee braucht Hilfe :( | Duodeviginti | CSS | 6 | 17.11.2004 10:54 |