Ausrichtung von Elementen innerhalb Container

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Hey Leute,
ich komme nicht weiter. Ich will eigentlich nur ein Textfeld erzeugen,
dass unterhalb des Menüs erscheint und sich diesem und dem Inhaltsbereich
anpasst. Ich will da z.B. so was wie das Zitat des Tages unterbringen.
Jedoch schaffe ich es nicht, die Ausrichtung hinzubekommen. Mit float
gehts nicht, absolute Ausrichtung ist nicht geeignet und mehrere Container
erzeugen, bewirkt irgendwie nichts.
Schaut doch mal ins CSS und gebt mir einen Rat.
Eine Beispiel .html Seite habe ich auch beigefügt.

PHP:
body {
    background-color: #afe4f4;
    
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    
    font-family: "Arial", sans-serif;
    color: #F3F3F3;
    
    font-size: medium;
}

#container {

    max-width: 960px;
    margin: 0 auto 0 auto;

}

a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

#inhalt a {
    color: inherit;
    font: inherit;
    text-decoration: underline;
}

a:link {
     color: inherit;
    font: inherit;
    text-decoration: none;
}

a:visited {
     color: inherit;
    font: inherit;
    text-decoration: none;
}

a:hover {
     color: inherit;
    font: inherit;
    text-decoration: none;
}

a:active {
     color: inherit;
    font: inherit;
    text-decoration: none;
}



h1 {
    margin: 0px;
    padding: 0px;
}

#kopfleiste {
    background-color: #366BF4;
    
    width: inherit;
    height: 80px;
    
    margin-bottom: 15px;
    padding-left: 20px;
    
    font-size: 1.2em;
    line-height: 80px;
    box-shadow: 2px 3px 3px 0px #515151;
    -webkit-box-shadow: 2px 3px 3px 0px #515151;
}

#kopfleiste h1 {

    <!--[if IE]
    display: block;
    filter: dropshadow(color=#585858,offX=2,offY=3);
    <![endif]-->

}

#menu {
    
    width: auto;
    height: auto;
    
    float: left;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    
    margin-right: 15px;
    
    font-size: 1.0em;
    box-shadow: 2px 3px 3px 0px #515151;
    -webkit-box-shadow: 2px 3px 3px 0px #515151;

    color: #444444;
    background-color: #FAF9F8;
}

#menu ul {
    list-style-type: none;
    padding:0;
}

#menu li {
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    
    <!--[if IE]
    display: block;
    filter: dropshadow(color=#585858,offX=1,offY=2);
    <![endif]-->
}

#menu li.current {   
    color: #F3F3F3;
    background-color: #366BF4;
}

#inhalt {
    background-color: #FAF9F8;
    
    width: auto;
    height: auto;
    
    overflow: auto;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    
    font-size: 100%;
    line-height: 1.3;
    
    color: #444444;
    box-shadow: 2px 3px 3px 0px #515151;
    -webkit-box-shadow: 2px 3px 3px 0px #515151;
}

table
{
border-collapse:collapse;
}

td
{
padding:15px;
}

tr.wechsel
{
background-color: #EEEEEE;
}

tr.zweitezeile{
    background-color: #F2F1F0;
}

form.kontaktformular fieldset {
    margin-top: 25px;
    padding: 10 10 10px;
    width: 500px;
    //border: none;
}

form.kontaktformular legend {
  padding: 0 10px;
  font-weight: bold;
}

form.kontaktformular label {
    float: left;
    width: 130px;
}

.bold {
    font-weight: bold;
}

form.kontaktformular input, textarea {
    width: 220px;
    margin-bottom: 5px;
}

form.kontaktformular textarea {
    width: 350px;
    height: 150px;
}

#submitbutton {
    margin-left: 0px;
    margin-top: 25px;
    width: 100px;
}


HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width">
    <title>blablaba</title>
    <link rel="stylesheet" type="text/css" media="all" href="stylesheet.css"/>
    <link rel="stylesheet" type="text/css" media="print" href="print.css"/>
    <link rel="stylesheet" type="text/css" media="screen and (max-width:630px),
          screen and (max-device-width: 630px)" href="mobile.css"/>
