Sachen in die Mitte stellen

Fragen zum Thema HTML, JavaScript, PHP
Kmitska
Beiträge: 349
Registriert: Fr Sep 23, 2011 8:49 pm
Wohnort: Karlsruhe, Pforzheim

Sachen in die Mitte stellen

Beitrag von Kmitska » Fr Mär 02, 2012 8:53 pm

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!

Benutzeravatar
bbbl
Beiträge: 80
Registriert: So Jul 19, 2009 12:04 am

Re: Sachen in die Mitte stellen

Beitrag von bbbl » Fr Mär 02, 2012 9:03 pm

Als erstes solltest du den Werten von .boxOne für width und height eine korrekte Einheit mit angeben, hier vermutlich px.

Code: Alles auswählen

.boxOne {
  width: 500px;
  height: 100px;
  ...
}
Um das Ganze zu zentrieren, kannst du margin: 0 auto; verwenden.

Code: Alles auswählen

.boxOne {
  ...
  margin: 0 auto;
  ...
}

Kmitska
Beiträge: 349
Registriert: Fr Sep 23, 2011 8:49 pm
Wohnort: Karlsruhe, Pforzheim

Re: Sachen in die Mitte stellen

Beitrag von Kmitska » Fr Mär 02, 2012 9:10 pm

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;
			}

Benutzeravatar
bbbl
Beiträge: 80
Registriert: So Jul 19, 2009 12:04 am

Re: Sachen in die Mitte stellen

Beitrag von bbbl » Fr Mär 02, 2012 9:12 pm

Wie gesagt, px nicht vergessen!

width: 500px;
height: 100px;


Ansonsten poste bitte mal dein HTML-Code dazu..

Kmitska
Beiträge: 349
Registriert: Fr Sep 23, 2011 8:49 pm
Wohnort: Karlsruhe, Pforzheim

Re: Sachen in die Mitte stellen

Beitrag von Kmitska » Fr Mär 02, 2012 9:16 pm

Oh es klappt,
habe vergessen gewisse Tags zu schließen... ( so float:left; Zeug)

Danke dir! :)

Kmitska
Beiträge: 349
Registriert: Fr Sep 23, 2011 8:49 pm
Wohnort: Karlsruhe, Pforzheim

Re: Sachen in die Mitte stellen

Beitrag von Kmitska » Fr Mär 02, 2012 9:37 pm

Noch eine Frage (bisschen Offtopic)

Wieso sieht meine Seite mit iexplore so bescheiden aus?

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8859
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Sachen in die Mitte stellen

Beitrag von Xin » Fr Mär 02, 2012 10:13 pm

Vielleicht postest Du den Link zu Deiner Seite, damit a) sehen kann, was bescheiden aussieht und b) den Quelltext sehen kann.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Kmitska
Beiträge: 349
Registriert: Fr Sep 23, 2011 8:49 pm
Wohnort: Karlsruhe, Pforzheim

Re: Sachen in die Mitte stellen

Beitrag von Kmitska » Fr Mär 02, 2012 10:22 pm

Leider habe ich noch keine Seite, ich teste es auf localhost.
Und da ist einfach kein CSS (sieht so aus) kein Schatten, nichts!

Benutzeravatar
bbbl
Beiträge: 80
Registriert: So Jul 19, 2009 12:04 am

Re: Sachen in die Mitte stellen

Beitrag von bbbl » Fr Mär 02, 2012 10:45 pm

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.

Kmitska
Beiträge: 349
Registriert: Fr Sep 23, 2011 8:49 pm
Wohnort: Karlsruhe, Pforzheim

Re: Sachen in die Mitte stellen

Beitrag von Kmitska » Fr Mär 02, 2012 11:28 pm

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>

Antworten