Anordnung von Elementen mit css

hundebeinem · 4. September 2014

Hallo, ich suche Rat

-------------------------------------------------------------------------------------------------------------------------------------------

Rahmenbedingungen

zusätzliche Techniken: keine

Einschränkungen: keine

Browser & Betriebssystem: W7, Firefox

Editor: DW

Danke für jeden guten Rat
Peter

Problembeschreibung

Fehlermeldung/-beschreibung:

Aufgabenstellung

Der "container" soll alle Elemente außer dem
"fuss" umfassen und sich auf Bildschirmmitte zentrieren.

Der "fuss"soll sich bei Ausdehnung des "container"
immer am unteren Ende des "container" befinden.

Auftretende Fehler

Der "container" erweitert sich nur in Abhängikeit
von der Logohöhe nach unten.

Die übrigen Elemente verhalten sich als ob sie auf einer
anderen Ebene liegen würden.

Die Schaltflächen "li" lassen sich nicht auf den
linken Rand von "#ul" setzen.

bisherige Lösungsversuche: lesen von Artikeln und probieren

Code:

HTML

<body>
    <div id="container">container
        <div id="logo">"logo"
        </div>
        <!--#logo-->
        <div id="inhalt">"inhalt1"</div>
        <!--inhalt1-->
        <div id="inhalt2">id "inhalt2"</div>
        <div id="navigation">id navigation
            <div id="ul">
                <ul>
                    <li>Artikel1</li>
                    <li>Artikel2</li>
                    <li>Artikel3</li>
                    <li>Artikel4</li>
                    <li>Artikel5</li>
                    <li>Artikel6</li>
                    <li>Artikel7</li>
                    <li>Artikel8</li>
                </ul>
            </div>
        </div>
        <!--#navigation-->
    </div>
    <!--#container-->
    <div id="fuss">id "fuss"</div>
</body>




</html>

Alles anzeigen

CSS

@charset "utf-8";
body {
	background-color: hsl(60,100%,75%);
	height: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}




#container {
	background-color: hsl(180,100%,50%);
	height: 100%;
	width: 1100px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	margin-bottom: 0px;
}
#logo {
	background-color: hsl(60,33%,38%);
	height: 150px;
	width: 150px;
	position: relative;
	left: 0px;
	top: 0px;
}




#fuss {
	background-color: hsl(120,100%,25%);
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	height: 80px;
	margin-bottom: -80px;
}




#navigation {
	background-color: hsl(300,100%,25%);
	height: 408px;
	width: 180px;
	position: absolute;
	left: 0px;
	top: 200px;
	padding-left: 0px;
}
#ul {
	height: 363px;
	width: 132px;
	position: absolute;
	left: 0px;
	top: 29px;
	background-color: hsl(330,100%,50%);
	padding-left: 0px;
}




li {
	background-color: hsl(0,0%,64%);
	height: 30px;
	width: 100px;
	list-style-type: none;
	position: relative;
	padding-top: 5px;
	padding-left: 10px;
	float: left;
	left: 0px;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}




#inhalt {
	background-color: hsl(0,0%,0%);
	height: 500px;
	width: 400px;
	position: absolute;
	left: 210px;
	top: 10px;
	color: hsl(0,0%,100%);
}




#inhalt2 {
	background-color: hsl(0,0%,24%);
	height: 500px;
	width: 400px;
	position: absolute;
	left: 650px;
	top: 10px;
	color: hsl(0,0%,100%);
}

Alles anzeigen

wolf · 4. September 2014

Den eigenen Code lesbar im Forum präsentieren

So wie dein Code jetzt ist, habe ich überhaupt keine Lust ihn zu lesen, weil er für mich keine direkt Logik enthält..

Grüße, Wolf

lauras · 5. September 2014

Ich habe das mal für dich bereinigt, da du neu bist. Nächstes mal bitte selbst machen

wolf · 5. September 2014

charset setzen ist meistens html kram..(gehört in head )

HTML

<meta charset="utf-8">

position:absolute, bewirkt das die Elem. in einer anderen 'ebene' sind! Vergiss dieses arbeiten mir position absolute&co. gaaanz schnell.. bitte.

Weiterhin würde dir html5 weiterhelfen..!

Das wird jetzt das ganze Design kaputtmachen aber ist besser so..

CSS

body {
    background-color: hsl(60,100%,75%);
    /* das alles einfach mal weglassen */
}




#container {
    background-color: hsl(180,100%,50%);
    height: 100%;




    /* Verzichte auf feste werte!! lieber eine maximale breite festlegen! */
    width: 100%;
    max-width: 1100px;




    /* ein einfaches ist bsser */
    margin: auto;
}
#logo {
    background-color: hsl(60,33%,38%);
    height: 150px;
    width: 150px;
    /* sollte sich doch automatisch links oben befinden, wenn es auserhalb des containes liegen soll, ist es im html an der falschen stelle */
}




#fuss {
    background-color: hsl(120,100%,25%);




    /* Verzichte auf feste werte!! lieber eine maximale breite festlegen! */
    width: 100%;
    max-width: 1100px;




    height: 80px;
}




#navigation {
    background-color: hsl(300,100%,25%);
    height: 408px;
    width: 180px;




    margin-top: 200px;
}
#ul {
    height: 363px;
    width: 132px;




    margin-top: 29px;




    background-color: hsl(330,100%,50%);
}




li {
    background-color: hsl(0,0%,64%);
    height: 30px;
    width: 100px;
    list-style-type: none;
    padding-top: 5px;
    padding-left: 10px;
    float: left;
    left: 0px;
    margin-top: 3px;
}




#inhalt {
    background-color: hsl(0,0%,0%);
    height: 500px;
    width: 400px;
    left: 210px;
    top: 10px;
    color: hsl(0,0%,100%);
}




#inhalt2 {
    background-color: hsl(0,0%,24%);
    height: 500px;
    width: 400px;
    left: 650px;
    top: 10px;
    color: hsl(0,0%,100%);
}

Alles anzeigen

Hier mal ein html5 Beispiel.. natürlich noch stark optimierbar http://jsfiddle.net/xajhvrjw/

Basi · 5. September 2014

Auch CSS-Dokumente können mit charset ausgerüstet werden, das ist immer dann nötig wenn man zum Beispiel in Schriftarten nicht-ASCII-Zeichen verwenden muss (was natürlich auch anders lösbar ist, aber wer es möchte ). In diesem Fall ist der Code so wie oben geschrieben genau korrekt, zusätzlich muss das Dokument natürlich als UTF-8 (oder Anderes) gespeichert werden. Der CSS-Parser muss nun mal auch erfahren wie er mit den Bytes umgehen soll.

w3c sagt:

CSS

@charset "charset-name";

hundebeinem · 25. September 2014

Ich bedanke mich für eure Hinweise, besonders auf HTML5.
Nun werde ich alles neu mit HTML5 aufbauen.
Beste Grüße

Anordnung von Elementen mit css

Jetzt mitmachen!

Teilen