Ergebnis 1 bis 5 von 5

Thema: CSS - Div Problem [Margin]

  1. #1
    HTML Newbie
    Registriert seit
    04.09.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS - Div Problem [Margin]

    Hallo Leute ich habe ein Frage,

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

    help9d24khu5gs.jpg

    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 ?
    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
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    461
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: CSS - Div Problem [Margin]

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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    04.09.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS - Div Problem [Margin]

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

    index.php
    Code:
    <?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>
    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;
    }
    Geändert von mari0 (04.09.2014 um 11:29 Uhr) Grund: Webseite hinzugefügt

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    461
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: CSS - Div Problem [Margin]

    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 */
    }

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    04.09.2014
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS - Div Problem [Margin]

    Ja klappt, Vielen dank

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

Ähnliche Themen

  1. margin top
    Von toto1982 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.08.2013, 23:18
  2. Problem: margin-bottom
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 07.11.2008, 13:35
  3. Style- margin-top problem
    Von dani_227 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 29.05.2006, 17:30
  4. problem: min-width und margin:0 auto 0 auto
    Von rib im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 26.12.2005, 22:05
  5. Css Problem mit Margin
    Von Phaeilo im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.05.2005, 21:50

Stichworte

Berechtigungen

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