Problem mit CSS und margin schon wieder !!!

littlecloud · 24. Juni 2013

Hallo,

ich hab meine Seite auf Html 5 umprogrammiert und dachte ich bekomme die Probleme mit margin nicht mehr .... nun ja falsch gedacht... der Befehl margin-top funktioniert wieder nicht (Google Chrome hab ich). Und ich weis nicht wieso. Und das Element hängt unten an der Fußleiste und nicht neben dem normalen Inhalt.... und ich weis nicht wieso. Vielleicht geht es nicht wegen dem anderen Element?

Also hier ist mal der CSS Code

CSS

#inhalt2 {         float: right;         margin-right: 20px;         margin-bottom: 80px;         margin-top: 5px;         border: 1px grey solid;         background-color: white;         padding: 20px;         margin-left: 1200px;         display: block;}

der Html Code ist unnötig , da ich schon durch gekuckt hab und das footer richtig gesetzt ,dass div auch und section auch...

Brauche Hilfe !!!
LG little cloud

lauras · 24. Juni 2013

HTML & komplettes CSS wäre schon hilfreich.. sonst können wir nur raten, was für Elemente darüber oder sonst wo stehen

Roland · 24. Juni 2013

also Abstände können sich überlappen.
ansonsten musst vll doch mal html teil mitschicken

littlecloud · 24. Juni 2013

okay

HTML

header, nav, section, footer {    display: block; }
html,body { width: 1600px; heigth: 100%;margin: 0 auto;  }
#seite {      background:url('http://www.fotos-hochladen.net/uploads/hintergrundbildl5agpv1bt2.jpg') fixed ;
}







nav {    background-color: lightblue;     font-family: Arial;     color: white;     text-align: right;     padding: 30px;     word-spacing: 20pt;     padding-right: 100px;     border-bottom:  1px grey solid;
}#navi a:link      { color:white;    text-decoration:none; }#navi a:visited { color:white;  text-decoration:none; }#navi a:focus   { color:white;  text-decoration:none; }#navi a:hover   { color:white;    text-decoration:underline; }#navi a:active  { color: white; text-decoration: underline; }
#überschrift {           font-family: Journal;           font-size: 70pt;           padding-left: 100px;           color: white;           text-align: left; 
}section {    font-family: Segoe UI Light;    font-size: 14pt;    text-align:  center; 
  }
#inhalt1 {  background-color: white;   margin-top: 50px;   margin-right: 500px;   margin-left: 120px;   margin-bottom: 20px;   border: 1px grey solid;
}
#inhalt2 {         float: right;         margin-right: 20px;         margin-bottom: 80px;         margin-top: 5px;         border: 1px grey solid;         background-color: white;         padding: 20px;         margin-left: 1200px;         display: block;}




footer {     background-color: skyblue;     font-family: Arial;     color: white;     border: 1px grey solid;}

Alles anzeigen

CSS

<!doctype html>
<html><head> <title> little blue cloud </title><meta charset="iso-8859-1"><link rel="stylesheet"  href="style.css"  type="text/css"  media="screen" />
<script>document.createElement("header");document.createElement("nav");document.createElement("section");document.createElement("footer");</script>
</head><body><div id="seite">
<nav> 
<div id="navi">
<div id="überschrift"> little blue cloud } </div>
 <a href="little_blue_cloud.htm">Startseite</a><a href="blog.htm">Blog</a><a href="termine.htm">Galerie</a><a href="impressum.htm">Impressum</a> 
</div>   </nav>







<section> <div id="inhalt1">
<p> <strong> Willkommen auf little_blue_cloud.de </strong> </p><p> Schauen du dich hier ruhig um.  Auf dieser Seite gibt es eine Galerie. </p>  <p>Außerdem einen online Blog ,in dem ihr auch bald Kommentare rein schreiben könnten. Kommentiert fleißig :)-Diese Website besteht seit dem 23.06.2013. - </p>
<p> <strong> Updates </strong>
<p> Hier werden die Updates der Seite stehen  wie z.B. neue Blog Nachrichten /Eintrage... </p> </div>







<div id="inhalt2">
<strong> Die Top 10 </strong> <img src="http://www.zauberhogwarts.de/sonstiges/button03.gif">  </div>  </section>
<footer> &copy; by  ...</footer>




</body></html>

Alles anzeigen

Hier

lauras · 24. Juni 2013

hui.. da sind ja einige Sachen drin die nicht ganz passen.. ich verbesser dir das erstmal mit Erklärung, dann schaun wir mal ob das Problem immer noch auftritt, ja?

HTML

<!DOCTYPE html>
<html>
    <head>
        <title> little blue cloud </title>
        <meta charset="utf-8"> <!-- sonst musst du die Umlaute maskieren - UTF-8 ist immer die erste Wahl -->
        <link rel="stylesheet"  href="style.css"  type="text/css"  media="screen" />
        <script>
            document.createElement("header");
            document.createElement("nav");
            document.createElement("section");
            document.createElement("footer");
        </script>




        
    </head>
    <body>
        <div id="seite">
            <nav> <!-- den zusätzlichen div brauchst du nicht! -->
                <h2> little blue cloud  </h2> <!-- eine Überschrift sollte auch eine Überschrift sein! -->
                    <ul> <!-- eine Navigation sollte immer eine Liste sein! -->
                        <li><a href="little_blue_cloud.htm">Startseite</a></li>
                        <li><a href="blog.htm">Blog</a></li>
                        <li><a href="termine.htm">Galerie</a></li>
                        <li><a href="impressum.htm">Impressum</a></li>
                    </ul>
            </nav>
            <section> 
                <div id="inhalt">
                    <h1>Willkommen auf little_blue_cloud.de</h1> <!-- das hier ist vermutlich deine Hauptüberschrift, die sich auf den Unterseiten ändert-->
                    <p> Schauen du dich hier ruhig um.  Auf dieser Seite gibt es eine Galerie. </p>  
                    <p>Außerdem einen online Blog ,in dem ihr auch bald Kommentare rein schreiben könnten. Kommentiert fleißig :)-Diese Website besteht seit dem 23.06.2013. - </p>
                    <h2>Updates</h2> <!-- Überschriften sollten immer Überschriften sein! -->
                    <p> Hier werden die Updates der Seite stehen  wie z.B. neue Blog Nachrichten /Eintrage... </p> 
                </div>
                <div id="sidebar">
                    <h2>Die Top 10</h2>
                    <img src="http://www.zauberhogwarts.de/sonstiges/button03.gif" alt="hier alternativ Beschreibung einfügen">  <!-- alt-Attribut ist wichtig! -->
                </div>  
            </section>
            <footer> &copy; by  ...</footer>
        </div>
    </body>
</html>

Alles anzeigen

CSS

header, nav, section, footer {    
                display: block; 
            }




            html, body { 
                width: 1600px; 
                height: 100%; /* hier war ein Rechtschreibfehler - height, nicht heigth */
                margin: 0 auto;  
            }




            #seite {      
                background: url('http://www.fotos-hochladen.net/uploads/hintergrundbildl5agpv1bt2.jpg') fixed ;
            }




            nav {    
                background-color: lightblue;     
                font-family: Arial, sans-serif;  /* immer eine Alternatie angeben */   
                color: white;     
                text-align: right;     
                padding: 30px;     
                word-spacing: 20pt;     
                padding-right: 100px;     
                border-bottom:  1px grey solid;
                margin-bottom: 20px;
            }




            nav li {
                list-style: none;
            }




            nav ul a:link, nav ul a:visited, nav ul a:focus { /* zusammenfassen spart Schreibarbeit und hilft zur Übersicht */
                color: white;    
                text-decoration: none; 
            }







            nav ul a:hover, nav ul a:active { 
                color: white;    
                text-decoration: underline; 
            }




            h1 {           
                font-family: Journal, serif;  /* immer eine Alternatie angeben */         
                font-size: 70pt;           
                padding-left: 100px;                    
                text-align: left; 
            }




            section {
                font-family: "Segoe UI Light", Arial, sans-serif;  /* wenn Leerzeichen dazwischen sind mit Anführungszeichen! - immer eine Alternatie angeben */  
                font-size: 14pt;    
                text-align:  center; 
            }

            #inhalt {  
                background-color: white;        
                margin-left: 120px;      
                border: 1px grey solid;
                float: left;
                width: 60%;
                margin-bottom: 20px;
            }
            #sidebar {        
                float: right;        
                margin-right: 120px;                        
                border: 1px grey solid;         
                background-color: white;         
                padding: 20px; 
            }




            footer {    
                background-color: skyblue;     
                font-family: Arial, sans-serif;     
                color: white;     
                border: 1px grey solid;
                clear: both;
            }

Alles anzeigen

So, ich hab das mal verbessert.. an den meisten Sachen sind Kommentare dran zum Nachzuvollziehen.
Das Problem dass das Ding am Footer hängt ist auch gelöst - Dein #inhalt1 hatte kein float und ein margin-right von 500px - wenn da rechts 500px lang nichts kommen darf, weicht der andere halt nach unten aus
Wenn du Fragen hast, immer her mit.

littlecloud · 24. Juni 2013

och ne nicht schon wieder -.- okay zu meiner Verteidigung seit gestern hab ich mit Html 5 angefangen ....

Ja bitte mach das !

lauras · 24. Juni 2013

Macht ja auch nichts
Das sind mehr so grundlegende Sachen, mit denen es sich schonmal leichter arbeitet
In 50% der Fällen ist das Problem dann erledigt

Code ist oben

littlecloud · 24. Juni 2013

okay danke Du hast mir Dinge beschrieben dich gar nicht wusste, weil sie auch im Kurs nicht genau so erklärt wurden ..... zu Html 5 gibt es ja nur zwei Themen ..... irgendwie schäm ich mich total.......
und was muss ich jetzt für angaben machen für die andere "Box"? Oder einfach so übernehmen wie von dir?

lauras · 24. Juni 2013

Warum schämen? Schau dir mal meine ersten Posts hier an.. Jeder fängt mal klein an
Ich würde an deiner Stelle den Code den ich gepostet habe mal durchgehen, und schauen ob du alles (und zwar jede einzelne Zeile) nachvollziehen kannst.. Falls irgendwo nur die kleinste Frage auftaucht: fragen!!
Nur so lernt man was..
Hast du den HTML-Teil durch? Grundsätzlich ist das nämlich nicht so anders, in HTML 5 kommen nur ein paar Dinge dazu

lg

littlecloud · 24. Juni 2013

ja hab ich Danke für deine Hilfe

Problem mit CSS und margin schon wieder !!!

Jetzt mitmachen!

Teilen