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

Text klebt an der Decke ._.

lemon1337

Neues Mitglied
Ich verzweifle hier schon so langsam an einem problem..

und zwar ist der text : "test text bla bla" andauernd ganz oben, ich würde ihn aber gerne in der mitte haben^^

HTML:
<html>  
    <title>Z8 Account Calculator</title>
  
<link rel="stylesheet" type="text/css" href="design.css"></link>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <script type="text/javascript">
    /* <=!=[=C=D=A=T=A=[ */
    $(document).ready(function(){
        var zuklapptext = "Contact";
        var aufklapptext = "Contact";
        $(".pre-spoiler").children("input").toggle(
            function(){
                this.value = zuklapptext;
                $(this).parent().children(".spoiler").first().slideDown();
            }, function(){
                this.value = aufklapptext;
                $(this).parent().children(".spoiler").first().slideUp();
            });
        });
    /* ]=]=> */
</script>

<style type="text/css">
a:link { text-decoration:none; color:transparent; }
a:visited { text-decoration:none; color:transparent; }
a:hover { text-decoration:none; background-color:transparent; }
a:active { text-decoration:none; background-color:transparent; }
a:focus { text-decoration:none; background-color:transparent; }
</style>

</head>

<body>

    <div id="header">

        <div id="h1">
        <a href="new.html"><img src="h1.png"></img></a>
        </div>
      
    </div>

    <div id="main">
  
        <div id="m1">

            test text bla bla
          
        </div>
  
    </div>

    <div id="footer">
  
        <div id="f0">
        </div>
      
        <div id="f1">
        <input type=button onClick="parent.location='faq.html'" value='FAQ' style="font-size:20px; border-style:none;">
        </div>
      
        <div id="f2">
      
        <div class="pre-spoiler">
            <input name="button" type="button" value="Contact" style="font-size:20px; border-style:none;">
                <div class="spoiler" style="display: none;">[email protected]</div>
        </div>
      
        </div>
      
        <div id="f3">
      
            <input type=button onClick="parent.location='http://crossfire.z8games.com/index2.aspx'" value='Z8 Games' style="font-size:20px; border-style:none;">
      
        </div>
      
        <div id="f4">
        </div>
          
    </div>
  
</body>
</html>

css:
Code:
body {
background-color:#F0F0F0;
margin:0;
padding:0;
}
#header {
width:100%;
height:80px;
background:#434446;
}
#h1 {
margin-top: 10px;
margin-bottom: 10px;
float:left;
}
#main {
margin:0 auto;
width:90%;
height:600px;
margin-top: 35px;
text-align: center;
background:#2E2F31;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
#m1 {
clear: both;
margin-right: auto;
margin-left: auto;
text-align: center;
vertical-align: middle;
}
#footer {
width:100%;
height:50px;
margin-top: 10px;
background:#F0F0F0;
}
#f0 {
width:20%;
font-size:20;
color:black;
text-align: center;
float:left;
font-family:Arial;
margin-top:0.5%;
margin-bottom:0.5%;
}
#f1 {
width:20%;
font-size:20;
color:black;
text-align: center;
float:left;
font-family:Arial;
margin-top:0.5%;
margin-bottom:0.5%;
}
#f2 {
width:20%;
font-size:20;
color:black;
text-align: center;
float:left;
font-family:Arial;
margin-top:0.5%;
margin-bottom:0.5%;
}
#f3 {
width:20%;
font-size:20;
color:black;
text-align: center;
float:left;
font-family:Arial;
margin-top:0.5%;
margin-bottom:0.5%;
}
#f4 {
width:20%;
font-size:20;
color:black;
text-align: center;
float:left;
font-family:Arial;
margin-top:0.5%;
margin-bottom:0.5%;
}
 
Werbung:
So:
Code:
#main {
    ...
    position: relative;
    ...
}

#m1 {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 91px;
    height: 20px;
}

Höhe und Breite je nach Inhalt anpassen.
 
Werbung:
Hm, du kannst auch die Höhe des Main-Bereichs rausnehmen und stattdessen z.B.
Code:
padding: 150px 0;
verwenden.
 
Zurück
Oben