Problem: Box wird langgezogen

Backfighter · 24 Juli 2012

Hallo liebes Forum

Ich habe schon wieder ein Problem :
Die RubrikBox wird nach oben langgezogen :?

css code:

Code:

    body {
        background-color: rgb(30,30,30);
        background-attachment: fixed;
        background-position: center center;
        background-image: url("Bilder/Background.png")
    }
    p {
        font: 100% sans-serif;
        color:rgb(31,68,222);
        text-align: left;
        /* border: 2px outset black; */
        margin: 5px 20px 5px 20px;
        background-color:rgb(40,40,40);
    }
    p.center{
        font: 100% sans-serif;
        color:rgb(31,68,222);
        text-align: right;
        /* border: 2px outset black; */
        margin: 5px 20px 5px 20px;
        background-color:rgb(40,40,40);
    }
    p.Button{
        font-family: sans-serif;
        text-align: center;
        border: 2px outset black;
        color:rgb(1,38,214);
        background-color: rgb(40,40,40);
    }
    h1 {
        font: bold 500% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
        text-transform: capitalize;
        text-shadow:5px 10px 10px black;
    }
    h2 {
        font: bold 350% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
    }
    h3 {
        font: bold 150% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
        text-decoration: underline;
    }
    h4 {
        font: bold 100% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
        text-shadow:5px 10px 10px black;
        margin-top:10px;
        margin-bottom:10px;
    }
    th {
        font: bold 150% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
    }

    td {
        font: 100% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
    }
    img{
        margin-top:15px;
    }
    a.MenüReiter {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 270%;
        text-decoration: none;
        text-align: left;
        color:rgb(1,38,214);
        padding-right: 20px;
        margin-top:8px;
        background-color: rgb(70,70,70);
        border: 8px groove black;
        float: left;
        text-shadow:5px 5px 5px black;
    }
    a.Rubrik {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 150%;
        text-decoration: none;
        color:rgb(1,38,214);
        text-shadow:5px 5px 5px black;
    }
    a {
        font-family: sans-serif;
        font-weight: bold;
        text-decoration: none;
        color:rgb(1,38,214);
    }
    a:hover {
        font-size: 120%;
    }
    a:hover.MenüReiter {
        font-size: 300%;
        background-color: rgb(80,80,80);
    }
    a:hover.Rubrik {
        border: 3px solid blue;
        font-size: 150%;
    }
    ul.Rubrik{
        padding: 50px 50px 100px 30px;
        width: 130px;
        background-color:rgb(40,40,40); 
        border: 5px ridge black;
        list-style-type: square;        
    }
    ul.Downloads{
        list-style-image: url("Bilder/DownloadSymbol.png")
    }
    input {
        text-align: left;
        background-color: rgb(30,30,30);
        color:rgb(31,68,222);
        border: 3px solid rgb(10,10,10);
    }
    input .Registation{
        text-align: left;
        margin-right:400px;
        background-color: rgb(30,30,30);
        color:rgb(31,68,222);
        border: 3px solid rgb(10,10,10);
    }
    input.Button_zentriert{
        margin:30px 0px 30px 400px;
        color: rgb(31,68,222);
        background-color: rgb(30,30,30);
        font-size: 200%;
    }
    input:hover.Button_zentriert{
        background-color: rgb(50,50,50);
    }
    #Box{
        float:left;
        border: 2px outset black;
        padding:0px 300px 100px 300px;
        margin-left:10px;
        background-color:rgb(40,40,40); 
    }
    #menu{
        list-style-type:none;
        padding: 20px 0px 160px 10px;
        background-color:rgb(40,40,40); 
        border: 5px ridge black;
        background-image: url("Bilder/PW-Games.png");
        background-repeat: no-repeat;
        -webkit-background-size: cover; /* Safari, Chrome */
        background-size: cover; /* Opera, IE, W3C Standard */
    }
    #PWGamesLogo{
        width: 100%;
    }
    #login{
        font: 80% sans-serif;
        color:rgb(31,68,222);
        text-align: left;
    }
    #LoginBox{
        float:left;
        width: 215px;
        border: 2px outset black;
        margin-right:10px;
        margin-bottom:20px;
        background-color:rgb(40,40,40); 
    }

Betroffene Stellen:

Code:

    h4 {
        font: bold 100% sans-serif;
        color:rgb(1,38,214);
        text-align: center;
        text-shadow:5px 10px 10px black;
        margin-top:10px;
        margin-bottom:10px;
    }
[COLOR=#b22222]    a.Rubrik {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 150%;
        text-decoration: none;
        color:rgb(1,38,214);
        text-shadow:5px 5px 5px black;
    }
    a:hover.Rubrik {
        border: 3px solid blue;
        font-size: 150%;
    }
    ul.Rubrik{
        [/COLOR][COLOR=#ff0000]padding: 50px 50px 100px 30px;[/COLOR][COLOR=#b22222]
        [/COLOR][COLOR=#ff0000]width: 130px;[/COLOR][COLOR=#b22222]
        background-color:rgb(40,40,40); 
        border: 5px ridge black;
        list-style-type: square;        
    }[/COLOR]
    input {
        text-align: left;
        background-color: rgb(30,30,30);
        color:rgb(31,68,222);
        border: 3px solid rgb(10,10,10);
    }
    #Box{
        float:left;
        border: 2px outset black;
        padding:0px 300px 100px 300px;
        margin-left:10px;
        background-color:rgb(40,40,40); 
    }
[COLOR=#b22222]    #login{
        font: 80% sans-serif;
        color:rgb(31,68,222);
        text-align: left;
    }
    #LoginBox{
        [/COLOR][COLOR=#ff0000]float:left;[/COLOR][COLOR=#b22222]
        [/COLOR][COLOR=#ff0000]width: 215px;[/COLOR][COLOR=#b22222]
        border: 2px outset black;
[/COLOR][COLOR=#ff0000]        margin-right:10px;
        margin-bottom:20px;[/COLOR][COLOR=#b22222]
        background-color:rgb(40,40,40); 
    }[/COLOR]

Html code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" 
            content="text/html;charset=utf-8" />
        <title>Meine erste Hompage!</title>
        <link rel="stylesheet" type="text/css" href="Styles/style.css" />
    </head>
    
    <body>
        <ul id="menu">
            <li><a href="./index.html" class="MenüReiter">Hauptseite</a></li>
            <li><a href="./index.html" class="MenüReiter">Projekte</a></li>
            <li><a href="./index.html" class="MenüReiter">Downloads</a></li>
            <li><a href="./index.html" class="MenüReiter">Sonstiges</a></li>
            <li><a href="./index.html" class="MenüReiter">Impressum</a></li>
        </ul>
        <div id="LoginBox">
            <h4>Login</h4>
            <p id="login">    E-mail:<input type="text" name="email"> <br />
                Passwort:<input type="password" name="passwort" maxlength="16"> <br />
                <input type="submit" value="Login" style="Margin-top:10px">
            </p>
        </div>
        <div id="Box">
            <h1>Überschrift</h1>
            <h2>Eine Liste</h2>
            <p class="Button"><a href="mailto:[email protected]" title="Kontaktiert mich über meine Mail Ardresse">Kontaktieren</a></p>
            <p>all rights reserved by Peter Werner &copy;</p>
        </div>
        <ul class="Rubrik">
            <li><a href="./index.html" class="Rubrik">News</a></li>
            <li><a href="./index.html" class="Rubrik"></a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
        </ul>
    </body>
    
</html>

Betroffene Stellen:

HTML:

        <div id="LoginBox">
            <h4>Login</h4>
            <p id="login">    E-mail:<input type="text" name="email"> <br />
                Passwort:<input type="password" name="passwort" maxlength="16"> <br />
                <input type="submit" value="Login" style="Margin-top:10px">
            </p>
        </div>
        <div id="Box">
            <h1>Überschrift</h1>
            <h2>Eine Liste</h2>
            <p class="Button"><a href="mailto:[email protected]" title="Kontaktiert mich über meine Mail Ardresse">Kontaktieren</a></p>
            <p>all rights reserved by Peter Werner &copy;</p>
        </div>
        <ul class="Rubrik">
            <li><a href="./index.html" class="Rubrik">News</a></li>
            <li><a href="./index.html" class="Rubrik"></a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
            <li><a href="./index.html" class="Rubrik">Sonstiges</a></li>
        </ul>

Ich bedanke mich jetzt schon für eure Hilfe :)

mfG Backfighter

Cheffchen · 24 Juli 2012

Hallo,

das kommt von dem gefloate, wo mir jetzt etwas gerade der sinn fehlt aber egal.

zwei möglichkeiten,

1. du floatest schon weiter und gibst der ul.Rubrik auch ein float:left
2. oder haust ein clear rein zwischen den letzten div und den ul

Code:

</div>
<div style="clear:both"></div>
<ul class="Rubrik">

Cheffchen

Backfighter · 24 Juli 2012

Hmm also ich bin noch anfänger und falls es ne vom aufbau her bessere Lösung gibt...
Erklär mal was du Sinnfrei findest :)

mfG Backfighter

Cheffchen · 24 Juli 2012

Hallo,

ich erkenn bloss nicht wie das aussehen soll, denn bei mir ist das jetz so bei 1400 breite.
etwas viel float oder nicht?

Sieht auch etwas eckig aus oder meinst nicht.

Cheffchen

Backfighter · 25 Juli 2012

Also geplant ist, dass der Kasten mit der Überschrift den Rechten Teil ausfüllt, der Login Bereich soll über der Rubrik Leiste sein und inetwa die selbe Breite haben. Das Menü ist so gut wie es ist

Ja eckig ist es schon aber wie mach ich es Rund?

Es gibt da nen unoffizziellen Befehl : CSS3 im Detail: Border-Radius – Norman's Blog
wird auch schon von allen bekannten Browsern unterstützt, aber ich weiß nicht ob ich den verwenden soll :/

Banana_Jones · 25 Juli 2012

Backfighter schrieb:
Es gibt da nen unoffizziellen Befehl : CSS3 im Detail: Border-Radius – Norman's Blog
wird auch schon von allen bekannten Browsern unterstützt, aber ich weiß nicht ob ich den verwenden soll :/

Wieso nicht? Solcherlei Eigenschaften, die nur einen kosmetischen Effekt haben, nutze ich selbst bedenkenlos. Natürlich sollte man sein Design nicht ausschließlich auf solche Effekte aufbauen, aber wenn die ein oder andere Ecke im IE eckig statt wie im Chrome abgerundet ist, tut das der Seite in der Regel keinen Abbruch.
Im Gegenteil steht der Nutzen, sollte man versuchen solche Effekte in älteren Browsern 1:1 abzubilden, normalerweise in keinem Verhältnis zum Aufwand

Backfighter · 25 Juli 2012

Ok gut dann benutze ich ihn :)

Danke :)

Problem: Box wird langgezogen

Backfighter

Neues Mitglied

Cheffchen

Senior HTML'ler

Backfighter

Neues Mitglied

Cheffchen

Senior HTML'ler

Backfighter

Neues Mitglied

Banana_Jones

Aktives Mitglied

Backfighter

Neues Mitglied

Neueste Beiträge