CSS - Div Problem [Margin]

mari0

Hallo Leute ich habe ein Frage,

meine Bild sollte bereits viel Aussage (5-Sterne für die Paintkunst :D)

Aktuell sieht meine Seite aus wie auf dem ersten Bild. Ich möchte den Content jedoch so haben wie auf dem zweiten Bild.
Das Problem ist wenn ich meinem div.content einen margin-top:10px; gebe schiebt sich mein div.body, welcher um den div.content
ist vom div.navi weg.

Ich möchte jedoch das sich der div.content nur vom div.navi nach unten schiebt, damit es so aussieht wie auf Bild 2 und nicht
das sich der div.body von div.navi wegschiebt....

Kann mir einer sagen wie ich das mache ? Hab ich irgendein denk Fehler ?

djheke

Mit deiner Grafik können wir nichts anfangen. Ein Link zur Seite wär besser. Oder aber, den gesamten HTML und CSS Quelltest posten.

mari0

Hier meine index.php und template.css (arbeite mit Joomla) -> Webseite

index.php

PHP

<?php defined( '_JEXEC' ) or die; 






// variables


$app = JFactory::getApplication();


$doc = JFactory::getDocument(); 


$menu = $app->getMenu();


$active = $app->getMenu()->getActive();


$params = $app->getParams();


$pageclass = $params->get('pageclass_sfx');


$tpath = $this->baseurl.'/templates/'.$this->template;






// generator tag


$this->setGenerator(null);






// template css


$doc->addStyleSheet($tpath.'/css/template.css.php');






?><!doctype html>






<html lang="<?php echo $this->language; ?>">






<head>


  <jdoc:include type="head" />


  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


  <link rel="apple-touch-icon-precomposed" href="<?php echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">


  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">


  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">


  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">


</head>


  


<body class="<?php echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('site')).' '.$active->alias.' '.$pageclass; ?>">


  <div id="box">
      <div id="page">
        <div id="header">
            <div id="logo">


            </div>
        </div>
        <div id="navi">
            <jdoc:include type="modules" name="hauptmenue" />
        </div>
        <div id="body">
            <div id="content">
                <jdoc:include type="component" />
            </div>
        </div>
        <div id="footer">


        </div>
      </div>
  </div>


</body>






</html>

Alles anzeigen

template.css

Code

/* FRONTEND CSS
*********************************************/


html {
    /* scrollbar fix (prevent ugly left pull for lower content sites) */
    overflow-y: scroll;
    background-image: url("../images/css/bg2.jpg");
    background-attachment: fixed;
}


body {
 margin: 0;
}






/* MEDIA QUERIES
*********************************************/


/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {


}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {


}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {


}


/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {

}
/* BLOCKLIFE Template*/
/* By Zampano*/


/* Page */
#page {
    margin: 50px auto;
    width: 960px;
    position: relative;


}
/* Header */
#header {
    margin-top: 20px;
    width: 960px;
    height: 150px;
    background-color:rgba(0, 0, 0, 0.6);
}
#navi {
    width: 960px;
    height: 30px;
    background-color: rgba(0,0,0,0.8);
    position: relative;
}


#navi ul {
    margin: 0;
    list-style: none;
}


#navi li {
    padding: 6px 20px 6px 20px;
    float: left;
}


#navi a {
    text-decoration: none;
    color: dimgray;
}


#navi a:visited {
    color: dimgray;
}


#navi li.active a {
    color:#ffffff;
}


/* Body */
#body {
    width: 960px;
    background-color:rgba(0, 0, 0, 0.6);
}


#content {
    background-color: rgba(255,255,255,0.6);
    margin: 10px;
}


#content .item-page {
    padding: 15px;
}


.page-header h2 {
    margin: 0;
}
/* Footer */
#footer {
    width: 960px;
    height: 30px;
    background-color: rgba(0,0,0,0.8);
    margin-bottom: 50px;
}

Alles anzeigen

djheke

Denke mal, dass es so gehen sollte.

Code

#body {
    width: 940px; /* Um 20 pixel verringert */
    background-color:rgba(0, 0, 0, 0.6);
    padding:10px; /* Padding 10 Pixel */
}


#content {
    background-color: rgba(255,255,255,0.6);
   /* Margin entfernt */
}

Alles anzeigen

mari0

Ja klappt, Vielen dank

Könntest du mir auch erklären wieso das so ist ?

Tags