</head>
<body>
  <div id="container">
    <div id="kopfleiste">
        <h1>blablabla</h1>
    </div>
    
    <img src="blablubb.jpg" alt="bla" width="960" height="330">
    
    <div id="menu">
        <ul>
            <li class="current">ÜBER MICH</li>
            <li><a href="test1.html">test</a></li>
            <li><a href="test2.html">test2</a></li>
            <li><a href="test3.html">test3</a></li>
            <li><a href="impressum.html">IMPRESSUM</a></li>
        </ul>
    </div>
    
    <div id="hier!">
    <p>
    Wieso werde ich nicht unter dem Menü angezeigt???
    </p>
    </div>
    
    <div id="inhalt">
    <h2>ÜBER MICH</h2>
        <p>
           blabla
        </p>
            <p>
               blabla   
            </p>
                <h2>noch ne Überschrift</h2>   
                    <p>
                       blablablubb                             
                    </p>   
                        
                            <p>
                              blabla
                            </p>
                            
                                   <p>
                                    so ist das   
                                   </p>
        <p><a href="kontakt.html">Schickt mir eine E-mail</a> oder <a href="kontakt.html">schreibt mir eine Nachricht</a>.</p>
    </div>
  </div>  <!-- schliesst Container div -->
</body>
 
</html>
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.567
232
63
Hallo

Du musst das Menü und das Zitat in einen übergeordneten Container stecken.

Gruss

MrMurphy
 

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Wenn ich folgenden Code benutze erscheint das "blablabla" zwar links, jedoch im Feld des Menüs.
Wie schaffe ich es, dass es als separates Feld unter dem Menü erscheint???

Code:
<div id="container">
    <div id="kopfleiste">
        <h1>xxx</h1>
    </div>
    
    <img src="yyy.jpg" alt="xxx" width="960" height="330">
    
    <div id="linkeleiste">
    
    <div id="menu">
        <ul>
            <li class="current">xxx</li>
            <li><a href="x.html">xxx</a></li>
            <li><a href="y.html">xxx</a></li>
            <li><a href="z.html">xxx</a></li>
            <li><a href="impressum.html">IMPRESSUM</a></li>
        </ul>
    </div>
    
       <div id="linkestextfeld">
    
           blablabla
        
       </div>
    
    </div>

</div>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Offenbar machst Du es dir viel zu kompliziert: Wenn Du div-Container verwendest, werden diese ohne weitere Maßnahmen untereinander dargestellt und wenn ich dich richtig verstehe, willst Du genau das:
Wie schaffe ich es, dass es als separates Feld unter dem Menü erscheint???
Was dafür verantwortlich ist, dass das Textfeld und das Menü nebeneinander angeordnet werden, ist (in dem Code aus deinem ersten Posting), dass Du dem Menü ein float:left gegeben hast. Deaktiviere ich das, werden die Container untereinander angeordnet.
Wenn ich dich falsch verstehe, dann erkläre genauer, wie du die Container angeordnet haben willst.
 

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Ich versuche mein Anliegen mal grafisch darzustellen...
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Ich habe, glaube ich, noch etwas übersehen: Du möchtest, dass das Menü und die p-Abschnittel links den Raum vertikal ausfüllen. Auch das ist einfach:
https://jsfiddle.net/Sempervivum/9ntwqf5d/3/
Mit display:flex werden die Container nebeneinander angeordnet, da flex-direction:row der Default ist, d. h. Inhalte horizontal nebeneinander.
Bei dem linken Container #links habe ich jetzt display:flex und flex-direction:column verwendet, so dass die Elemente untereinander angeordnet werden. display:flex bewirkt außerdem, dass sie den Raum vertikal vollständig ausfüllen.
Siehe auch hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Ah, ok. Danke.
Wie gesagt, ich habe echt nicht viel Ahnung.
Mein bisheriges Halbwissen habe ich aus dem Buch Webseiten für Einsteiger.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Jeder hat mal angefangen! Flexlayout ist relativ neu und möglicherweise ist es in vielen Anleitungen und Büchern noch nicht drin. Wenn Du noch am Anfang des Lernens bist, empfehle ich, Layouts mit float oder gar absoluter Positionierung zu ignorieren und dich gleich mit Flexlayout vertraut zu machen.
 

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Ich habe jetzt mal alles umgesetzt und wieder ein neues Problem :(...
Wieso sieht die Startseite im Internet Explorer und Firefox ganz ok aus (am besten eigentlich im IExplorer) und in Chrome ganz schrecklich? Wieviele Leute benutzen Chrome?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
Naja Chrome ist meines wissens nach der meist genutzte Browser der Welt. Auch Firefox und IE sind oft benutzte Browser. Hast du auch die Webkits und so eingebunden? Ansonsten einen Link oder zumindest ein Screenshot wäre hilfreich.

Edit: Obwohl Chrome eigentlich mit flexboxen und so klar kommt. Benutzt du eine veraltete Version?

Vllt. hast du es falsch eingebunden. Deswegen wäre der Link zur Seite sehr hilfreich
 
Zuletzt bearbeitet:

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Von webkits habe ich nur mal ganz kurz was gehört. Wenn ich ins .css schaue habe ich nur einmal etwas für boxshadow benutzt.
Schaut einfach mal hier: http://www.catsuitapprentice.de/
Chrome quetscht die linke Leiste ganz schön zusammen, beim Explorer siehts noch am besten aus. Edge ist doch auch sowas wie der Explorer? Da siehts auch bescheiden aus.
 

DidgeFrank

Mitglied
1 August 2017
31
0
6
44
Mein stylesheet sieht zur Zeit so aus:
Code:
body {
    background-color: #afe4f4;
    
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #F3F3F3;
    
    font-size: medium;
}

#container {

    max-width: 960px;
    margin: 0 auto 0 auto;

}

