Zurück   PSD-Tutorials.de > Webbereich > (X)HTML & CSS
Seite neu laden Div (Webseite) zentrieren
Interessengemeinschaften Kostenlos registrieren Kalender Suchen Letzte 24h Alle Foren als gelesen markieren


Antwort
 
Themen-Optionen
Alt 12.03.2011, 08:33   #1 Nach oben scrollen
Member
MemberMember
 

Registriert seit: 10.09.2008
Ort: Schwabenländle
Beiträge: 147
Verwendet: CS6, Lightbox, PSPad, Notepad++

Div (Webseite) zentrieren

Hi,

ich stehe gerade im Wald und finde den "Fehler" nicht....

Habe eine Webseite und dort "hängt" alles links. Nun möchte ich die Seite eigentlich auf dem Bildschirm zentrieren, bekomm das in der CSS allerdings nicht hin.

Hier mal die CSS

Code:
/*------------------- CSS RESET ---------------------
---------------------------------------------------*/
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ul,
ol {
list-style: none;
}
b,
strong {
font-weight: bold;
}
img,
a img {
border: none;
}
 
/*------------------- SCHRIFT / GROESSE ---------------------
---------------------------------------------------*/
body {
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 0px; 
 padding:0px; 
 height:100%;
 background-image:url(../images/logo.jpg);
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-position:160px 100% ;
 background-color:#000;
 font-size: 100%;
 line-height: 125%;
 font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
}
h1{font-size: 17pt;line-height: 125%;
font-family: georgia,times,arial, helvetica, tahoma ,verdana,  sans-serif;color:#A65E60;
margin-bottom:25px;margin-top:0px;
letter-spacing:1px;
font-style:italic;}
h2{font-size: 15pt;line-height: 125%;
font-family: georgia,times,arial, helvetica, tahoma ,verdana,  sans-serif;color:#A65E60;
margin-bottom:20px;margin-top:0px;
font-style:italic;
/*------------------- LAYOUT ---------------------
---------------------------------------------------*/
}#aussen{height:100%;
min-height: 100%;
height: auto !important;
width: 90%;
 max-width: 1200px;
 min-width: 600px;
left: 50%; 
}
 
#main {height:100%;
padding:20px 25px 20px 45px;
margin: 20px 70px 0px 300px;
vertical-align: baseline;
border: 1px solid #78324D;
background-image:url(../images/back.png)!important;
background-image:url(../images/back.jpg);
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
color:#A65E60;
}
 
#main p {text-align:justify;color:#;margin: 0px; }
/* menue links*/
#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
font-size: 13pt;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
color:#400000;
line-height:28px;
text-decoration:none ;
text-align:right;
width:200px;
}
#menu1 a:hover{
color:#fff;
text-decoration:none ;
background-image:url(../images/cube1.png)!important;
background-image:url(../images/cube1.gif);
}
 
/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #000000; scrollbar-base-color: #ffffff;
scrollbar-highlight-color : #000000; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}
/* allgemeine links im text */
a:link, a:visited, a:active{ font-size: 100%;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
color:#A65E60;font-style:italic;
 }
a:hover{
color:#fff;text-decoration:none ;
background-image:url(../images/cube1.png)!important;
background-image:url(../images/cube1.jpg)
 }
 
 
 
 
 #nav {background-image:url(../images/backmen.png)!important;
;background-image:url(../images/backmen.jpg);background-repeat:repeat;
height:75%;padding:0px 0px 0px 0px;
margin: 20px 0px 0px 0px;
vertical-align:middle;
width:200px;
border: 1px solid #800000;
position: absolute;
top: 0px;
left: 80px;
color:#fff;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
Dachte eigentlich es reicht aus

Code:
}#aussen{height:100%;
min-height: 100%;
height: auto !important;
width: 90%;
 max-width: 1200px;
 min-width: 600px;
left: 50%;  <-- hinzugefügt....
aber dem ist nicht so..... *grumml*

Kann mir da jemand einen Tip geben? Vorsichtshalber hier noch die html

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>
 
 
<link rel="stylesheet" href="css/format.css" type="text/css">
 
 
</head>
<body >
<div id="aussen">
 
<div id="nav" >
 
<table  align="center"  id="menu1"  border="0" cellpadding="0" cellspacing="0"   >
<tr>
<td >
<a href="index.html"  onfocus="this.blur()">Home&nbsp;&nbsp;</a></td>
</tr>
<tr>
<td >
<a href="index.html"  onfocus="this.blur()">&Uuml;ber Uns&nbsp;&nbsp;</a></td>
</tr>
<tr>
<td >
<a href="index.html" onfocus="this.blur()">News&nbsp;</a></td>
</tr>
<tr>
<tr>
<td >
<a href="index.html" onfocus="this.blur()">Kontakt&nbsp;</a></td>
</tr>
<tr>
<td >
<a href="index.html" onfocus="this.blur()">Banner</a></td>
</tr>
<tr>
<td >
<a href="index.html" onfocus="this.blur()">Links</a></td>
</tr>
<tr>
<td >
<a href="index.html" onfocus="this.blur()">Forum&nbsp;</a></td>
</tr><tr>
<td >
<a href="index.html" onfocus="this.blur()">G&auml;stebuch&nbsp;</a></td>
</tr>
<tr>
<td >
<a href="index.html" onfocus="this.blur()">Impressum&nbsp;</a></td>
</tr>
</table>
<img style="background-image:url(images/back.png)!important;background-image:url(images/cube1.gif);background-repeat:repeat;_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);margin-right:10px;border:solid 1px #400000"  align="right" src="http://www.psd-tutorials.de/forum/images/pixelspace.gif" width="40" height="40" border="0" alt=""><br>
<img style="background-image:url(images/cube2.png)!important;background-image:url(images/cube2.gif);background-repeat:repeat;_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);margin-right:10px;border:solid 1px #400000"  align="right" src="http://www.psd-tutorials.de/forum/images/pixelspace.gif" width="30" height="30" border="1" alt=""><br>
<img style="background-image:url(images/cube3.png)!important;background-image:url(images/cube3.gif);background-repeat:repeat;_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);margin-right:10px;border:solid 1px #400000"  align="right" src="http://www.psd-tutorials.de/forum/images/pixelspace.gif" width="20" height="20" border="0" alt="">
</div>
        <div id="main"  >
<!--  inhalt-->
<p style="margin-top: 0; margin-bottom: 0;">&nbsp;</p>
<div >
 
<h1>Herzlich willkommen auf der Webseite</h1>
<h1> von </h1>
<h1>KnuddlWoelkchen<br>
</h1>
<h2>Das Layout.&nbsp;&nbsp;</h2>
<p style="margin-bottom: 0;" > lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;" >lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;" >lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p>lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;" >lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;" >lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p>lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0;" >lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-bottom: 0;" >lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
<p style="margin-top: 0; margin-bottom: 0;">lirumlarum lirumlarum<a href="#" ></a> lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum lirumlarum</p>
</div>
 
</div>
 
</div></body>
</html>
Danke und schönes WE

Nehme auch gerne andere "Vorlagen" ! Die Bezeichnungen sind nicht so aussagekräftig
Geändert von NiAlMa (12.03.2011 um 08:34 Uhr). Grund: Erweitert
  Mit Zitat antworten


Alt 12.03.2011, 08:38   #2 Nach oben scrollen
Ansprechpartner
Forum & Webbereich
ModeratorModeratorModeratorModeratorModeratorModerator
 
Benutzerbild von Herr_D
 

Registriert seit: 09.06.2005
Ort: Waren (Müritz)
Beiträge: 8.653
Verwendet: CS4
Was soll das left bewirken? Funzt nur, wenn du eine position angibst... rauskicken


margin:auto; wäre angebracht (für IE<7 auch noch text-align:center; )


...und der Code ist sehr überarbeitungsbedürftig die ganzen inlineCSS solltest du kegeln...
__________________

Ein Hamster macht noch keinen Gulasch.

Durch CSS können alle Block-Elemente mittels margin:auto; horizontal zentriert werden. In Block-Elementen enthaltene Elemente und Inline-Elemente können über text-align: center; horizontal zentriert werden.
  Mit Zitat antworten
Alt 12.03.2011, 19:46   #3 Nach oben scrollen
Newbie
Newbie
 
Benutzerbild von Laphory
 

Registriert seit: 02.02.2008
Ort: Wien
Beiträge: 14
Kamera: Canon EOS 450D
Verwendet: PS CS4, C4D
Heyho
Ich hatte mal das selbe problem, und hab den code hier dazu verwendet.
Zitat:
margin-left: auto;
margin-right: auto;
Einfach in die "mutter" gesetzt. bzw bei dir is das glaub ich "}#aussen"

//edit: seh grad Herr_D hats dir ja schon beantwortet. (erst lesen dann schreiben :S)
__________________
  Mit Zitat antworten
Alt 14.03.2011, 21:10   #4 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 31.07.2008
Beiträge: 90
Verwendet: Photoshop CS4, Notepadd++
wenn du natürlich eine fixe Breite hast gibt es neben dem "margin:auto;" auch noch die Möglichkeit:

Code:
#div {
  position:absolute;
  width:800px;
  height:400px;
  left:50%;
  top:50%;
  margin:-200px 0 0 -400px;
}
Gruss, MaedeG
  Mit Zitat antworten
Alt 31.07.2012, 14:20   #5 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 15.01.2008
Beiträge: 5
Hallo,
ich habe auch ein DIV Center Problem. Ich kenn mich noch nicht so gut aus und bin gerade dab ei eine DIV Seite zu erstellen. Nun fehlt nur noch die Zentrierung... da komm ich net weiter

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TESTSEITE</title>
<style type='text/css'>

.wrapper1{
   position: relative;
   float: left;
   left: 0px;
   width: 1205px;
   margin-bottom: 25px;
}
.w1big{
   position: relative;
   float: left;
   left: 0px;
   width: 385px;
   height: 180px;
   background-color: #828282
}
.w1left2{
   position: relative;
   float: left;
   left: 25px;
   width: 180px;
   height: 180px;
   background-color: #828282
}
.w1left3{
   position: relative;
   float: left;
   left: 50px;
   width: 180px;
   height: 180px;
   background-color: #828282
}
.w1left4{
   position: relative;
   float: left;
   left: 75px;
   width: 180px;
   height: 180px;
   background-color: #828282
}

.w1left5{
   position: relative;
   float: left;
   left: 100px;
   width: 180px;
   height: 180px;
   background-color: #828282
   
}

body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;

}
.wrapper2{
   position: relative;
   float: left;
   left: 0px;
   width: 1205px;
   margin-bottom: 20px;

}
.w2big-1{
   position: relative;
   float: left;
   left: 0px;
   width: 385px;
   height: 180px;
   background-color: #828282
}
.w2small-1{
   position: relative;
   float: left;
   left: 25px;
   width: 180px;
   height: 180px;
   background-color: #828282
}
.w2small-2{
   position: relative;
   float: left;
   left: 50px;
   width: 180px;
   height: 180px;
   background-color: #828282
}
.w2big-2{
    position: relative;
    float: left;
    left: 75px;
    width: 385px;
    height: 180px;
    background-color: #828282
}
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;

}

.wrapper3{
   position: relative;
   float: left;
   left: 0px;
   width: 1205px;
   margin-bottom: 25px;
}
.w3big{
    position: relative;
    float: left;
    left: 0px;
    width: 385px;
    height: 180px;
    background-color: #828282
}
.w3small-1{
   position: relative;
   float: left;
   left: 25px;
   width: 180px;
   height: 180px;
   background-color: #828282
}
.w3small-2{
   position: relative;
   float: left;
   left: 50px;
   width: 180px;
   height: 180px;
   background-color: #828282
}
.w3small-3{
   position: relative;
   float: left;
   left: 75px;
   width: 180px;
   height: 180px;
   background-color: #828282
}

.w3small-4{
   position: relative;
   float: left;
   left: 100px;
   width: 180px;
   height: 180px;
   background-color: #828282
}

body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
}

</style>
</head>
<body>
    <div class="wrapper1">
         <div class="w1big">
         </div>
         <div class="w1left2">
         </div>
         <div class="w1left3">
         </div>
         <div class="w1left4">
         </div>
         <div class="w1left5">
         </div>
     </div> 
     <div class="wrapper2">
         <div class="w2big-1">
         </div>
         <div class="w2small-1">
         </div>
         <div class="w2small-2">
         </div>
         <div class="w2big-2">
         </div>         
    </div> 
    <div class="wrapper3">
         <div class="w3big">
         </div>
         <div class="w3small-1">
         </div>
         <div class="w3small-2">
         </div>
         <div class="w3small-3">
         </div>
         <div class="w3small-4">
         </div>
         
</div> 
</body>
</html>
Vielen Dank im Voraus.
Geändert von whiteblade (31.07.2012 um 14:24 Uhr).
  Mit Zitat antworten
