Div-Boxen richtig einstellen

Korlask · #1 (**permalink**) 07.03.2014, 07:44

Habe ein Fehler auf der Seite wobei der Footer nicht unten am Bottom ausgerichtet wird und der Content(Inhalt ) darf nicht über den footer gehen. Bekomme es nicht hin .

Webseite:

Index

Code:

<body> 
<ul id="nav">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>
                    <li><a href="#">Submenu 3</a></li>
                    <li><a href="#">Submenu 4</a></li>
                    <li><a href="#">Submenu 5</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a>
                <ul>
                    <li><a href="#">Submenu 2-1</a></li>
                    <li><a href="#">Submenu 2-2</a></li>
                    <li><a href="#">Submenu 2-3</a></li>
                    <li><a href="#">Submenu 2-4</a></li>
                    <li><a href="#">Submenu 2-5</a></li>
                    <li><a href="#">Submenu 2-6</a></li>
                    <li><a href="#">Submenu 2-7</a></li>
                    <li><a href="#">Submenu 2-8</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Submenu 3-1</a></li>
                    <li><a href="#">Submenu 3-2</a></li>
                    <li><a href="#">Submenu 3-3</a></li>
                    <li><a href="#">Submenu 3-4</a></li>
                    <li><a href="#">Submenu 3-5</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 4</a></li>
        </ul>
        <script src="js/script.js"></script>
<div id="header"></div> 

<div id="wrapper">
	<div id="main">    	
	
		<div id="contentWrapper">
<div id="content">
	
<--- Inhalt --->
			
</div>
</div>
<div id="footer"></div>
</div>

</body>

CSS

Code:

* {
	margin:0;
	padding:0;
}
body {
	padding:0;
	margin:0;
	background: transparent url(../images/web.jpg);
}
html, body, #wrapper {
	height: 100%;  
}

#wrapper {
	margin: 0 ;  
}
#main {
	min-height: 100%;       	
}

#contentWrapper {	  
	padding-bottom: 290px; 
}
#header {
    background: transparent url(../images/header.png) no-repeat;
	top:0;
	right:0px;
	overflow:auto;
	position:absolute;
	height:400px;
	width:430px;
}

#content {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
	font-size: 11px;
	color: #ffffff;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    text-align: left;
    position:absolute;
	top: 60px;
	left: 60px;
	width: 850px;
	display: block;
	background: transparent url(../images/trans.png);
}

#footer {
    background:  transparent url(../images/footer.png) bottom left no-repeat;
	height:290px;
}

h1, h2 {
	padding:0;
	margin:0 5%;	
	font: 20px Lobster, Arial, serif;
}
h2 {
	font-size:20px;
}
#content p {
	margin:1.5% 5%;
	-moz-column-gap:40px;
	-moz-column-count:3;	
	-webkit-column-gap:40px;	
	-webkit-column-count:3;
	column-gap:40px;
	column-count:3;
}

explanator · #2 (**permalink**) 07.03.2014, 10:28

Du hast etliche Fehler in deinem HTML, nicht geschlossene DIVs, falsche Kommentareinleitung(TAG) und zudem passt dein CSS nicht zu dem gezeigtem HTML.

Nutze den Validator um dir die Fehler anzuzeigen.

Zeige den richtigen Code oder lade alles auf einen Server hoch und präsentiere uns den Link.

Korlask · #3 (**permalink**) 07.03.2014, 15:05

Zitat:

Zitat von explanator

Du hast etliche Fehler in deinem HTML, nicht geschlossene DIVs, falsche Kommentareinleitung(TAG) und zudem passt dein CSS nicht zu dem gezeigtem HTML.

Nutze den Validator um dir die Fehler anzuzeigen.

Zeige den richtigen Code oder lade alles auf einen Server hoch und präsentiere uns den Link.

Webseite - Link

Ich benutze 2 CSS eins für die Seite an sich und eins für die Navigation. Hoffe du kannst mir jetzt helfen.

explanator · #4 (**permalink**) 07.03.2014, 19:13

Verwende den doctype von HTML5.
Nutze den Meta-tag von Html5 und verwende die Zeichenkodierung UTF-8.
Siehe auch Angabe der Zeichencodierung in HTML
Verwende die Elemente von HTML5 und nicht lauter divs -->HTML5 Doctor, helping you implement HTML5 today
Div #content braucht keine absolute Positionierung, verwende margin-top und margin-left stattdessen, dann hast du dein gröbstes Problem schon gelöst.
Left, Top und z-index auch raus nehmen .
Verwende eine feste Breite für dein Menü.
Das rechte Hintergrundbild, bei dir div #header braucht ein z-index:-1
Main und wrapper sind meiner Meinung nach überflüssig, aber zumindest die CSS-Angaben zu den beiden Elementen kannst du dir sparen.

Danach passt es zumindest.
Das script Element ist leer und somit überflüssig.

Als letztes:
Füge die beiden CSS-Dateien zu einer zusammen.

Korlask · #5 (**permalink**) 07.03.2014, 20:04

Weltraumspiel

Habe alles soweit nach meinen Wissen geändert. Nur jetzt sieht die Webseite so aus?!

Zitat:

Verwende die Elemente von HTML5 und nicht lauter divs -->HTML5 Doctor, helping you implement HTML5 today

Ohne die Div´s , weiss ich garnicht wie ich das ganze umsatzen kann.

explanator · #6 (**permalink**) 07.03.2014, 20:34

Du hast die Änderungen bei #content nicht durchgeführt, da ist immer noch position: absolute drin, auch die anderen Tipps hast du nicht umgesetzt.

EDIT: Der Grund warum ich dir hier keinen Code gebe ist der Lerneffekt den du daraus ziehen sollst. Gerade absolute Positionierungen machen oft Probleme.

Lesetipp dazu: http://little-boxes.de/lb1/12.4-raus...-absolute.html

Korlask · #7 (**permalink**) 07.03.2014, 21:36

Ich Depp hab die Änderungen bei xampp übernommen (Ordner: htdocs) und nicht hochgeladen und dabei fehlte sogar noch einiges. Danke Dir für die Tips.
Werde mich auf der Arbeit genauer beschäftigen damit. ^^

Korlask · #8 (**permalink**) 10.03.2014, 08:28

Weltraumspiel

Habe ein kleines Probem mit der Navigation linke Seite. Oben sowie unten ist eine Grafik, die nicht an der Navigation dran ist. Bekomme die nicht dran ohne eine Lücke zuhaben. Weiss einer vielleicht eine Lösung?!

cloned · #9 (**permalink**) 10.03.2014, 09:24

Du solltest Hintergrundgrafiken auch als Hintergrundgrafiken definieren und nicht mittels img-Tags einbinden.

Auch ein allgemeiner Tipp: Deine Grafiken lassen sich noch sehr verbessern, du brauchst einfärbige Flächen nicht als Grafik abspeichern. So kannst du für deine Navigation ledliglich den rechten und linken Rand als Grafik abspeichern und die braune Fläche per CSS steuern. Dann kannst du auch leichter die Größe/Höhe und Abstände anpassen ohne die komplette Grafik austauschen zu müssen. Das Selbe gilt auch für die Grafiken bei den Überschriften.
Wenn du schon HTML5 Elemente verwendest, warum nicht auch CSS3 Features wie mehrfache Hintergrundbilder für ein Element? Und warum verwendest du nicht die passenden HTML5-Elemente für einzelne Bereiche? Die Navigation ist kein Artikel, dein footer ist leer und dein Hauptbereich ist wohl auch kein einzelner Artikel.

Korlask · #10 (**permalink**) 10.03.2014, 16:43

Danke für die Hilfe.

Bin auch ein Neuling auf dem Gebiet.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
Div Boxen problem ...	Palorux	CSS	5	08.08.2005 20:18
wie bekommt man das hin mit den div boxen	GateKay	CSS	15	24.02.2005 09:50