Div mittig positionieren - hilfeee! Isch flippe aus!

Lisa · 12 November 2010

Hallo Leute,
Bin ganz neu hier und habe schon in vielen Foren nachgeschaut um ein Div mittig zu positionieren.
Leider hat keines der Tips geholfen. :(
Ich glaube ich habe etwas grundlegendes in der Css/Html datei falsch gemacht, deswegen kann ich das Div (Container/Container_inhalt) nicht zentrieren.
Es soll einfach horizontal mittig zentriert werden :(

Bin etwas verzweifelt, würde mich echt freuen wenn mir jemand etwas unter die Arme greifen kann :*
LG,
Lisa :)

Hier der CSS Code:

Code:

@charset "UTF-8";
/* CSS Document */

/* the bit that does the work */

body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#fff; 
  font-family:arial, verdana, sans-serif; 
  font-size:76%;
  overflow: hidden; 
  }

/* for internet explorer */
* html body {
  padding:120px 0 50px 0; 
  }

#container {
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 1.2em;
  position:fixed; 
  top:120px;
  left:0;
  bottom:50px; 
  right:0; 
  overflow:auto; 
  background:#FFF;
  padding:20px;
  text-align:center;
  width:auto;
  }

* html #container {
  height:100%; 
  width:100%; 
  }
  

#container_inhalt {
	position:absolute;
	left:200px;
	

}

#header {
  position:absolute; 
  top:0; 
  left:0;
  width:100%; 
  height:128px; 
  overflow:hidden; 
  text-align:center; 
  background:#000000;
  border-bottom:1px solid #000000;
  }
* html #header {height:127px;}


#footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  height:135px; 
  overflow:hidden; 
  text-align:center; 
  background:#000000;
  border-top:5px solid #000000;
  }
* html #footer {height:130px;}

/* end of bit that does the work */

h1 {font-size:4em; margin:0; padding:0;}

#footer p {
  color:#fff; 
  margin:5px 10px 0 10px;
  }


#header img {
  margin:10px 10px 0 10px;
  }
#container img {margin:5px;}
#absolute {
  position:absolute; 
  top:400px; 
  right:100px; 
  width:200px; 
  background:#ddd; 
  padding:10px; 
  border:1px solid #000;
  }

#left {
  float:left; 
  background:#eee; 
  padding:10px; 
  border:1px solid #000; 
  color:#000; 
  width:50%;
  }

#right {
  float:right; 
  background:#ddd; 
  padding:10px; 
  border:1px solid #000; 
  color:#000; 
  }

a, a:visited {
  font-size:1.1em;
  text-decoration:none;
  color:#ddd;
  }

a:hover {
  color:#fff; 
  text-decoration:none;
  }

.grey {color:#888;}

.ltgrey {color:#ddd;}

img#mascot {float:right;}

#header ul {
  clear:both; 
  text-align:center; 
  }

#header ul {
  margin:0; 
  padding:0; 
  list-style-type:none; 
  background:transparent; 
  height:3em;
  }

#header ul li {
  display:inline; 
  color:#000000;
  }



.strike {text-decoration:line-through;}
.lft {float:left;}
.rgt{float:right;}

.columnone, .columntwo {width:31%; float:left; text-align:justify; margin-right:2%;}
.columnthree {text-align:justify; border:1px solid #fff;}
* html .columnthree {border:0;}
hr {clear:both; border:0; height:1px; color:#888; background-color:#888;}

.columnthree a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:underline;}
.columnthree a:hover {color:#888; text-decoration:none;}


#menuwrapper{		position:relative;
	width:950px;
	margin:auto;
	padding-top:0px;
	background: url(../images/bg-wrapper-01.jpg) no-repeat; z-index:3}
	
				
	/* Everything monkey Menu */
	ul#menu{margin:auto; padding:auto; list-style:none; clear:both; float:right; z-index:1}
		#menu li{text-indent:-9999px; display:inline; margin-top:90; float:left; margin-right:10px;}
			#menu li a{background:url('../images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}
			
			/* Home Button */
			#menu li.home{width:43px; height:17px;}
				#menu li.home a{background-position:-1px -0px;}
				#menu li.home a:hover{background-position:-1px -34px;}
				#menu li.home a.selected{background-position:-1px -17px;}
			
			/* Dates Button */
			#menu li.dates{width:48px; height:17px;}
				#menu li.dates a{background-position:-44px -0px;}
				#menu li.dates a:hover{background-position:-44px -34px;}
				#menu li.dates a.selected{background-position:-44px -17px;}
				
			/* Location Button */
			#menu li.location{width:68px; height:17px;}
				#menu li.location a{background-position:-90px -0px;}
				#menu li.location a:hover{background-position:-90px -34px;}
				#menu li.location a.selected{background-position:-90px -17px;}
				
				/* Gallery Button */
			#menu li.gallery{width:61px; height:17px;}
				#menu li.gallery a{background-position:-159px -0px;}
				#menu li.gallery a:hover{background-position:-159px -34px;}
				#menu li.gallery a.selected{background-position:-159px -17px;}
				
				/* Veranstalter Button */
			#menu li.veranstalter{width:97px; height:17px;}
				#menu li.veranstalter a{background-position:-222px -0px;}
				#menu li.veranstalter a:hover{background-position:-222px -34px;}
				#menu li.veranstalter a.selected{background-position:-222px -17px;}
				
				/* Partner Button */
			#menu li.partner{width:64px; height:17px;}
				#menu li.partner a{background-position:-318px -0px;}
				#menu li.partner a:hover{background-position:-318px -34px;}
				#menu li.partner a.selected{background-position:-318px -17px;}
				
				/* Impressum Button */
			#menu li.impressum{width:76px; height:17px;}
				#menu li.impressum a{background-position:-386px -0px;}
				#menu li.impressum a:hover{background-position:-386px -34px;}
				#menu li.impressum a.selected{background-position:-386px -17px;}

/* styling_footer */
#typo {
	width:100%;
	position:relative;
	background: url(../images/hg-lila.gif);
}
.affentext {
	position:relative;
	width:950px;
	margin:0 auto;
	padding-bottom:0px;
	background: url(../images/bg-wrapper-01.jpg) no-repeat;
}
.affentext2 {
	width:950px;
	height:135px;
	margin:0 auto;

}



/* text-holder */
.text-holder {
	width:100%;
	overflow:hidden;
	font-size:69px;
	line-height:61px;
	text-transform:uppercase;
	letter-spacing:-1px;
	color:#ab76b8;
}
.cufon-active .text-holder {
	font-size:69px;
	line-height:69px;
	padding:0 0 6px;
}
.text-holder p {margin:0;}
.text-holder p span {color:#8f49a0;}
.text-holder p .cufon {
	margin:0 0 -8px;
	float:left;
}
.logoplatzhalter {
	height: 100px;
	width: 100px;
	z-index: 1;
	float: left;
}


#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

Lisa · 12 November 2010

Hier noch der HTML CODE falls ihr ihn benötigt:

Code:

<!-- Put IE into quirks mode -->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Party mit Lisa </title>
<meta name="Author" content="Lisa a." />
<link rel="stylesheet" type="text/css" href="css/monkeys.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css"  />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.3.css" />
    
    
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
<script type="text/javascript" src="./js/pngFix.js"></script>
<script src="js/main.js" type="text/javascript"></script>
	<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
  DD_belatedPNG.fix('.png-fix');
</script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
</head>

<body>

<div id="container">
  <div class="container_inhalt">
  	<div id="slideshow">
    	<div align="center"><img src="http://www.html.de/images/image1.jpg" alt="Slideshow Image 1" class="active" />
    	  <img src="http://www.html.de/images/image2.jpg" alt="Slideshow Image 2" />
    	  <img src="http://www.html.de/images/image3.jpg" alt="Slideshow Image 3" />
    	  <img src="http://www.html.de/images/image4.jpg" alt="Slideshow Image 4" />
    	  <img src="http://www.html.de/images/image5.jpg" alt="Slideshow Image 5" /></div>
    </div>
  </div>


	



</div>
 <!-- end of container -->


 

<div id="header">
        <div id="menuwrapper">
            <div class="logoplatzhalter">  <img src="http://www.html.de/images/logo.png" alt="" width="100" height="100" /></div>
          <img src="http://www.html.de/images/platzhalter.gif" alt="" width="380" height="1" />
          <ul id="menu">
            <li class="home"><a href="index.html">Home</a></li>
            <li class="dates"><a class="selected"href="#">dates</a></li>
            <li class="location"><a href="#">location</a></li>
            <li class="gallery"><a href="#">gallery</a></li>
            <li class="veranstalter"><a href="#">veranstalter</a></li>
            <li class="partner"><a href="#">partner</a></li>
            <li class="impressum"><a href="#">impressum</a></li>
          </ul>
          
        </div>

    </div>
      
<div id="footer">
<div id="typo">
		
		<div class="affentext2">
						<div class="text-holder">
						<p><span>Partylisa </span>NEXT DATE <span>11.12.2010 </span>FINEST Lisa &amp; </p>
					</div>
		</div>
     
	</div>
</div>

</body>
</html>

Wäre euch echt für jede Hilfe sehr Dankbar :*

silvanus · 12 November 2010

Hallo Lisa,
versuche mal bei
#slideshow IMG {
}
das left:0; zu löschen.
Bei solchen Problemen hilft das Firefox Addon Firebug immer ganz gut.

Lisa · 12 November 2010

Hi Silvanus,
ich habs eben probiert..... leider ohne Erfolg :(
Das Div in dem die Slideshow verschachtelt ist, wird weiterhin linksbündig angezeigt :(
Hast du noch ne andere Idee? Erstmal danke für den Tip :*

silvanus · 12 November 2010

Dann scheint eins der importierten Style-Sheets noch dazwischen zu funken.
Hier der Code mit dem ich getestet habe:HTML | <!-- Put IE into quirks mode - - Anonymous - yaX1keaP - Pastebin.com

Lisa · 12 November 2010

Hi Silvanus,
danke nochmal :)
Also ich habe jetzt den Code aus deinem Link kopiert und bei mir getestet.
Ich habe zusätzlich alle anderen verknüpfungen zu den anderen Stylesheets rausgenommen.
Leider funktioniert es bei mir immernoch nicht. Voll nett das einem hier gleich geholfen wird, auch wenns noch nicht funktioniert :)

Hier der Code:

Code:

<!-- Put IE into quirks mode -->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Party mit Lisa </title>
<meta name="Author" content="Lisa a." />

<style>
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}
 
/* for internet explorer */
* html body {
padding:120px 0 50px 0;
}
 
#container {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
position:fixed;
top:120px;
left:0;
bottom:50px;
right:0;
overflow:auto;
background:#FFF;
padding:20px;
text-align:center;
width:auto;
}
 
* html #container {
height:100%;
width:100%;
}
 
 
#container_inhalt {
position:absolute;
left:200px;
 
 
}
 
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:128px;
overflow:hidden;
text-align:center;
background:#000000;
border-bottom:1px solid #000000;
}
* html #header {height:127px;}
 
 
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:135px;
overflow:hidden;
text-align:center;
background:#000000;
border-top:5px solid #000000;
}
* html #footer {height:130px;}
 
/* end of bit that does the work */
 
h1 {font-size:4em; margin:0; padding:0;}
 
#footer p {
color:#fff;
margin:5px 10px 0 10px;
}
 
 
#header img {
margin:10px 10px 0 10px;
}
#container img {margin:5px;}
#absolute {
position:absolute;
top:400px;
right:100px;
width:200px;
background:#ddd;
padding:10px;
border:1px solid #000;
}
 
#left {
float:left;
background:#eee;
padding:10px;
border:1px solid #000;
color:#000;
width:50%;
}
 
#right {
float:right;
background:#ddd;
padding:10px;
border:1px solid #000;
color:#000;
}
 
a, a:visited {
font-size:1.1em;
text-decoration:none;
color:#ddd;
}
 
a:hover {
color:#fff;
text-decoration:none;
}
 
.grey {color:#888;}
 
.ltgrey {color:#ddd;}
 
img#mascot {float:right;}
 
#header ul {
clear:both;
text-align:center;
}
 
#header ul {
margin:0;
padding:0;
list-style-type:none;
background:transparent;
height:3em;
}
 
#header ul li {
display:inline;
color:#000000;
}
 
 
 
.strike {text-decoration:line-through;}
.lft {float:left;}
.rgt{float:right;}
 
.columnone, .columntwo {width:31%; float:left; text-align:justify; margin-right:2%;}
.columnthree {text-align:justify; border:1px solid #fff;}
* html .columnthree {border:0;}
hr {clear:both; border:0; height:1px; color:#888; background-color:#888;}
 
.columnthree a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:underline;}
.columnthree a:hover {color:#888; text-decoration:none;}
 
 
#menuwrapper{ position:relative;
width:950px;
margin:auto;
padding-top:0px;
background: url(../images/bg-wrapper-01.jpg) no-repeat; z-index:3}
 
 
/* Everything monkey Menu */
ul#menu{margin:auto; padding:auto; list-style:none; clear:both; float:right; z-index:1}
#menu li{text-indent:-9999px; display:inline; margin-top:90; float:left; margin-right:10px;}
#menu li a{background:url('../images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}
 
/* Home Button */
#menu li.home{width:43px; height:17px;}
#menu li.home a{background-position:-1px -0px;}
#menu li.home a:hover{background-position:-1px -34px;}
#menu li.home a.selected{background-position:-1px -17px;}
 
/* Dates Button */
#menu li.dates{width:48px; height:17px;}
#menu li.dates a{background-position:-44px -0px;}
#menu li.dates a:hover{background-position:-44px -34px;}
#menu li.dates a.selected{background-position:-44px -17px;}
 
/* Location Button */
#menu li.location{width:68px; height:17px;}
#menu li.location a{background-position:-90px -0px;}
#menu li.location a:hover{background-position:-90px -34px;}
#menu li.location a.selected{background-position:-90px -17px;}
 
/* Gallery Button */
#menu li.gallery{width:61px; height:17px;}
#menu li.gallery a{background-position:-159px -0px;}
#menu li.gallery a:hover{background-position:-159px -34px;}
#menu li.gallery a.selected{background-position:-159px -17px;}
 
/* Veranstalter Button */
#menu li.veranstalter{width:97px; height:17px;}
#menu li.veranstalter a{background-position:-222px -0px;}
#menu li.veranstalter a:hover{background-position:-222px -34px;}
#menu li.veranstalter a.selected{background-position:-222px -17px;}
 
/* Partner Button */
#menu li.partner{width:64px; height:17px;}
#menu li.partner a{background-position:-318px -0px;}
#menu li.partner a:hover{background-position:-318px -34px;}
#menu li.partner a.selected{background-position:-318px -17px;}
 
/* Impressum Button */
#menu li.impressum{width:76px; height:17px;}
#menu li.impressum a{background-position:-386px -0px;}
#menu li.impressum a:hover{background-position:-386px -34px;}
#menu li.impressum a.selected{background-position:-386px -17px;}
 
/* styling_footer */
#typo {
width:100%;
position:relative;
background: url(../images/hg-lila.gif);
}
.affentext {
position:relative;
width:950px;
margin:0 auto;
padding-bottom:0px;
background: url(../images/bg-wrapper-01.jpg) no-repeat;
}
.affentext2 {
width:950px;
height:135px;
margin:0 auto;
 
}
 
 
 
/* text-holder */
.text-holder {
width:100%;
overflow:hidden;
font-size:69px;
line-height:61px;
text-transform:uppercase;
letter-spacing:-1px;
color:#ab76b8;
}
.cufon-active .text-holder {
font-size:69px;
line-height:69px;
padding:0 0 6px;
}
.text-holder p {margin:0;}
.text-holder p span {color:#8f49a0;}
.text-holder p .cufon {
margin:0 0 -8px;
float:left;
}
.logoplatzhalter {
height: 100px;
width: 100px;
z-index: 1;
float: left;
}
 
 
#slideshow {
position:relative;
height:350px;
}
 
#slideshow IMG {
position:absolute;
top:0;
 
z-index:8;
opacity:0.0;
}
 
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
 
#slideshow IMG.last-active {
z-index:9;
}
</style>
<script type="text/javascript">
 
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it
***/
 
function slideSwitch() {
var $active = $('#slideshow IMG.active');
 
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
 
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
 
// uncomment the 3 lines below to pull the images in random order
 
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
 
 
$active.addClass('last-active');
 
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
 
$(function() {
setInterval( "slideSwitch()", 5000 );
});
 
</script>
</head>
 
<body>
 
<div id="container">
<div class="container_inhalt">
<div id="slideshow">
<div align="center"><img src="http://www.html.de/images/image1.jpg" alt="Slideshow Image 1" class="active" />
<img src="http://www.html.de/images/image2.jpg" alt="Slideshow Image 2" />
<img src="http://www.html.de/images/image3.jpg" alt="Slideshow Image 3" />
<img src="http://www.html.de/images/image4.jpg" alt="Slideshow Image 4" />
<img src="http://www.html.de/images/image5.jpg" alt="Slideshow Image 5" /></div>
</div>
</div>

mermshaus · 12 November 2010

Offtopic:

Mal so am Rande:

@silvanus: Warum packst du deinen Code nicht ins Forum?
@Lisa: Warum packst du deinen Code nicht in die vorgesehen BBCode-Tags? http://www.html.de/off-topic-plauderecke/30400-wie-verwende-ich-die-code-tags-im-forum.html

Edit: ↓ Ah, guter Gedanke. :)

