Ergebnis 1 bis 7 von 7

Thema: Problem mit einem DIV Container

  1. #1
    Interessierte/r
    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit einem DIV Container

    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




    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">
    [img]../images/kategorien/kat_film.jpg[/img]
    </div>

    <div class="category">
    [img]../images/kategorien/kat_serie.jpg[/img]
    </div>

    <div class="category">
    [img]../images/kategorien/kat_musik.jpg[/img]
    </div>

    <div class="category">
    [img]../images/kategorien/kat_dokumentation.jpg[/img]
    </div>

    <div class="category">
    [img]../images/kategorien/kat_comedy.jpg[/img]
    </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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    habs jetzt nicht getestet, aber du gibst doch für die #category divs nen top-wert an.
    Nimm den mal raus. Wenns nciht geht, schau ich morgen ( = nachher) noch mal drüber.

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Darüber hinaus würde ich auf die ganzen position-Angaben verzichten. Das ist bei diesem Layout nicht erforderlich und kann mit float und margin-Angaben besser gelöst werden.

  4. #4
    Interessierte/r
    Themenstarter

    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von jojo87
    habs jetzt nicht getestet, aber du gibst doch für die #category divs nen top-wert an.
    Nimm den mal raus. Wenns nciht geht, schau ich morgen ( = nachher) noch mal drüber.
    Hi,

    wenn ich den Top Wert weg nehme rutschen die Divs ganz nach oben also unter der grünen Leiste, mit dem Top will ich ja davon die 30px Abstand haben.

    Beim rausnehmen bleibt das Problem bestehen

    Sonst noch jemand eine Idee ??!


    // @sejuma hab mal gehört es wäre gut immer wenigstens die Angabe position: relative machen soll, damit man die anderen auf die Elternelemente beziehen kann und nicht auf das Stamm Element html (bei absolute angaben)


    Danke schon mal im Voraus

  5. #5
    Interessierte/r
    Themenstarter

    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Niemand mehr eine Idee ?

  6. #6
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    kannst versuchen bei .category:...

    1. den top-wert auf top:0px; zu stellen
    oder
    2. für jeden einzelnen div-container eine unterschiedliche ID zu benutzen und dann auf position:absolute; statt relative; zu stellen.
    oder
    3. du benutzt eine tabelle

    Lg,
    Dominik

  7. #7
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    was auch gehen sollte (ungetestet): nimm die divs um die Bilder weg und formatiere so:
    Code:
    #content a, #content img &#123;
    display&#58; block;
    padding&#58;0;
    margin&#58;0;
    &#125;

Ähnliche Themen

  1. CSS Container über einem img anzeigen - Firefox Problem
    Von Candyman im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.08.2008, 22:04
  2. CSS Div Container Problem
    Von 00eraser00 im Forum HTML & CSS Forum
    Antworten: 17
    Letzter Beitrag: 08.11.2007, 10:14
  3. link buttons in einem div container positionieren
    Von Corraggiouno im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 03.07.2007, 14:17
  4. Problem mit Container
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 14.04.2007, 10:04
  5. Problem mit div-container
    Von Sebastian S. im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 05.07.2006, 19:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •