Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

margin beinflusst äußere div

Antwort erstellen

margin beinflusst äußere div

Beitragvon LML » 14.04.2011, 02:15

hey,
habe nach fast nem jahr ohne webdesign wieder angefangen eine seite zu machen.
Allerdings tritt bereits bei dem design ein seltsames problem auf.
Und zwar habe ich eine main div in welcher der hauptinhalt dargestellt werden soll. In dieser div sollen nun z.B. neuste meldungen angezeigt werden, welche wiederrum in div's sind. damit natürlich ein gewisser abstand zum rand der main entsteht, habe ich margin benutzt, allerdings entsteht hierbei nach oben und unten hin kein abstand zur main-div, sondern beide haben oben die gleiche startposition, während der abstand über der main hingepackt wird.

Hier der CSS und der HTML code:
Code: Alles auswählen
<div id="header"></div>
  <div id="latest_tours"></div>
  <div id="main">
    <div class="content">
      <div class="contect_content">
        asd
      </div>
    </div>
    <div class="content">
      <div class="contect_content">
        dsa<br/>asd
      </div>
    </div>
  </div>


Code: Alles auswählen
#header{width:1024px;height:120px;background:#1F3A84;}
#latest_tours{width:1024px;height:180px;background:#1B52A3;}
#main{width:1024px;background:#10619B;}
.content{width:768px;margin-left:20px;margin-top:20px;margin-right:20px;margin-bottom:20px;background:#10889B;}
.content_content{width:760px;margin-left:4px;margin-top:4px;margin-right:4px;margin-bottom:4px;}


die margin-top, etc. sind noch alle einzeln weil ich dabei ein wenig geguckt habe, ob es dann funktioniert, leider nicht.
Ich habe auch schon versucht den margin-top von der main div zu ändern, bringt allerdings auch nicht, außer ich erhöhe ihn auf über 20, dann wird der abstand nach oben hin verändert. ein margin:0; besteht bereits für *{}

Hier ein bild:
Bild
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon djheke » 14.04.2011, 08:32

fällt dir was auf

<div class="content">
<div class="contect_content">
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: margin beinflusst äußere div

Beitragvon LML » 14.04.2011, 12:04

ja, ändert aber auch nichts;)
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon LML » 14.04.2011, 13:11

das schlimmste ist eigentlich das die neusten versionen von FireFox, Opera und Chrome es genau so anzeigen und der IE6 es so anzeigt wie ich es möchte ;ddd
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon Azra » 14.04.2011, 13:18

Warum verwendest du kein padding im Elternelement?
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: margin beinflusst äußere div

Beitragvon sejuma » 14.04.2011, 13:28

Lade die Seite mal irgendwo hoch und poste bitte einen Link, damit man alles im Zusammenhang sieht.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46
Nach oben

Re: margin beinflusst äußere div

Beitragvon LML » 14.04.2011, 14:47

ich benutze im generellen lieber margin als padding, da padding die größe mit beeinflusst und man die abstände hinterher über margin schneller abändern kann.

Hier mal hochgeladen (hab derzeit keinen webspace):
http://www.speedyshare.com/files/27962527/test.rar
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon LML » 14.04.2011, 14:49

wenn man vor/nach den div's mit dem margin oben und unten mind. ein zeichen hat, dann tritt dieser fehler nicht mehr auf, allerdings wird das margin dann erst ab dem zeichen genutzt.
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon djheke » 15.04.2011, 07:39

Ich war mal so frech und habe deinen code etwas abgeändert.
Das ist bei rausgekommen.
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Margin geht doch</title>
<style type="text/css">
* {
   margin:0;
   padding:0;
   list-style:none;
   border:none;
  }

html {
background:#555;
}

body {
position:relative;
width:1024px;
margin:0 auto;
font: 100.01% tahoma , arial,helvetica, sans-serif;
background:#09c;

}

#header {
position:relative;
background:#ddd;
height:200px;
}

#latest_tours {
background:#aaa;
height:100px;
}


#main {
position:relative;
width:100%;
overflow:auto;
}

#content {
width:768px;
float:left;
  background:#a33;
}

#content h3 {
margin:10px;
}
#navigation {
width:256px;
background:#ddd;
float:right;
}

#navigation ul {
margin:20px;
}

#navigation h4 {
margin:10px;
}

#footer {
background:#000;
color:#fff;
clear:both;
}

#footer p {
margin:30px 0 0 0;
text-align:center;
color:#ddd;
}

.content_content {
margin:10px;
padding:10px;
background:#ffa;
color:#000;
border:1px solid #000;
}



</style>
</head>

<body>
<div id="header">
  Webseite
</div>

  <div id="latest_tours">
    Tour
  </div>
 
   <div id="main">
      <div id="content">
      <h3>News</h3>
        <div class="content_content">
          <h4>Paris</h4>
        </div>
      
   <div class="content_content">
           <h4>Rom</h4>
         </div>
      
    <div class="content_content">
           <h4>Erkner</h4>
         </div>
       </div>
      
      <div id="navigation">
        <h4>Navigation</h4>
         <ul>
     <li><a href="#">Startseite</a></li>
   </ul>
      </div>   
  </div>

   <div id="footer">
    <p>&copy; by Webmaster</p>
   </div>
</body>
</html>


Den DOCTYPE kannst du noch nach xhtml umstellen
Hier dein Livebeispiel: http://www.gipspferd.de/css/forum/latest.htm
Wolltest du es so ?
mfg
henry
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: margin beinflusst äußere div

Beitragvon Azra » 15.04.2011, 11:09

Ähm ...
Man muss bei padding sowie margin die Höhe und Breite des Elementes anpassen, denn beides addiert sich hinzu. Meist ist es aber nur bei padding sichtbar.
Verwende also padding und zieh den wert von der Höhe ab (etc.)
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: margin beinflusst äußere div

Beitragvon LML » 15.04.2011, 14:01

beim margin wird der abstand zwar außen hinzugefügt, aber das ändert die größe der div selber nicht, dabei wird eigentlich nur der abstand zu anderen elementen festgelegt, während padding den inneren platz beibehält, dafür das element aber vergrößert.

djheke, so in ungefähr, ja:)

aber warum beeinflusst das margin von content den oberen abstand von main zu tours wenn main leer ist?
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon djheke » 15.04.2011, 16:21

also wenn du mein code als basis nimmst sollte alles prima klappen.
deine beschriebenen fehler treten hierbei nicht auf. übrigens nimmst du für menen geschmack zu viel div's

mfg
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: margin beinflusst äußere div

Beitragvon LML » 26.04.2011, 21:06

der grund war ein nicht präsentes "float:left;" bei manchen klassen/id's :)
LML
neu hier
 
Beiträge: 7
Registriert: 14.04.2011, 02:01
Nach oben

Re: margin beinflusst äußere div

Beitragvon abendrise » 30.04.2011, 06:37

habe das Gefühl, es hat etwas damit zu tun, wie die Margen sind zusammengebrochen (kombiniert) von W3C kollabierenden Margin.:

In dieser Beschreibung bedeutet der Ausdruck einstürzenden Margen, die angrenzenden Ränder (keine nicht-leeren Inhalt, Polsterung oder Grenzgebieten oder Clearance trennen) von zwei oder mehr Boxen (die nebeneinander oder ineinander verschachtelt werden dürfen) zu einem einzigen Marge Form kombinieren .

Meine Theorie ist, dass seit Ihrer ersten Element ist neben dem Körper die beiden Ränder kombinieren und sind auf den Körper aufgetragen: Diese Kräfte des Körpers Gehalt unterhalb der angewandten zusammengebrochen Marge in Übereinstimmung mit dem Box-Modell zu starten.

Es gibt Situationen, in denen die Margen nicht zusammenbrechen, die es wert sein Spiel mit (von kollabierenden Margin):

* schwebte Elemente
* absolut Elemente positioniert
* Inline-Block-Elementen
* Elemente mit Überlauf, etwas anderes als sichtbar eingestellt (sie nicht zusammenbrechen Margen mit ihren Kindern.)
* gelöscht Elemente (Sie wissen nicht zusammenbrechen ihre oberen Ränder mit ihren Eltern Blocks unteren Rand.)
* das Root-Element
abendrise
neu hier
 
Beiträge: 5
Registriert: 30.04.2011, 05:59
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "margin beinflusst äußere div"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de
cron