div - layout problem

Dualskull · 9. Oktober 2014

Hmm ich hoffe mal das ich hier im richtigen Unterforum bin mit meinem Problem.

Und zwar hab ich mir mit <div> und css3 ein Layout zusammen gebastelt, was ja für meinen Geschmack und Wissen recht nett anzusehen ist.

Nun zu meinem Problem:

Also der Aufbau wäre kurz geschrieben so

HTML

<div maincontainer>




<div header> (logobild) </div header>




<div link> (links per php Datei wird mit include hier eingebunden ) </div link>




<div inhalt> hier wird per php und css id der inhalt angezeigt wenn man auf die links oben klickt </div inhalt>




<div footer> (noch leer) </div footer>




</div maincontainer>

Alles anzeigen

Das Problem ist nun das ich den Link Bereich nicht in der größe beeinflussen kann. Beim Header div-container hab ich eine höhe angeben können zb. hat wunderbar geklappt.
Wenn ich aber beim Link div-container die höhe angeben will rutscht mir das ganze um die Ohren und der Footer bereich klebt dann sehr weit oben.

Mein Plan wäre das ich den Link bereich so ca. 20 - 30 px hoch haben will, eventuell grafische 4eckige Buttons für die Links.
Wo habe ich denn hier meinen Fehler eingebaut ? (Hier kann man sich das ganze Übel Live angucken )

Hoffe mal ich habe hier nichts grundlegendes falsch gemacht
lg
dualskull

Hier mal meine Index.php

PHP

<!DOCTYPE html>
<html lang="de">
<head>
<meta name="generator" content="Bluefish 2.2.3" />
<title>Test Seite</title>
<link rel="stylesheet" type="text/css" href="layout/css/main.css" />  
<link rel="stylesheet" type="text/css" href="layout/css/navi.css">
</head>
<body>
<div id="maincontainer">
  <div id="header">
	<img id="logo" src="layout/image/logo1.png" alt="" title=""/>
  </div>
  <div id="navigation">
  		<?php 
        	include("layout/navi/navi.php");
    	?>
  </div>
  <div id="info"> 
		<div id="inhalt">
		</div>  
  </div>




  <div id="footer">
Fussbereich
  </div>
</div>
</body>
</html>

Alles anzeigen

und hier mal die CSS-Datei

CSS

body {
	font: 100.00% Verdana, Arial, Helvetica, sans-serif;
	color: whitesmoke;
	background:
			radial-gradient(black 15%, transparent 16%) 0 0,
			radial-gradient(black 15%, transparent 16%) 8px 8px,
			radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
			radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#282828;
	background-size:16px 16px;	
}




#maincontainer {
	width: 1200px;
	margin: 0 auto;
}




#header {
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-radius: 20px 20px 0px 0px;
	height: 210px;
}




#logo {
	display: block;
/*	margin: 0px 0px 0px 0px; */
	width: 1198px;
	height: 210px;
	border-radius: 20px 20px 0px 0px;
}




#navigation {
	text-align: center;
	/*margin:-10px 0px -5px 0px;*/
	background-color: black;
	border-right: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
}




#info {
	text-align: center;
	background-color: green;
	height: 30px;	
}




#inhalt {
	text-align: center;
	background-color:#000000;
	border-top: 0px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	border-left: 1px solid #ffffff;
}




#footer {
	text-align: center;
	background-color: #000000;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	border-radius: 0px 0px 20px 20px;
}

Alles anzeigen

The Scout · 10. Oktober 2014

Hmm, da sehe ich noch einige Verbesserungsmöglichkeiten:
1) Dein HTML: du nutzt zwar laut Doctype schon HTML5, was gut ist, aber den größten Vorteil, den es mit sich bringt ignorierst du Und das sind die neuen logischen Auszeichnungen, <header> <nav> <section> <article> <footer> ...
Dann musst du weniger divs verwenden und dein Code wird etwas logischer. Sonst müsste man immer erst ein div suchen und dann die ID prüfen.

2) Dein CSS: "Absolute" Angaben sind immer schlecht. ZB dein maincontainer width: 1200px;
Du solltest immer davon ausgehen, dass Leute daherkommen, die heute noch einen 800x600px Bildschirm nutzen Es gibt inzwischen die tolle neue CSS3 Einheit vw und vh (ViewportWidth und -Height), die jeweils für 1/100tel der aktuellen Anzeigefläche stehen. Das heißt, das skaliert mit der Größe der Anzeigefläche (zB wenn du dein Browserfenster verkleinerst) hat aber alles immer noch das gleiche Verhältnis untereinander. Quasi Prozent, aber leichter mit umzugehen, da alles die gleiche Referenz hat.
Dazu kommt, dass du auch beim CSS darauf achten solltest, den Code "dry" zu halten, also Wiederholungen zu vermeiden. Ich sehe bei dir mehr als 5 Mal die gleiche Auszeichung für border-right und border-left. Nimm die raus und packe sie in einen eigenen Block für alle Elemente, denen du das zuweisen willst:

CSS

header, navigation, inhalt, footer {
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}
header, footer {
    border-top: 1px solid #ffffff;
}
header {
    border-radius: 20px 20px 0px 0px;
    height: 210px;
}
/* Und so weiter */

Alles anzeigen

Zu deinem eigentlichen Problem: Die Browser haben immer verschiedene Standardabstände für die einzelnen Elemente. Setze an den Anfang deines CSS Codes folgendes

CSS

* {
    margin: 0;
    padding: 0;
}

Das elimiert schon einmal diese Unterschiede und du musst darauf keine Rücksicht nehmen. Als Nächstes würde ich wirklich empfehlen, die absoluten Pixelangaben so weit wie möglich zu entfernen und dafür zB vw oder vh zu verwenden.
Als drittes, probier erst einmal, die Breite von Nav, Section und footer auf irgendwas größer als 50% des Vierports zu setzen (also zB Maincontainer auf 80% und die nav, ... auf 100%. Oder direkt nav, ... auf 80vw) und ändere dann die Höhe. Eigentlich sollte da dann auf keinen Fall was springen.
Wobei ich mich sowieso wundere, da ungewolltes Überlappen eigentlich fast immer durch ein unglückliches float oder einen falschen z-index indiziert wird. Beides taucht in deinem Code allerdings nicht auf.

Dualskull · 10. Oktober 2014

Hallöchen

Erst mal auch an dich vielen dank für deine nette Hilfe hier ... ist das erste Forum wo einem nett geholfen wird finde ich echt super.

1) Na dann bin ich schon mal auf den richtigen Weg mit HTML5. Das mit der Auflösung das es verschiedene gibt war mir bewusst, da es sich ja um ein Lern Seite für mich handelt habe ich darauf nicht so geachtet wenn es sinnvoller ist werde ich das auch gleich ändern.

Die Tags <header><nav><article><footer> das ich das nicht verwendet habe muss ich passen keine Ahnung wieso ich das nicht verwendet habe. Ich denke mal ich war so glücklich das ich so halbwegs ein nettes Layout geschafft habe das ich drauf vergessen habe. Hab mir zur Hilfe das hier als Vorlage genommen könnte auch damit zusammen hängen das ich die Tags dann vergessen habe.
Das <section> Tag hab ich in die anderen HMTL - Seiten eingebaut die ja per PHP in den div inhalt geladen werden war das auch ein Fehler ?

2) Das mein CSS komisch ist hab ich schon mitbekommen hehe .
Das mit border-right und left usw. war für mich als Hilfe nur so wusste ich am Anfang gleich wo ich was ändern musste
Soll ich dann die id's an die header, nav usw hängen ?

3) Ich werde mal das ganze überarbeiten und hoffe wenn weitere Fragen / Probleme auftauchen hier weiter fragen.
(so hoffe das ich das heute noch machen kann ...) die Tags <vw> und <vh> muss ich mir noch angucken kannte ich leider garnicht ....

lg dualskull

kanufrosch · 10. Oktober 2014

Habe mir jetzt nicht alles durchgelesen, aber mir kurz deine Seite angeguckt. Was hälst du davon den "navigation"-div auch wieder zuschließen??

Den auf deiner Seite öfnnest du die navi, dann kommen diene Link, und dann schon dein inhalt. Und erst danach schließt du alles wieder?!!? O.o

Kanu

div - layout problem

Jetzt mitmachen!

Teilen