Hi,
ich habe gerade ein kleines Problem, und zwar habe ich ein Layout mit DIV`s erstellt und nun will ich in einem Contentbereich mehrere kleine Div Bereiche mit jeweils einem Image drin habe.
Funktioniert auch im Prinzip alles so wie ich das möchte, jedoch bei dem ersten Div Container gibt es komischerweise einen Abstand zum Rand den ich aber nicht eingestellt habe ich kriege diesen auch irgendwie nicht mehr weg.
Ich bitte die Farbgebung der einzelnen Divs etc. zu entschuldigen das wird keineswegs so bleiben und dient in der Entwicklungsphase nur zu meiner Orientierung.
Hier ein Bild vom Problem
[Blockierte Grafik: http://i1.tinypic.com/6yck9au.jpg]
Also auf dem Bild sieht man ja die einzelnen Divs worum es geht
[Film, Serie, Musik, Dokumentation, Comedy]
Nur der erste Div bereich Film hat irgendwie ein Abstand nach oben ich habe echt keine Ahnung mehr wie das kommt.
wäre Cool wenn man jemand über meinen Code schauen könnte ich poste hier mal die relevanten Daten.
HTML Code
<? include("include/inc_doctype.php"); ?><html>
<head>
<title>FilmDB</title>
<link rel="stylesheet" type="text/css" href="../css/layout_main.css">
</head><body id="page_insert_film">
<div id="main">
<? include("include/inc_head.php"); ?>
<? include("include/inc_navi.php"); ?>
<? include("include/inc_quote.php"); ?>
<? include("include/inc_misc.php"); ?>
<div id="content">
<div class="category">
</div><div class="category">
</div><div class="category">
</div><div class="category">
</div><div class="category">
</div></div>
</div>
</body>
</html>
CSS Datei
/* ===============================================
1. Kalibrierung
============================================= */*{
padding: 0;
margin: 0;
}
/* ===============================================
2. Allgemeine Styles
============================================= */body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #353535; /* dunkles Grau */
color: #00FFCD; /* Blau */
margin: 0;
padding: 0;
}h1{ font-size: 150%; }
h2{ font-size: 130%; }
h3{ font-size: 120%; }
/* ==========================
Hyperlinks */
a.navi_link{
text-decoration: none; /* Entfernt unterstrich aus Navigationslinks */
outline: none; /* Entfernt punktierte Linie um Linkauswahl */
}a:link.navi_link{ color: #000000; } /* Navi Linkfarbe unbesuchter Link */
a:visited.navi_link{ color: #000000; } /* Navi Linkfarbe besuchter Links */
a:hover.navi_link, a:focus.navi_link{ color: #0000FF; } /* Navi Linkfarbe markierter Link */
/* ==========================
Klassen und IDs */
/* Div-Box für die ver. Kategorien */
.category{
position: relative;
top: 30px;
width: 400px;
height: 80px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 1px solid #ffffff;
}/* ===============================================
3. Styles für Layoutbereiche
============================================= */
#main{
position: relative;
width: 1200px;
height: 800px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ffffff;
}#head{
position: relative;
width: 1200px;
height: 100px;
background-color: red;
}
#head h1{
position: absolute;
top: 10px;
left: 325px;
right: 225px;
color: yellow;
}#navi{
position: relative;
width: 150px;
height: 700px;
float: left;
background-color: yellow;
}
/* ===========================
Aktiver Link wird eingefäbrt */
#page_home #navi_home,
#page_insert_film #navi_film_insert{
color: #ff0000;
}#quote{
position: relative;
width: 900px;
height: 30px;
float: left;
background-color: green;
}#content{
position: relative;
top: 30px;
width: 900px;
height: 670px;
margin-left:150px;
background-color: brown;
}#misc{
position: relative;
width: 150px;
height: 700px;
float: left;
background-color: grey;
}
/* ===============================================
4. Sonstige Styles
============================================= */
Vielen Dank schon mal 