Alt 31.07.2012, 22:43   #6 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 31.07.2012
Beiträge: 3
Zitat:
Zitat von MaedeG Beitrag anzeigen
wenn du natürlich eine fixe Breite hast gibt es neben dem "margin:auto;" auch noch die Möglichkeit:

Code:
#div {
  position:absolute;
  width:800px;
  height:400px;
  left:50%;
  top:50%;
  margin:-200px 0 0 -400px;
}
Gruss, MaedeG
Danke, damit hast du mir auch sehr geholfen
  Mit Zitat antworten
Alt 02.08.2012, 07:08   #7 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 15.01.2008
Beiträge: 5
Danke für die Antwort..
Kannst Du mir bitte sagen wo ich dies einbinden muss ? Vor dem Body oder nach dem Body ?
  Mit Zitat antworten
Alt 02.08.2012, 07:24   #8 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.265
Weder noch. CSS gehört in das CSS File. Das sind aber Grundlagen, welche man so ziemlich als erstes lernen sollte
  Mit Zitat antworten
Alt 07.08.2012, 08:11   #9 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 15.01.2008
Beiträge: 5
Okay, ich habe nun das CSS in ein style.css geworfen, aber wenn ich das nun mit
margin:auto belege, dann passiert nix

Code:
<title>TESTSEITE</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
</head>
<body>
<div class=main">
    <div class="wrapper1">
         <div class="w1big">
         </div>
         <div class="w1left2">
         </div>
         <div class="w1left3">
         </div>
         <div class="w1left4">
         </div>
         <div class="w1left5">
         </div>
    </div> 
    <div class="wrapper2">
         <div class="w2big-1">
         </div>
         <div class="w2small-1">
         </div>
         <div class="w2small-2">
         </div>
         <div class="w2big-2">
         </div>         
    </div> 
       <div class="wrapper3">
         <div class="w3big">
         </div>
         <div class="w3small-1">
         </div>
         <div class="w3small-2">
         </div>
         <div class="w3small-3">
         </div>
         <div class="w3small-4">
        </div>
    </div>
</div>
</body>
</html>
style.css
Code:
.main{
margin:auto;
}

.wrapper1{
   position: relative;
   float: left;
   left: 0px;
   width: 1205px;
   margin-bottom: 25px;
}
.w1big{
   position: relative;
   float: left;
   left: 0px;
   width: 385px;
   height: 180px;
   background-color: #828282
.......
  Mit Zitat antworten
Alt 07.08.2012, 22:11   #10 Nach oben scrollen
me[code].Java(Script)
MemberMember
 
Benutzerbild von mindraper
 

Registriert seit: 12.08.2007
Ort: Zuhause
Beiträge: 188
Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil
hi

klar. dein div.main hat ja auch keine breite angegeben. da ein div standartmässig ein sog. "block-element" ist, nimmt es – sofern nicht anders bestimmt – eine breite von 100% ein.

gib .main doch versuchsweise mal eine breite von 1205px (was ZIEMLICH groß ist für meinen geschmack, aber das ist ja egal), dann funktioniert auch das margin: auto, zumindest sofern das browserfenster > 1205px ist.

gruß
__________________
Nichts ist so gerecht verteilt wie der Verstand.
Jeder denkt, er hätte genug.
  Mit Zitat antworten
Alt 08.08.2012, 07:25   #11 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 15.01.2008
Beiträge: 5
Das passt nun auch mit dem Zentrieren nach links und rechts..

Code:
.main{
width: 1205px;
margin:auto;
}
aber wie schaut es dann mit oben und unten aus ?
ich habe zwar die höhe von 590 ml im .main angegeben, aber das bleibt prompt oben ..
  Mit Zitat antworten
Alt 08.08.2012, 08:40   #12 Nach oben scrollen
Member
MemberMember
Themenstarter
 

Registriert seit: 10.09.2008
Ort: Schwabenländle
Beiträge: 147
Verwendet: CS6, Lightbox, PSPad, Notepad++
Danke, dass ihr euch alle Gedanken macht, aber das "Problem" ist längst geklärt und erledigt
  Mit Zitat antworten
Alt 08.08.2012, 11:57   #13 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 15.01.2008
Beiträge: 5
Okay, danke für die Antwort.. dann kann das Thema ja geschlossen werden und ich frag in einem anderen Forum
  Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen