Zentrierung

M

MechanU

Mitglied
Hab mir in Photoshop ein Design erstellt und mittels divs und css abgespeichert.

Hier mal der Code:

Code: 
<html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (Portfolio.psd) -->
<style type="text/css">
<!--

div.Tabelle_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:600px;
}

div.Portfolio-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:202px;
}

div.Portfolio-02 {
	position:absolute;
	left:0px;
	top:202px;
	width:148px;
	height:398px;
}

div.Portfolio-03 {
	position:absolute;
	left:148px;
	top:202px;
	width:399px;
	height:398px;
}

div.Portfolio-04 {
	position:absolute;
	left:547px;
	top:202px;
	width:253px;
	height:46px;
}

div.Portfolio-05 {
	position:absolute;
	left:547px;
	top:248px;
	width:17px;
	height:352px;
}

div.Portfolio-06 {
	position:absolute;
	left:564px;
	top:248px;
	width:156px;
	height:31px;
}

div.Portfolio-07 {
	position:absolute;
	left:720px;
	top:248px;
	width:80px;
	height:352px;
}

div.Portfolio-08 {
	position:absolute;
	left:564px;
	top:279px;
	width:156px;
	height:30px;
}

div.Portfolio-09 {
	position:absolute;
	left:564px;
	top:309px;
	width:156px;
	height:31px;
}

div.Portfolio-10 {
	position:absolute;
	left:564px;
	top:340px;
	width:156px;
	height:30px;
}

div.Portfolio-11 {
	position:absolute;
	left:564px;
	top:370px;
	width:156px;
	height:230px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Portfolio.psd) -->
<div class="Tabelle_01">
	<div class="Portfolio-01">
		<img src="images/Portfolio_01.jpg" width="800" height="202" alt="">
	</div>
	<div class="Portfolio-02">
		<img src="images/Portfolio_02.jpg" width="148" height="398" alt="">
	</div>
	<div class="Portfolio-03">
		<img src="images/Portfolio_03.jpg" width="399" height="398" alt="">
	</div>
	<div class="Portfolio-04">
		<img src="images/Portfolio_04.jpg" width="253" height="46" alt="">
	</div>
	<div class="Portfolio-05">
		<img src="images/Portfolio_05.jpg" width="17" height="352" alt="">
	</div>
	<div class="Portfolio-06">
		<img src="images/Portfolio_06.jpg" width="156" height="31" alt="">
	</div>
	<div class="Portfolio-07">
		<img src="images/Portfolio_07.jpg" width="80" height="352" alt="">
	</div>
	<div class="Portfolio-08">
		<img src="images/Portfolio_08.jpg" width="156" height="30" alt="">
	</div>
	<div class="Portfolio-09">
		<img src="images/Portfolio_09.jpg" width="156" height="31" alt="">
	</div>
	<div class="Portfolio-10">
		<img src="images/Portfolio_10.jpg" alt="" width="156" height="30">
	</div>
	<div class="Portfolio-11">
		<img src="images/Portfolio_11.jpg" width="156" height="230" alt="">
	</div>
</div>
a<!-- End ImageReady Slices -->
</body>
</html>

Mein Problem ist nun, wie kann ich die ganze Seite horizontal zentrieren, also dass die Seite immer in der mitte ist.

Zwietens würde mich auch interessieren, wie ich die Seite Slizen muss, um sie nach unten zu verlängern, also wenn mehr text auf der Seite steht, soll sie nach unten verlängert werden. Mann nimmt da ja ein Bild aus dem mittelstück und fügt dass dann öfters ein, um die Seite länger zu machen, weiß leider nicht genau wie dass funktioniert.

Danke schonmal im voraus
mfg
MecH
 
Hi,