silvanus · 12 November 2010

@mermshaus: Ich dachte es hilft das ewige gescrolle entschärfen.

Lisa · 12 November 2010

Wow was für ne coole Erfindung :)
Und ich hab mich die ganze Zeit gefragt wie ihr das macht :)
Fehler beseitigt :) Also mit dem gescrolle... das Div ist immernoch nicht mittig :)
Hast du vielleicht ne Idee mermshaus?

Lisa · 12 November 2010

Kennt niemand ne Lösung *zwinkerzwinker* :)

T!P-TOP · 12 November 2010

Hab mir den Code nun nicht wirklich ganz angesehen, aber gib deinem Container ne Breite und schreib ins CSS fürn container: margin: 0px auto;

Lisa · 12 November 2010

Hi Nicolas,
ich habe es probiert.... leider funktioniert das nicht :(
Ich habe irgendwo den Wurm drin, weiss aber nicht wo.

Hier der "interessante Part" vom Code damit man nicht alles durchlesen muss:

Code:

body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#fff; 
  font-family:arial, verdana, sans-serif; 
  font-size:76%;
  overflow: hidden; 
  }

/* for internet explorer */
* html body {
  padding:120px 0 50px 0; 
  }

#container {
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 1.2em;
  position:fixed; 
  top:120px;
  left:0;
  bottom:50px; 
  right:0; 
  overflow:auto; 
  background:#000;
  padding:20px;
  text-align:center;
  width:auto;
  }

* html #container {
  height:100%; 
  width:100%; 
  }
  

#container_inhalt {
	position:absolute;
	left:200px;
	width:900px;
	margin: 0px auto;
	

}

#header {
  position:absolute; 
  top:0; 
  left:0;
  width:100%; 
  height:128px; 
  overflow:hidden; 
  text-align:center; 
  background:#000000;
  border-bottom:1px solid #000000;
  }
* html #header {height:127px;}


#footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  height:135px; 
  overflow:hidden; 
  text-align:center; 
  background:#000000;
  border-top:5px solid #000000;
  }
* html #footer {height:130px;}

/* end of bit that does the work */

Würd mich echt freuen wenn du mir da helfen kannst :)

PS: Container_inhalt ist quasi im Container verschachtelt.
Ich wollte den Container auf 100% Bildschirmbreite.
Container Inhalt sollte dann 900 Pixel breit sein und horizontal zentriert werden...

threadi · 12 November 2010

Du hast im CSS #container_inhalt stehen, aber laut HTML-Code ist es eine Klasse. Also müsstest Du dort .container_inhalt schreiben.

Unabhängig davon: #container brauchst Du gar nicht, wenn Du nur #container_inhalt vertikal und horizontal zentrieren willst.

Das hier zentriert eine 200 Pixel hohe und 900 Pixel breite Box in der Mitte des Bildschirms:

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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seitentitel</title>
<style type="text/css">

.container_inhalt {
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 200px;
  margin: -100px 0 0 -450px; 
}
</style>
</head>
<body>
<div class="container_inhalt">
  Ich bin horizontal und vertikal zentriert.
</div>
</body></html>

Hinweis: achte auf vollständigen und validen Quellcode. Der hier von dir gezeigte war fehlerhaft.

Lisa · 12 November 2010

Wowww!
Du bist der aller aller aller beste! :) Mein persönlicher King of the Day :)!
Endlich hat es geklappt! Jibiiiiiiiiii

Kennst du eine Seite bei der ich den Quellcode checken lassen kann?
Oder könnte ich ihn hier reinkopieren und du schaust mal drüber?

Mensch bin ich glücklich! Ein riesen Dankeschön an dich! :*

Elroy · 13 November 2010

Lisa schrieb:
Kennst du eine Seite bei der ich den Quellcode checken lassen kann?

Hallo.

W3C Validator

Gruss
Elroy

Div mittig positionieren - hilfeee! Isch flippe aus!

Lisa

Neues Mitglied

Lisa

Neues Mitglied

silvanus

Neues Mitglied

Lisa

Neues Mitglied

silvanus

Neues Mitglied

Lisa

Neues Mitglied

mermshaus

Senior HTML'ler

silvanus

Neues Mitglied

Lisa

Neues Mitglied

Lisa

Neues Mitglied

T!P-TOP

Mitglied

Lisa

Neues Mitglied

threadi

Moderator

Lisa

Neues Mitglied

Elroy

Senior HTML'ler

Neueste Beiträge