Seite 1 von 2
Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 8:53 pm
von Kmitska
Hallo Leute,
wie ihr wisst, habe ich neulich mit Webseiten angefangen!
Ich habe ein Box erstellt:
Code: Alles auswählen
.boxOne
{
width:500;
height:100;
background-color:black;
border:2px solid grey;
box-shadow:2px 2px 100px black;
color:white;
opacity:0.9;
}
Nun möchte ich, dass dieser Box in der Mitte der Webseite erscheint.
Es gibt bei "font" z.B. "center", aber wie ist das hier?
Danke im Voraus!
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 9:03 pm
von bbbl
Als erstes solltest du den Werten von
.boxOne für
width und
height eine korrekte Einheit mit angeben, hier vermutlich
px.
Um das Ganze zu zentrieren, kannst du
margin: 0 auto; verwenden.
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 9:10 pm
von Kmitska
Na ja, hat sich nur ein bisschen nach Rechts verschoben, aber ist immernoch nicht in der Mitte.
Code: Alles auswählen
boxOne
{
width:500;
height:100;
background-color:black;
border:2px solid grey;
box-shadow:2px 2px 100px black;
color:white;
opacity:0.9;
margin: 0 auto;
}
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 9:12 pm
von bbbl
Wie gesagt, px nicht vergessen!
width: 500px;
height: 100px;
Ansonsten poste bitte mal dein HTML-Code dazu..
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 9:16 pm
von Kmitska
Oh es klappt,
habe vergessen gewisse Tags zu schließen... ( so float:left; Zeug)
Danke dir!
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 9:37 pm
von Kmitska
Noch eine Frage (bisschen Offtopic)
Wieso sieht meine Seite mit iexplore so bescheiden aus?
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 10:13 pm
von Xin
Vielleicht postest Du den Link zu Deiner Seite, damit a) sehen kann, was bescheiden aussieht und b) den Quelltext sehen kann.
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 10:22 pm
von Kmitska
Leider habe ich noch keine Seite, ich teste es auf localhost.
Und da ist einfach kein CSS (sieht so aus) kein Schatten, nichts!
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 10:45 pm
von bbbl
Kmitska hat geschrieben:Und da ist einfach kein CSS (sieht so aus) kein Schatten, nichts!
Tja, ohne den kompletten Quelltext zu kennen kann man da nur raten. Wenn du keinen Schatten im Internet Explorer siehst wird das je nach Version einfach daran liegen, dass der Browser die betreffende CSS3-Eigenschaft schlicht nicht unterstützt.
Re: Sachen in die Mitte stellen
Verfasst: Fr Mär 02, 2012 11:28 pm
von Kmitska
Da Leute, ein kurzes Code, schauts euch mal an:
Code: Alles auswählen
<html>
<head>
<style type="text/css">
body
{
background-image:url('intro.png');
background-repeat:no-repeat;
background-position: top center;
background-color:black;
}
.buttonOne
{
width:500;
height:100;
color:white;
margin:0 auto;
opacity:0.8;
display:block;
text-align:center;
font-weight:bold;
position:absolute;
left:440px;
top:250px;
box-shadow:0px 0px 300px blue;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
#a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#000333;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
border:2px solid grey;
box-shadow:0px 0px 20px white;
}
#a:hover,#a:active
{
background-color:black;
box-shadow:0px 0px 20px black;
}
</style>
</head>
<body>
<div class="buttonOne" style="background-color:grey">
<ul>
<li><a id="a"; href="index.php" style="position:absolute; left:10px; top:30; color:red;" >Home</a></li>
<li><a id="a"; href="login.php" style="position:absolute; left:180px; top:30; color:white;" >Downloads</a></li>
<li><a id="a"; href="design.php" style="position:absolute; left:350px; top:30; color:red;" >Projects</a></li>
</ul>
</div>
</body>
</html>