zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe bei einer CSS-Aufgabe.. verzweifele langsam

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2012, 11:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 4
JohnLabarre befindet sich auf einem aufstrebenden Ast
Standard 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;
	}
Die Aufgabenstellung sagt, das folgende Eigenschaften entstehen sollen:

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2012, 11:36
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.04.2012, 13:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 4
JohnLabarre befindet sich auf einem aufstrebenden Ast
Reden

>> 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;
	}
Ich habe das padding übersehen gehabt, ich habe nun den Abstand zu links auf 200px festgelegt, das wären dann die 190px + 5px padding aus Column1 + 5px padding aus Column2 = 200 px. Da der Rahmen ja auf 400 Pixel deckelt (vom Wrapper her), muss ich die 2te Spalte nicht extra festlegen (da ich jeweils nur einen Code bzw. eine Zeile einfügen kann/soll/darf).

>> 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
Mit Zitat antworten
  #4 (permalink)  
Alt 20.04.2012, 13:37
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 20.04.2012, 14:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 4
JohnLabarre befindet sich auf einem aufstrebenden Ast
Standard

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;
	}
Mit Zitat antworten
  #6 (permalink)  
Alt 20.04.2012, 15:06
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 20.04.2012, 15:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.04.2012
Beiträge: 4
JohnLabarre befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Stichwörter
css, design, layout, spalten

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:55 Uhr.