Positionierung von DIVs

Lisa1392 · 4. Januar 2020

Hallo zusammen,

ich bin gerade dabei mir selbständig html und css beizubringen. Also versuche ich gerade erste Experimente.

Ich möchte ein ganz simples Website Layout aufbauen und mithilfe von divs und befehlen display: inline zu positionieren. Hier der Code dazu:

HTML

<!DOCTYPE html>
<html lang="de">
    
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <title>Meine erste Website</title>
        
        <style>

            #header {
                width:90%;
                Height:30px;
                background-color: #00FF80;
  
                }

            #website{
              width: 90%;
            }

            #menuehorizontal{
              width: 980px;
              height: 45px;
              background-color:white;
              display: inline;
            }
    
    
            #menuevertical{
              width: 20%;
              height: 400px;
              background-color:indianred;
              display: block;
            }
            #content {
              width:70%;
              height:400px;
              background-color:#00FF80;
                margin-left: 300px;
                display: inline;
            }

            #contenttext{
              font:arial;
              width:450px;
              height:100px;
              margin-left:50px;
              padding-top: 50px;
              font-family: Helvetica;
              font-size: 11px;
                display: inline-block;

            }

            #cta{
              width:150px;
              height:40px;
              background-color:white;
              margin-left:50px;
              font-family: Helvetica;
              Text-Align: center;
                display: inline-block;

            }

            #footer{
              width:980px;
              height:200px;
            }


            ul {
              list-style-type: none;
            }


            li {
              display: inline;
              padding: 18px;
              font-family: Helvetica

              }
  
        </style>
    
      </head>
  
  

  
  <body>
    
    <div id="website">
      
      
              <div id="header" style="border:1px solid black;">
              
              </div>
      
      
              <div id="menuehorizontal"  style="border:1px solid black;">
          
          <img src="C:/Users/lisa-/Desktop/logo_textmarke.png" height="40px" style="float:left; margin-left:50px;">
          
          <ul style="display:inline">
            <li>Über uns</li>
            <li>Unsere Leistungen</li>
            <li>Unser Portfolio</li>
          </ul>
              
              </div>
        
        
            <div id="menuevertical">
        
                <ul>
                    <li>Über uns</li>
                    <li>Leistungen</li>
                    <li>Referenzen</li>
                    <li>Impressum</li>
                
                </ul>
        
        
            </div>
        
      
    <div id="content" style="border:1px solid black;">
           
               <div id="contenttext"  style="border:1px solid black;">
             <p>Vielen Dank für Ihr Interesse! Hier finden Sie <span style="color:orange;font-weight:bold">Inspiration</span> und Anregungen für Ihren Innovationspool. Möchten Sie mehr erfahren treten Sie gerne mit uns in Kontakt.</p>
                </div>       
           
               <div id="cta" style="border:1px solid black;">
              <p>Jetzt kontaktieren!</p>
            </div>
      
    </div>
          
        
          <div id="footer" style="border:1px solid black;">
            <p>Das ist der Footer</p>
          </div>
      
    </div>
    
  
  
  </body>
  
   

  
</html>

Alles anzeigen

In der Praxis sieht es im Browser so aus:

html-seminar.de/woltlab/attachment/2137/

Was mache ich falsch, dass das weiße Rechteck (div=content) mit schwarzer Border und dem Text nicht bündig beginnt wie das vertikale Menü (div=verticalmenue)?

Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?

Viele Grüße,

Lisa

Sempervivum · 4. Januar 2020

Zitat

Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?

Das stimmt im Prinzip, es gibt jedoch (mindestens) einen Fallstrick bei der Sache:

padding und border werden der Breite zugeschlagen. Z. B. wenn Du zwei Container mit der Breite 50% hast, 10px padding und 2px border und der Platz beträgt 1000px, dann ergibt sich für einen Container jeweils ein Breite von 524px, so dass sie nicht mehr nebeneinander in die verfügbare Breite von 1000px nebeneinander passen.

Lösung 1:

Die Breite berechnen, indem padding und border von den 50% subtrahiert werden.

Lösung 2 (besser):

box-sizing: border-box; verwenden, siehe hier:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing

Lösung 3 (am besten):

Flexlayout verwenden, siehe z. B. hier:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Damit hast Du noch viele weitere Möglichkeiten, die Anordnung der Element zu steuern.

Der Hauptgrund für deine Probleme mit dem Layout ist jedoch, dass Du float verwendest. Auch darauf kannst Du verzichten, wenn Du Flex nimmst.

Noobie_Chan · 6. Januar 2020

Moin,

ich habe mir mal erlaubt deinen code aufzuräumen. (ist nicht ganz fertig) Hoffe das man es jetzt besser lesen kann. Habe mich bemüht deinen code nicht all zu viel zu verändern. Für die zukunft trenne deinen code strikt: HTML und CSS. Denke das du auch probleme hast mit der "ordnung" (wo du was abspeicherst, pfad zum bild ist weit) zb.: Projekt -> Src -> img, css, js,... (Ordner). Habe dir alle div einen rahmen gegeben somit werden die div sichtbar.

Wie soll die Seite aussehen? Kann nicht ganz so nachvollziehen wo was positioniert werden soll.

Vorlage als hilfestellung beim coden (so mach ich es):

html-seminar.de/woltlab/attachment/2141/

TIPP:

#content löschen: margin-left: 300px;

#contenttext löschen: margin-left: 50px;

Dann solltest du noch so 1px links luft haben, denke das du: Groß box in der eine kleiner box ist, die kleine box größer formatiert hast als die kleine.

HTML:

HTML

<!DOCTYPE html>
<html lang="de">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Meine erste Website</title>
        <link rel="stylesheet" type="text/css" href="src/styles.css">
    </head>
    
    <body>

        <div id="website">
           
            <div id="header"></div>
            
            <div id="menuehorizontal">
                
                <img id="logo_textmarke" src="src/img/logo_textmarke.png" alt="Logo">

                <ul style="display:inline">
                    <li>Über uns</li>
                    <li>Unsere Leistungen</li>
                    <li>Unser Portfolio</li>     
                </ul>

            </div>

            <div id="menuevertical">

                <ul>
                    <li>Über uns</li>
                    <li>Leistungen</li>
                    <li>Referenzen</li>
                    <li>Impressum</li>
                </ul>

            </div>

        <div id="content">
            
            <div id="contenttext">
                <p>Vielen Dank für Ihr Interesse! Hier finden Sie <span>Inspiration</span> und Anregungen für Ihren Innovationspool. Möchten Sie mehr erfahren treten Sie gerne mit uns in Kontakt.</p>
            </div>       

            <div id="cta">
                <p>Jetzt kontaktieren!</p>
            </div>

        </div>

        <div id="footer">
            <p>Das ist der Footer</p>
        </div>

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

Alles anzeigen

CSS:

Code

* { box-sizing: border-box; }

div { border: 1px solid black; }

#header {
    width: 90%;
    Height: 30px;
    background-color: #00FF80;
    border: 1px solid black;
}

#website { width: 90%; }

#menuehorizontal {
    width: 980px;
    height: 45px;
    background-color: white;
    border: 1px solid black;
    display: inline;
}

#menuevertical {
    width: 20%;
    height: 400px;
    background-color: indianred;
    display: block;
}

#logo_textmarke {
    height: 40px;
    float: left;
    margin-left: 50px;
}

#content {
    width: 70%;
    height: 400px;
    background-color: #00FF80;
    margin-left: 300px;
    display: inline;
    border: 1px solid black;
}

#contenttext {
    font: arial;
    width: 450px;
    height: 100px;
    margin-left: 50px;
    padding-top: 50px;
    font-family: Helvetica;
    font-size: 11px;
    display: inline-block;
    border: 1px solid black;
}

span {
    color: orange;
    font-weight: bold;
}

#cta {
    width:150px;
    height:40px;
    background-color:white;
    margin-left:50px;
    font-family: Helvetica;
    Text-Align: center;
    display: inline-block;
    border:1px solid black;
}

#footer {
    width:980px;
    height:200px;
    border:1px solid black;
}

ul { list-style-type: none; }

li {
    display: inline;
    padding: 18px;
    font-family: Helvetica;
}

Alles anzeigen

Ich würde dir empfehlen alles nochmal zu schreiben, step by step. (ein container nach dem anderen aufbauen)

Hoffe das ich etwas helfen konnte. Gn8 =)

Positionierung von DIVs

Jetzt mitmachen!

Teilen