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

Ausrichtung von Elementen innerhalb Container

DidgeFrank

Mitglied
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>
 
Werbung:
Werbung:
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>
 
Ich versuche mein Anliegen mal grafisch darzustellen...
Grafik1.png
 
Werbung:
Werbung:
Ah, ok. Danke.
Wie gesagt, ich habe echt nicht viel Ahnung.
Mein bisheriges Halbwissen habe ich aus dem Buch Webseiten für Einsteiger.
 
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?
 
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:
Werbung:
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.
 
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;
}
 
Supertoll! Danke, jetzt siehts in Chrome wieder "normal" aus.
Das mobile.css habe ich aus dem Buch übernommen.
Bis jetzt habe ich mir die Seite nur bedingt auf einem Smartphone angesehen,
aber ich denke, ich kann damit leben, wenn der Abstand weggeht. Sind ja auch nur 15px,
wenn ich mich nicht irre.
 
Werbung:
Zurück
Oben