DIV-Box center

B

BK117

Aktives Mitglied
Hallo,
ich habe ganz viel gegoogelt, doch selbst nach noch so vielen verschiedenen Versuchen, bekomme ich einfach keine Lösung.
Also.
Ich habe folgende simple HTML-Datei:
HTML: 
<!DOCTYPE HTML>
<html>
	<head>
		<title>Startseite</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<h1 id="&Uuml;berschriften">Startseite</h1>
		<ul>
			<li><a href="http://www.google.de" class="Button">GO TO GOOGLE!</a></li>
			<li><a href="http://www.google.de" class="Button">GOOGLE AGAIN!</a></li>
			<li><a href="http://cdn2.hubspot.net/hub/16856/file-13329862-jpeg/images/trial-graphics-font-confirmation-bias-comic-sans.jpeg?t=1422912996154" class="Button">I LOVE COMIC SANS :D</a></li>
		</ul>
		<div id=div>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut la
        </div>
	</body>
</html>
Und diese CSS-Datei:
Code: 
#Überschriften{
	Color: #FF0000;
	text-shadow: 0px 0px 15px #ffffff;
}

body{
	background: url(Background.png)no-repeat top center;
	background-size: 100%
}

.Button{
	display: block;
	width: 300px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: url(Button.jpg) center center;
	background-size: 100%;
	color: #000000;
	border: 1px solid #77ff77;
	border-radius: 50px;
	transition: all 750ms;
	margin: 5px;

	font-family: "Comic Sans Ms";
	font-weight: bold;
	font-size: 20px;
	text-decoration: none;
	text-shadow: 0px 0px 15px #ff0000;
}

.Button:hover{
	color: #dddddd;
	border-radius: 10px;
	width: 300px;
	height: 135px;
	line-height: 135px;
	margin: 5px;
	text-shadow: 0px 0px 15px #0000ff;
	box-shadow: 0px 0px 50px #ffff00;
	font-size: 21px;
}

ul>li>p{
	color: #ffffff;
	font-size: 20px;
}

ul>li{
	float: left;
	list-style-type: none;
}
ul{
    max-width: 940px;
    margin: 0 auto;
}

#div{
    display: block;
    float: left;
    width: 1200px;
    height: 500px;
    margin: 10px auto;
    border: 2px solid #ffffff;
    border-radius: 50px;
	color: #dddddd;
    text-align: center;
    font-family: "Comic Sans Ms";
	font-weight: bold;
	font-size: 15px;
	text-decoration: none;
	text-shadow: 0px 0px 15px #0000ff;
}
Jetzt meine Frage:
Ich habe das große DIV unter den drei kleinen "Buttons" (unsorted list elemente). Diese habe ich auch zentriert. Das war kein Problem.
Aber die DIV (ganz unten in der CSS-Datei) will einfach nicht zentriert sein. Ich habe bei "margin" schon "auto" mit drinstehen, und ich habe auch schon versucht, in einer anderen DIV- die über den kompletten Bildschirm geht "text-align: center;" einzubringen, und die tatsächliche DIV da rein zubringen.

Aber das hat alles aus welchem Grund auch immer nicht funktioniert.
Wie bekomme ich in diesem Fall die DIV in die horizontale Mitte der Website?
Ich hoffe ihr könnt mir helfen.

Gruß BK

(Ich benutze die aktuellste Version des Google Chromes, und der zeigt das zumindest nicht zentriert an, auch wenn ich davon ausgehe, dass es nicht am Browser liegt, aber trotzdem dachte ich, schreib ich das mal dazu ;))
 
Zuletzt bearbeitet:
stg

stg

Top Contributor
Streich einfach mal das "float: left" unter "#div {... }" (einfach ersatzlos weglassen...)
Das zerschießt dir alles...
 
Zuletzt bearbeitet:
B

BK117

Aktives Mitglied
Erstmal danke für deine Antwort.
An sich würd ich das gerne weglassen, aber dann ist die DIV Box oben in den anderen Buttons drin, und passt sich nicht mehr der Forum der anderen Buttons an.

Was könnte ich machen, um diesen Problem dann zu lösen?

Danke und gute Nacht,
BK
 
B

BK117

Aktives Mitglied
Ja, genau. Danke. Warum geht es so, aber nicht auf meine Art?
Was ist denn bei mir der ausschlaggebende Punkt, sodass es nicht funktioniert?

Nico
 

Aktuelle Jobs

Neue Themen


Oben