Divs spielen verrückt

Heid07 · 11.06.2011

Hallo,

ich habe mal wieder ein Problem ich möchte zwecks Menü Divs untereinander positionieren. Klappt aber nicht, trotz float etc verschieben sich die Divs nebeneinander.

HTML:

<link rel="stylesheet" type="text/css" href="css/styleindex.css" title="Standard-Layout"/>
<style type="text/css">
</style>
</head>

<body>
<div id="content">
  <div id="linkslogo"></div>
  <div id="rechts"></div>
  <div id="linksmenue1"><div id="font">Start</div></div>
  <div id="linksmenue2"><div id="font">Kontakt1</div></div>
  <div id="linksmenue3"><div id="font">Impressum</div></div>
  <div id="linksmenue4"><div id="font">Hallo</div></div>
  <div id="linksmenue5"><div id="font">Start</div></div>

</div>
</body>
</html>

CSS:

Code:

@charset "UTF-8";
/* CSS Document */

#content {
    width:950px;
    height:750px;
    margin:1em auto;
    background-image:url(../bilder/backgroundcontent.png);
    background-repeat:repeat-x;
    
}


#linkslogo {
    width:300px;
    height:200px;
    float:left;
    margin-top:25px;
    background-color:#06C;
}


#rechts {
    width:600px;
    height:200px;
    float:right;
    margin-top: 25px;
}


                            #linksmenue1{
                                margin-top:25px;
                                width:250px;
                                height:40px;
                                float:left;
                                
                            }
                            
                            #linksmenue2{
    margin-top:20px;
    width:250px;
    height:40px;
    background-color:#06C;
    float:left;
                            }
                            
                            #linksmenue3{
    margin-top:20px;
    width:250px;
    height:40px;
    float:left;
    background-color:#06C;
                            }
                            
                            #linksmenue4{
    margin-top:20px;
    width:250px;
    height:40px;
    float:left;
    background-color:#06C;
                            }
                            
                            #linksmenue5{
    margin-top:20px;
    width:250px;
    height:40px;
    float:left;
    background-color:#06C;
                            }
                            
                                #font{
    width:150px;
    height:20px;
    float:left;
    margin-left:20px;
    margin-top: 10px;
                            }

Bin für jeden Tipp dankbar!

simonpicos · 11.06.2011

Wieso machst du für die Schrift immer ein Eigenes Div auf? Schreib den TExt doch einfach in das 1. Div
Das wäre schonmal ein Ansatz..

Also ich hab deine Fehler gefunden...

1. float: left; rausgenommen
2. divs für Text rausgenommen

HTML-Code

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styleindex.css" title="Standard-Layout"/>
<style type="text/css">

                            

</style>
</head>

<body>
<div id="content">
  <!--<div id="linkslogo"></div>
  <div id="rechts"></div>-->
  <div id="linksmenue1">Start</div>

  <div id="linksmenue2">Kontakt1</div>
  
  <div id="linksmenue3">Impressum</div>

  <div id="linksmenue4">Hallo</div>

  <div id="linksmenue5">Start</div>

</div>
</body>
</html>

CSS

HTML:

/* CSS Document */

/*#content {
    width:950px;
    height:750px;
    margin:1em auto;
    background-image:url(../bilder/backgroundcontent.png);
    background-repeat:repeat-x;
    
}


#linkslogo {
    width:300px;
    height:200px;
    float:left;
    margin-top:25px;
    background-color:#06C;
}


#rechts {
    width:600px;
    height:200px;
    float:right;
    margin-top: 25px;
}*/


#linksmenue1{
    margin-top:25px;
    width:250px;
    height:40px;
    background-color:#06C;
}
                            
#linksmenue2{
    margin-top:20px;
    width:250px;
    height:40px;
    background-color:#06C;
    
}
                            
#linksmenue3{
    margin-top:20px;
    width:250px;
    height:40px;
    background-color:#06C;
}
                            
#linksmenue4{
    margin-top:20px;
    width:250px;
    height:40px;
    background-color:#06C;
}
                            
#linksmenue5{
    margin-top:20px;
    width:250px;
    height:40px;
    background-color:#06C;
                            }

Ich habe den Contentbereich und den Logo- und rechts-Bereich mal auskommentiert, weil der irritiert hat.

Aber ich denke mal so sollte es recht sein

cnahlik · 11.06.2011

AW: Divs spielen verrückt

Warum machst du nicht einfach eine Klasse. Das kannst du doch irgendwann nicht mehr händeln mit den ganzen ID's.

CSS:

Code:

 .menueEntry{ margin-top:20px;    
                         width:250px;    
                         height:40px;    
                         background-color:#06C;    
                    }

HTML:

Code:

[COLOR=Black]<html> [/COLOR][COLOR=Black]
<head> 
[/COLOR][COLOR=Black]<link rel="stylesheet" type="text/css" href="css/styleindex.css">
<title="Standard-Layout"/> [/COLOR][COLOR=Black]
<style type="text/css">                                [/COLOR][COLOR=Black]</style> 
[/COLOR][COLOR=Black]</head>
[/COLOR][COLOR=Black]<body>
[/COLOR][COLOR=Black]<div id="content">
[I]<div id="linkslogo"></div>
<div id="rechts"></div>
[/I][/COLOR][COLOR=Black]<div id="linksmenue1" class="menuEntry">Start[/COLOR][COLOR=Black]</div>
[/COLOR][COLOR=Black]<div id="linksmenue2" [/COLOR][COLOR=Black]class="menuEntry" [/COLOR][COLOR=Black]>Kontakt1[/COLOR][COLOR=Black]</div>
[/COLOR][COLOR=Black]<div id="linksmenue3" [/COLOR][COLOR=Black]class="menuEntry" [/COLOR][COLOR=Black]>Impressum[/COLOR][COLOR=Black]</div>
[/COLOR][COLOR=Black]<div id="linksmenue4" [/COLOR][COLOR=Black]class="menuEntry" [/COLOR][COLOR=Black]>Hallo[/COLOR][COLOR=Black]</div>
[/COLOR][COLOR=Black]<div id="linksmenue5" [/COLOR][COLOR=Black]class="menuEntry" [/COLOR][COLOR=Black]>Start[/COLOR][COLOR=Black]</div>
[/COLOR][COLOR=Black]</div>
[/COLOR][COLOR=Black]</body>
[/COLOR][COLOR=Black]</html>[/COLOR]

Und du musst bei deinem CSS float:left entfernen. Damit sagst du das die Divs links ausgerichtet sind aber auch der Zeilenumbruch wird nicht durchgeführt, wenn das nächste Div auch float:left hat. Wie mir scheint hast du noch Verständnisprobleme mit CSS. Die Font geschichte würde ich auch nicht so umsetzen. Mach das doch alles in der Klasse für den Menueintrag. Und auch zusätzliche Divs würde ich hier nicht verwenden. maximal noch das <SPAN> Element. Weiß aber nicht genau was du da noch machen wolltest.

Mway · 12.06.2011

AW: Divs spielen verrückt

Also wenn man sowas macht, würde ich mit absolut und relativ arbeiten.

Deinen ersten DIV richtest absolut aus und von dem aus richtest alle anderne relativ darunter aus.

Diese Methode ist super flexibel und leicht zu handhaben.

Sturmkraehe · 12.06.2011

AW: Divs spielen verrückt

mal ne ganz andere frage: warum baust du dein Menu mit Divs und nicht mit einer liste auf?

molly_68 · 15.06.2011

AW: Divs spielen verrückt

Sturmkraehe schrieb:
mal ne ganz andere frage: warum baust du dein Menu mit Divs und nicht mit einer liste auf?

Das ist eine sehr berechtigte Frage. So ein Menü seh ich auch das erste mal o_O

hubspe · 16.06.2011

AW: Divs spielen verrückt

molly_68 schrieb:
Das ist eine sehr berechtigte Frage. So ein Menü seh ich auch das erste mal

jau, Stichwort Semantik!

Ein Menü ist nun mal eine Aufzählung von Links und gehört deshalb in eine ul.

Mway schrieb:
Also wenn man sowas macht, würde ich mit absolut und relativ arbeiten.

sorry, aber das ist jetzt nicht dein Ernst, oder? :eek:

Exzessiver und unnötiger Einsatz von relativ/absolute ist normal ein typischer Anfängerfehler, weil Anfänger manchmal Probleme haben das Papierdenken abzulegen.
Im vorliegenden Fall ist absolut/relativ aber sowas von unnötig.

Ein vertikales Menü braucht sowas schon deshalb nicht weil es
1. in eine ul gehört und
2. li's Blockelemente sind, die einen Absatz machen und somit automatisch untereinander stehen.
Um die klickbare Fläche zu vergrößern bekommt a idealerweise noch ein display:block; aufgedrückt.

molly_68 · 16.06.2011

AW: Divs spielen verrückt

Genau das wollte ich auch sagen

Mir fehlen bloß ständig die Fachbegriffe *flöt*