a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

#inhalt a {
    color: #0000FF;
    font: inherit;
    text-decoration: underline;
}

a:link {
     color: inherit;
    font: inherit;
    text-decoration: none;
}

a:visited {
     color: inherit;
    font: inherit;
    text-decoration: none;
}

a:hover {
     color: inherit;
    font: inherit;
    text-decoration: none;
}

a:active {
     color: inherit;
    font: inherit;
    text-decoration: none;
}



h1 {
    margin: 0px;
    padding: 0px;
}

#kopfleiste {
    background-color: #366BF4;
    
    width: inherit;
    height: 80px;
    
    margin-bottom: 15px;
    padding-left: 20px;
    
    font-size: 1.2em;
    line-height: 80px;
    box-shadow: 2px 3px 3px 0px #515151;
    -webkit-box-shadow: 2px 3px 3px 0px #515151;
}

#kopfleiste h1 {

    <!--[if IE]
    display: block;
    filter: dropshadow(color=#585858,offX=2,offY=3);
    <![endif]-->

}

#menu {
    
    width: auto;
    height: auto;
    
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    
    margin-right: 15px;
    
    font-size: 1.0em;
    box-shadow: 2px 3px 3px 0px #515151;
    -webkit-box-shadow: 2px 3px 3px 0px #515151;

    color: #444444;
    background-color: #FAF9F8;
}

#aktuell{
    width: auto;
    height: auto;
    
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  
    margin-top: 15px;
    margin-right: 15px;
    
    font-size: 0.8em;
    box-shadow: 2px 3px 3px 0px #515151;
   -webkit-box-shadow: 2px 3px 3px 0px #515151;
    
    color: #000000;
   background-color: #FAF9F8;
}

#kanji{
    width: auto;
    height: auto;
    
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  
    margin-top: 15px;
    margin-right: 15px;
    
    font-size: 1.0em;
    box-shadow: 2px 3px 3px 0px #515151;
   -webkit-box-shadow: 2px 3px 3px 0px #515151;
    
    color: #000000;
   background-color: #FAF9F8;
}

#kanjimain{
    font-size: 1.2em;
}

#menu ul {
    list-style-type: none;
    padding:0;
}

#menu li {
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    
    <!--[if IE]
    display: block;
    filter: dropshadow(color=#585858,offX=1,offY=2);
    <![endif]-->
}

#menu li.current {   
    color: #F3F3F3;
    background-color: #366BF4;
}

#inhalt {
    background-color: #FAF9F8;
    
    width: auto;
    height: auto;
    
    overflow: auto;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    
    font-size: 100%;
    line-height: 1.3;
    
    color: #444444;
    box-shadow: 2px 3px 3px 0px #515151;
    -webkit-box-shadow: 2px 3px 3px 0px #515151;
}

table
{
border-collapse:collapse;
}

td
{
padding:15px;
}

tr.wechsel
{
background-color: #EEEEEE;
}

tr.zweitezeile{
    background-color: #F2F1F0;
}

form.kontaktformular fieldset {
    margin-top: 25px;
    padding: 10 10 10px;
    width: 600px;
    //border: none;
}

form.kontaktformular legend {
  padding: 0 10px;
  font-weight: bold;
}

form.kontaktformular label {
    float: left;
    width: 130px;
}

.bold {
    font-weight: bold;
}

form.kontaktformular input, textarea {
    width: 220px;
    margin-bottom: 5px;
}

form.kontaktformular textarea {
    width: 350px;
    height: 150px;
}

#submitbutton {
    margin-left: 0px;
    margin-top: 25px;
    width: 100px;
}

#container2 {
    display: flex;
}

#links {
    display: flex;
    flex-direction: column;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Das Zusammenquetschen kannst Du verhindern, indem Du dem Container #links ein flex-shrink:0 gibst:
Code:
#links {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
Außerdem fällt auf, dass, wenn man das Browserfenster sehr schmal macht, der Abstand rechts bei #menu verschwindet. Dafür ist dieses CSS verantwortlich:
Code:
media="screen and (max-width: 630px), screen and (max-device-width: 630px)"
mobile.css:1
#menu {
    position: static;
    float: none;
    margin: 0px 0px 5px 0px;
}
in mobile.css