Code: 
div.Tabelle_01 {
	position:absolute;
	left:50%;
        margin-left:-400px; /* negative Hälfte von width:800px */
	top:0px;
	width:800px;
	height:600px;
}
Falls eine vertikale Zentrierung ebenfalls erwünscht sein sollte:
Code: 
div.Tabelle_01 {
	position:absolute;
	left:50%;
        margin-left:-400px;
	top:50%;
        margin-top:-300px; /* negative Hälfte von height:600px */
	width:800px;
	height:600px;
}


Zwecks der Bildwiederholung schau dir die background-repeat-Eigenschaft an.

mfg Maik
 
Kleine Anmerkung nachträglich: Wenn der Inhalt der Seite zunehmen und das Layout in der Höhe "mitwachsen" soll, ist die height:600px-Deklaration der Mutterbox und die feste Höhenangabe für das Inhalt-DIV (keine Ahnung, welcher DIV-Block in deinem Konstrukt diesen Bereich repräsentiert), sowie die absoluten Positionsangaben aller DIVs für dein Vorhaben hinderlich.

mfg Maik
 
danke schonmal für die Antwort.

Die Zentrierung funktioniert wunderbar, nur die Textverlängerung nohc nicht.
Wie müsste ich das machen, bzw. wie kann ich die absoluten Positionsangaben vermeiden?

mfg
 
Was sich im normalen Textfluß (von oben nach unten) befindet, benötigt keine Positionsangaben, da sie sich von selbst ergeben, und Blöcke, die nebeneinander ausgerichtet sein sollen, werden mit Hilfe der float-Eigenschaft aus dem normalen Textfluß genommen.

mfg Maik
 
Lasset den Worten Taten folgen ;-)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
* {
        margin:0;
        padding:0;
}
div {
        color:#fff;
}

div.Tabelle_01 {
        width:800px;
        min-height:600px;
        height:auto !important;
        height:600px;
        margin:0 auto;
        background:#eee;
}
div.Portfolio-01 {
        height:202px;
        background:#0a0a0a;
}
div.Portfolio-02 {
        width:148px;
        min-height:398px;
        height:auto !important;
        height:398px;
        float:left;
        background:#1a1a1a;
}
div.Portfolio-03 {
        width:399px;
        min-height:398px;
        height:auto !important;
        height:398px;
        float:left;
        background:#2a2a2a;
}
div.rightCol {
        width:253px;
        float:right;
}
div.Portfolio-04 {
        height:46px;
        background:#3a3a3a;
}
div.Portfolio-05 {
        width:17px;
        height:352px;
        float:left;
        margin-right:0 !important;
        margin-right:-3px;
        background:#4a4a4a;
}
div.rightcenterCol {
        margin:0 80px 0 17px !important;
        margin:0 77px 0 14px;
}
div.Portfolio-06 {
        height:31px;
        background:#5a5a5a;
}
div.Portfolio-07 {
        width:80px;
        height:352px;
        float:right;
        margin-left:0 !important;
        margin-left:-3px;
        background:#6a6a6a;
}
div.Portfolio-08 {
        height:30px;
        background:#7a7a7a;
}
div.Portfolio-09 {
        height:31px;
        background:#8a8a8a;
}
div.Portfolio-10 {
        height:30px;
        background:#9a9a9a;
}
div.Portfolio-11 {
        height:230px;
        background:#aaa;
}

.clearfix:after {
        content:".";
        display:block;
        height:0;
        font-size:0;
        clear:both;
        visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div class="Tabelle_01 clearfix">
     <div class="Portfolio-01">01</div>
     <div class="Portfolio-02">02</div>
     <div class="Portfolio-03">03</div>
     <div class="rightCol">
          <div class="Portfolio-04">04</div>
          <div class="Portfolio-05">05</div>
          <div class="Portfolio-07">07</div>
          <div class="rightcenterCol">
               <div class="Portfolio-06">06</div>
               <div class="Portfolio-08">08</div>
               <div class="Portfolio-09">09</div>
               <div class="Portfolio-10">10</div>
               <div class="Portfolio-11">11</div>
          </div>
     </div>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück