+ Antworten
Ergebnis 1 bis 11 von 11

Thema: seite per css zentrieren

  1. 22.04.2010 12:13 #1
    georgzed
    georgzed ist offline
    TP-Junior georgzed macht alles soweit korrekt
    Registriert seit
    Apr 2010
    Beiträge
    6

    seite per css zentrieren

    Hello, ich habe eine seite die ich per css zentrieren will in der mitte.
    Nur leider sehe ich den wald vor lauter bäumen nicht und hoffe mir kann wer helfen, anbei die css und die index dazu.

    Die css Datei:
    HTML-Code:
    html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	
}
img {
	border: 0;
}

.tom {
width:640px;
height:427;
	border: 1px solid #999999;
}
a {
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.more {
	text-align: right;
}
.left {
	float: left;
}
.clear {
	clear: both;
}

body, h1, h2, h3, form {
	font: 10px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #5C5C5C;
}

body {
	background: url(images/header_bg.jpg) repeat-x;
	text-align: center;
}
#wrapper {
 width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}


#header {
	height: 160px;
	position: absolute;
}
#header h1 {
	margin-top: 5px;

}
#header h1 img {
	display: block;
}
.hidepics {
  width:0px;
  height:0px;
  display:none;
}


#nav a.vmenu, #menub a.vmenu:link, #nav a.hmenu, #nav a.hmenu:link, #menub a.vmenu:visited, #nav a.hmenu:visited {display:block; width:66px; height:41px; background:url(images/1.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.hmenu, #nav a.hmenu:link, #nav a.hmenu:visited {float:left;}
#nav a.hmenu:hover{background:url(images/1h.jpg); color:#fff;}
#nav a.hmenu:active{background:url(images/1h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.hmenu, #nav a.bmenu:link, #menub a.vmenu:visited, #nav a.bmenu:visited {display:block; width:87px; height:41px; background:url(images/2.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.bmenu, #nav a.bmenu:link, #nav a.bmenu:visited {float:left;}
#nav a.bmenu:hover{background:url(images/2h.jpg); color:#fff;}
#nav a.bmenu:active{background:url(images/2h.jpg); color:#fff;}



#nav a.vmenu, #menub a.vmenu:link, #nav a.pmenu, #nav a.pmenu:link, #menub a.vmenu:visited, #nav a.pmenu:visited {display:block; width:87px; height:41px; background:url(images/3.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.pmenu, #nav a.bmenu:link, #nav a.pmenu:visited {float:left;}
#nav a.pmenu:hover{background:url(images/3h.jpg); color:#fff;}
#nav a.pmenu:active{background:url(images/3h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.fmenu, #nav a.fmenu:link, #menub a.vmenu:visited, #nav a.fmenu:visited {display:block; width:87px; height:41px; background:url(images/4.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.fmenu, #nav a.bmenu:link, #nav a.fmenu:visited {float:left;}
#nav a.fmenu:hover{background:url(images/4h.jpg); color:#fff;}
#nav a.fmenu:active{background:url(images/4h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.amenu, #nav a.amenu:link, #menub a.vmenu:visited, #nav a.amenu:visited {display:block; width:87px; height:41px; background:url(images/5.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.amenu, #nav a.bmenu:link, #nav a.amenu:visited {float:left;}
#nav a.amenu:hover{background:url(images/5h.jpg); color:#fff;}
#nav a.amenu:active{background:url(images/5h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.kmenu, #nav a.kmenu:link, #menub a.vmenu:visited, #nav a.kmenu:visited {display:block; width:87px; height:41px; background:url(images/6.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.kmenu, #nav a.bmenu:link, #nav a.kmenu:visited {float:left;}
#nav a.kmenu:hover{background:url(images/6h.jpg); color:#fff;}
#nav a.kmenu:active{background:url(images/6h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.gmenu, #nav a.gmenu:link, #menub a.vmenu:visited, #nav a.gmenu:visited {display:block; width:87px; height:41px; background:url(images/7.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.gmenu, #nav a.bmenu:link, #nav a.gmenu:visited {float:left;}
#nav a.gmenu:hover{background:url(images/7h.jpg); color:#fff;}
#nav a.gmenu:active{background:url(images/7h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.abmenu, #nav a.abmenu:link, #menub a.vmenu:visited, #nav a.abmenu:visited {display:block; width:87px; height:41px; background:url(images/8.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.abmenu, #nav a.bmenu:link, #nav a.abmenu:visited {float:left;}
#nav a.abmenu:hover{background:url(images/8h.jpg); color:#fff;}
#nav a.abmenu:active{background:url(images/8h.jpg); color:#fff;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.ahmenu, #nav a.ahmenu:link, #menub a.vmenu:visited, #nav a.ahmenu:visited {display:block; width:66px; height:41px; background:url(images/1h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.ahmenu, #nav a.bmenu:link, #nav a.ahmenu:visited {float:left;}
#nav a.ahmenu:hover{background:url(images/1h.jpg); color:#fff;}
#nav a.ahmenu:active{background:url(images/1h.jpg); color:#fff;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.bhmenu, #nav a.bhmenu:link, #menub a.vmenu:visited, #nav a.bhmenu:visited {display:block; width:87px; height:41px; background:url(images/2h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.bhmenu, #nav a.bmenu:link, #nav a.bhmenu:visited {float:left;}
#nav a.bhmenu:hover{background:url(images/2h.jpg); color:#fff;}
#nav a.bhmenu:active{background:url(images/2h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.ahhmenu, #nav a.ahhmenu:link, #menub a.vmenu:visited, #nav a.ahhmenu:visited {display:block; width:87px; height:41px; background:url(images/8h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.ahhmenu, #nav a.bmenu:link, #nav a.ahhmenu:visited {float:left;}
#nav a.ahhmenu:hover{background:url(images/8h.jpg); color:#fff;}
#nav a.ahhmenu:active{background:url(images/8h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.phmenu, #nav a.phmenu:link, #menub a.vmenu:visited, #nav a.phmenu:visited {display:block; width:87px; height:41px; background:url(images/3h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.phmenu, #nav a.bmenu:link, #nav a.phmenu:visited {float:left;}
#nav a.phmenu:hover{background:url(images/3h.jpg); color:#fff;}
#nav a.phmenu:active{background:url(images/3h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.anmenu, #nav a.anmenu:link, #menub a.vmenu:visited, #nav a.anmenu:visited {display:block; width:87px; height:41px; background:url(images/5h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.anmenu, #nav a.bmenu:link, #nav a.anmenu:visited {float:left;}
#nav a.anmenu:hover{background:url(images/5h.jpg); color:#fff;}
#nav a.anmenu:active{background:url(images/5h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.fhmenu, #nav a.fhmenu:link, #menub a.vmenu:visited, #nav a.fhmenu:visited {display:block; width:87px; height:41px; background:url(images/4h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.fhmenu, #nav a.bmenu:link, #nav a.fhmenu:visited {float:left;}
#nav a.fhmenu:hover{background:url(images/4h.jpg); color:#fff;}
#nav a.fhmenu:active{background:url(images/4h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.ghmenu, #nav a.ghmenu:link, #menub a.vmenu:visited, #nav a.ghmenu:visited {display:block; width:87px; height:41px; background:url(images/7h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.ghmenu, #nav a.bmenu:link, #nav a.ghmenu:visited {float:left;}
#nav a.ghmenu:hover{background:url(images/7h.jpg); color:#fff;}
#nav a.ghmenu:active{background:url(images/7h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.khmenu, #nav a.khmenu:link, #menub a.vmenu:visited, #nav a.khmenu:visited {display:block; width:87px; height:41px; background:url(images/6h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.khmenu, #nav a.bmenu:link, #nav a.khmenu:visited {float:left;}
#nav a.khmenu:hover{background:url(images/6h.jpg); color:#fff;}
#nav a.khmenu:active{background:url(images/6h.jpg); color:#fff;}
#nav {height:41px;}


#nav:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden;}



#nav img {
	float: left;
}

#nav {
	margin-top: 3px;
	margin-left:50px;
}




#body {
	padding-top: 150px;

		margin-left:70px;
}

#photo {
	float: left;
	width: 624px;
}
#photo div {
	border: 1px solid #D8D8D8;
	padding: 2px;
}
#photo img {
	display: block;
}

#ab {
	float: left;
	width: 800px;
}
#ab div {
	border: 0px solid #D8D8D8;
	padding: 2px;
}
#ab img {
	display: block;
}


#search-news {
	float: right;
	width: 140px;
}
#search-news div {
	padding: 3px 0;
	margin: 0;
}
#search-news #q {
	width: 140px;
	border: 1px solid #859D31;
}
#search-news .downcast {
	background: #E6E7E7;
	border-top: 1px solid #CFD0D0;
	padding: 3px 4px 4px 4px;
	margin: 2px 0 0 0;
}
#search-news h3 {
	background: url(images/bullet_letter.gif) no-repeat;
	padding-left: 15px;
	font-weight: bold;
	margin: 1em 0 0.4em 0;
}
#search-news p {
	padding-left: 15px;
	padding-right: 2px;
	margin: 0.1em 0;
}
a {
	font-weight: bold;
	color: #5C5C5C;
}



#body-left {
	float: left;
	width: 408px;
}
#body-right {
	float: right;
	width: 330px;
}

#body-left ul.plussbullets {
	margin-top: 45px;
	margin-left: 120px;
	padding: 0;
	font-weight: bold;
}
#body-left ul.plussbullets li {
	background: top left url(images/bullet_plus.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 25px;
}

#body h2, #body p {
	margin: 0.3em 0;
}

#body-right p {
	margin-right: 2em;
}

#body a.green {
	color: #9AAB68;
	font-weight: normal;
	text-decoration: underline;
}

#gallery img {
	float: left;
}

#footer {
	color: #fff;
	background: #fff url(images/footer.jpg) repeat-x;
	padding: 40px 0 160px 0;
	margin-top: 2em;
	font-weight: bold;
}
#footer p {
	margin: 0;
	padding: 0;
}


    Die index.php :


    HTML-Code:
    <!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>xxxxxxxxx</title>
	<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>

	<style type="text/css">
		body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;	}
	</style>
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
/* Tragen Sie hier die Anzahl der Banner ein*/ 
anzahl_banner=5; 
var banner_nr=0; 
var zustand=0; 
var banner=new Array(); 
for (i=0;i<anzahl_banner;i++){ 
 banner[i]=new Image(); 
} 

/* Tragen Sie hier die URLs der Grafiken ein*/ 
banner[0].src="bsp/tom_056841.jpg"; 
banner[1].src="bsp/tom_056895.jpg"; 
banner[2].src="bsp/tom_056859.jpg"; 
banner[3].src="bsp/tom_056948.jpg"; 
banner[4].src="bsp/tom_056927.jpg"; 

/* Tragen Sie hier die URLs zu den Banner-Webseiten ein*/ 
var banner_url=new Array(); 
banner_url[0]="ablauf.php"; 
banner_url[1]="ablauf.php"; 
banner_url[2]="ablauf.php"; 
banner_url[3]="ablauf.php"; 
banner_url[4]="ablauf.php"; 

/* Hinter setTimeout wird Rotationszeit eingetragen 
    Momentan 5sec ==> 5000*/ 
function wechsleBanner(){ 
 if (zustand!=1){ 
  banner_nr++; 
  if (banner_nr>anzahl_banner-1){ 
   banner_nr=0; 
   } 
  document.sponsor.src=banner[banner_nr].src; 
  setTimeout("wechsleBanner()",2500); 
  } 
 } 

/* Wechseln der Banner*/ 
function BannerURL(){ 
 zustand=1; 
 location.href=banner_url[banner_nr]; 
 } 

function URLinStatuszeile(){ 
 parent.window.status=banner_url[banner_nr]; 
 } 
//--> 
</SCRIPT>

</head>
<body>
<body onload="wechsleBanner()">

<img class="hidepics" src="images/1.jpg">
<img class="hidepics" src="images/2.jpg">
<img class="hidepics" src="images/3.jpg">
<img class="hidepics" src="images/4.jpg">
<img class="hidepics" src="images/5.jpg">
<img class="hidepics" src="images/6.jpg">
<img class="hidepics" src="images/7.jpg">
<img class="hidepics" src="images/8.jpg">
<img class="hidepics" src="images/1h.jpg">
<img class="hidepics" src="images/2h.jpg">
<img class="hidepics" src="images/3h.jpg">
<img class="hidepics" src="images/4h.jpg">
<img class="hidepics" src="images/5h.jpg">
<img class="hidepics" src="images/6h.jpg">
<img class="hidepics" src="images/7h.jpg">
<img class="hidepics" src="images/8h.jpg">
	<div align="center">
  <div id="wrapper" >
		<div  id="header">
			<h1><a href="index.php"><img src="logo.png"  alt="xxxxxxxx"></a></h1>
			      
            
            

            <div id="nav">
				<a class="ahmenu" href="index.php"></a>
				<a class="bmenu" href="beispiel.php"></a>
        <a class="abmenu" href="ablauf.php"></a>
				<a class="pmenu" href="preise.php"></a>
				<a class="amenu" href="anmeldung.php"></a>
				<a class="fmenu" href="fragen.php"></a>
        <a class="gmenu" href="geschenksidee.php"></a>
      	<a class="kmenu" href="kontakt.php"></a>


						</div>
		</div>

		<div id="body">
<a href="ablauf.php" onClick="BannerURL();return false" onMouseover="URLinStatuszeile();return true;"><IMG scr="bsp/tom_056841.jpg" height=427 width=640 name="sponsor" border="0" class="tom" ></a>




	</div>
				    <tr><td  align="center" >
				<!-- BEGIN footermenu -->
       

		              
		        			  <tr>
		          <td align="center" valign="top">
					</div>
          </div><div id="footer">
	<p class="footer-links">



								&nbsp; <a href="agb.php" style="color:white; font-size:8px;">AGB</a>

										&nbsp; <a href="impresum.php" style="color:white; font-size:8px;">Impressum</a>
</p>


		  			  <tr >
		           <br/><span  style="color:black; font-size:10px;">© 2010 xxxxxxxxxx. Alle Rechte vorbehalten  <br/></td>
              </span>
		        </tr>

		        </tr><!-- END footermenu -->
			    </td></tr>	</div>
</body>
</html>
    Danke schon einmal im voraus für antworten!
    Zitieren Zitieren  
  3. 22.04.2010 12:30 #2
    max.m
    max.m ist offline
    TP-Veteran max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User Avatar von max.m
    Registriert seit
    Dec 2005
    Ort
    Stuttgart
    Beiträge
    1.955
    Also ich wollte es gerade testen, aber sorry: durch diesen Code wühle ich mich nicht. Es fängt bei 2 <body>-Tags an, dann kommen Angaben wie <div align="center"> was eigentlich ins CSS sollte, weiter unten kommen <tr> und <td>-Tags, ein öffnendes und schliessendes <table> fehlt aber (dann kommen dazwischen noch <div>-Tags vor), CSS-Angaben über style="" einzubinden sollte man auch nicht machen. Bei einem XHTML-Doctype (auch noch strict) darf auch kein Tag groß geschrieben werden (<IMG> an einer Stelle) und es gibt bestimmt noch mehr.

    Aber wie möchtest Du die Seite denn zentrieren? Nur horizontal? Oder horizontal und vertikal?
    Zitieren Zitieren  
  4. 22.04.2010 12:35 #3
    georgzed
    georgzed ist offline
    TP-Junior georgzed macht alles soweit korrekt
    Registriert seit
    Apr 2010
    Beiträge
    6
    Hello danke für die antwort, ja ich weis ich hab einiges an mist gebaut was ich noch bereinigen muss und es dann noch valide nur ich brauch bald eine vorschau von den ganzen.
    ich möchte es horizontal und zwar die drei div tags:
    #nav
    #body
    #wrapper

    nav ist das menü der, body ist der inhal, wrapper die ganze seite
    nur der inhalt ist nicht immer gleich breit
    Geändert von georgzed (22.04.2010 um 12:41 Uhr)
    Zitieren Zitieren  
  6. 22.04.2010 12:45 #4
    max.m
    max.m ist offline
    TP-Veteran max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User Avatar von max.m
    Registriert seit
    Dec 2005
    Ort
    Stuttgart
    Beiträge
    1.955
    Der wrapper sollte normalerweise die gesamte Seite umschliessen, und der wird dann horizontal zentriert, im CSS:

    HTML-Code:
    #wrapper {
   width: 950px; /* durch Deine Breite ersetzen*/
   margin: 0 auto; /* zentriert den Container horizontal */
}
    Die anderen Elemte liegen dann im wrapper und werden dort positioniert.

    Edit: gerade Dein Edit gesehen: kannst Du mal eine Grafik erstellen wie die Seite aussehen soll, und darin die Bereiche markieren?
    Zitieren Zitieren  
  7. 22.04.2010 12:47 #5
    SonKite
    SonKite ist offline
    TP-Specialist SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User SonKite lebt für das TP und seine User Avatar von SonKite
    Registriert seit
    May 2005
    Ort
    Heidelberg
    Beiträge
    2.040
    #wrapper wird doch zentriert angezeigt? Nur die Nav nicht was daran liegt das du ihr einen margin-left von 50px gibst. Ist der weg liegt die Navigation auch drin.

    Ansonsten lade die Seite mal irgendwo hoch da man ohne deine Bilder nicht viel sieht.

    getreidemühlen.de - Gute und günstige Getreidemühlen vom Fachhandel

    Zitieren Zitieren  
  8. 22.04.2010 12:51 #6
    georgzed
    georgzed ist offline
    TP-Junior georgzed macht alles soweit korrekt
    Registriert seit
    Apr 2010
    Beiträge
    6
    jetzt habe ich dir margin-left von 50px entfernt wie zentrier ich die jetzt ?
    Geändert von georgzed (23.04.2010 um 11:49 Uhr)
    Zitieren Zitieren  
  9. 22.04.2010 13:04 #7
    hero-master
    hero-master ist offline
    TP-Moderator hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User Avatar von hero-master
    Registriert seit
    Mar 2003
    Ort
    Hamburg
    Beiträge
    5.927
    Da stehts doch in dem gemachten Code:
    Code:
    width: 100%; /* durch Deine Breite ersetzen*/
    Grüße Nico

    Meine kleinen CSS-Tutorials
    Zitieren Zitieren  
  10. 22.04.2010 13:12 #8
    georgzed
    georgzed ist offline
    TP-Junior georgzed macht alles soweit korrekt
    Registriert seit
    Apr 2010
    Beiträge
    6
    hab ich jetzt gemacht das logo und das menü sind immer noch nicht zentriert hmmm )O;


    hier die aktuelle css:

    HTML-Code:
    html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	
}
img {
	border: 0;
}

.tom {
width:640px;
height:427;
	border: 1px solid #999999;
}
a {
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.more {
	text-align: right;
}
.left {
	float: left;
}
.clear {
	clear: both;
}

body, h1, h2, h3, form {
	font: 10px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #5C5C5C;
}

body {
	background: url(images/header_bg.jpg) repeat-x;
	text-align: center;
}
#wrapper {
   width: 1024px; /* durch Deine Breite ersetzen*/
   margin: 0 auto; /* zentriert den Container horizontal */
}


#header {
	height: 160px;
	position: absolute;
}
#header h1 {
	margin-top: 5px;

}
#header h1 img {
	display: block;
}
.hidepics {
  width:0px;
  height:0px;
  display:none;
}


#nav a.vmenu, #menub a.vmenu:link, #nav a.hmenu, #nav a.hmenu:link, #menub a.vmenu:visited, #nav a.hmenu:visited {display:block; width:66px; height:41px; background:url(images/1.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.hmenu, #nav a.hmenu:link, #nav a.hmenu:visited {float:left;}
#nav a.hmenu:hover{background:url(images/1h.jpg); color:#fff;}
#nav a.hmenu:active{background:url(images/1h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.hmenu, #nav a.bmenu:link, #menub a.vmenu:visited, #nav a.bmenu:visited {display:block; width:87px; height:41px; background:url(images/2.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.bmenu, #nav a.bmenu:link, #nav a.bmenu:visited {float:left;}
#nav a.bmenu:hover{background:url(images/2h.jpg); color:#fff;}
#nav a.bmenu:active{background:url(images/2h.jpg); color:#fff;}



#nav a.vmenu, #menub a.vmenu:link, #nav a.pmenu, #nav a.pmenu:link, #menub a.vmenu:visited, #nav a.pmenu:visited {display:block; width:87px; height:41px; background:url(images/3.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.pmenu, #nav a.bmenu:link, #nav a.pmenu:visited {float:left;}
#nav a.pmenu:hover{background:url(images/3h.jpg); color:#fff;}
#nav a.pmenu:active{background:url(images/3h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.fmenu, #nav a.fmenu:link, #menub a.vmenu:visited, #nav a.fmenu:visited {display:block; width:87px; height:41px; background:url(images/4.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.fmenu, #nav a.bmenu:link, #nav a.fmenu:visited {float:left;}
#nav a.fmenu:hover{background:url(images/4h.jpg); color:#fff;}
#nav a.fmenu:active{background:url(images/4h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.amenu, #nav a.amenu:link, #menub a.vmenu:visited, #nav a.amenu:visited {display:block; width:87px; height:41px; background:url(images/5.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.amenu, #nav a.bmenu:link, #nav a.amenu:visited {float:left;}
#nav a.amenu:hover{background:url(images/5h.jpg); color:#fff;}
#nav a.amenu:active{background:url(images/5h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.kmenu, #nav a.kmenu:link, #menub a.vmenu:visited, #nav a.kmenu:visited {display:block; width:87px; height:41px; background:url(images/6.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.kmenu, #nav a.bmenu:link, #nav a.kmenu:visited {float:left;}
#nav a.kmenu:hover{background:url(images/6h.jpg); color:#fff;}
#nav a.kmenu:active{background:url(images/6h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.gmenu, #nav a.gmenu:link, #menub a.vmenu:visited, #nav a.gmenu:visited {display:block; width:87px; height:41px; background:url(images/7.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.gmenu, #nav a.bmenu:link, #nav a.gmenu:visited {float:left;}
#nav a.gmenu:hover{background:url(images/7h.jpg); color:#fff;}
#nav a.gmenu:active{background:url(images/7h.jpg); color:#fff;}


#nav a.vmenu, #menub a.vmenu:link, #nav a.abmenu, #nav a.abmenu:link, #menub a.vmenu:visited, #nav a.abmenu:visited {display:block; width:87px; height:41px; background:url(images/8.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.abmenu, #nav a.bmenu:link, #nav a.abmenu:visited {float:left;}
#nav a.abmenu:hover{background:url(images/8h.jpg); color:#fff;}
#nav a.abmenu:active{background:url(images/8h.jpg); color:#fff;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.ahmenu, #nav a.ahmenu:link, #menub a.vmenu:visited, #nav a.ahmenu:visited {display:block; width:66px; height:41px; background:url(images/1h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.ahmenu, #nav a.bmenu:link, #nav a.ahmenu:visited {float:left;}
#nav a.ahmenu:hover{background:url(images/1h.jpg); color:#fff;}
#nav a.ahmenu:active{background:url(images/1h.jpg); color:#fff;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.bhmenu, #nav a.bhmenu:link, #menub a.vmenu:visited, #nav a.bhmenu:visited {display:block; width:87px; height:41px; background:url(images/2h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.bhmenu, #nav a.bmenu:link, #nav a.bhmenu:visited {float:left;}
#nav a.bhmenu:hover{background:url(images/2h.jpg); color:#fff;}
#nav a.bhmenu:active{background:url(images/2h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.ahhmenu, #nav a.ahhmenu:link, #menub a.vmenu:visited, #nav a.ahhmenu:visited {display:block; width:87px; height:41px; background:url(images/8h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.ahhmenu, #nav a.bmenu:link, #nav a.ahhmenu:visited {float:left;}
#nav a.ahhmenu:hover{background:url(images/8h.jpg); color:#fff;}
#nav a.ahhmenu:active{background:url(images/8h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.phmenu, #nav a.phmenu:link, #menub a.vmenu:visited, #nav a.phmenu:visited {display:block; width:87px; height:41px; background:url(images/3h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.phmenu, #nav a.bmenu:link, #nav a.phmenu:visited {float:left;}
#nav a.phmenu:hover{background:url(images/3h.jpg); color:#fff;}
#nav a.phmenu:active{background:url(images/3h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.anmenu, #nav a.anmenu:link, #menub a.vmenu:visited, #nav a.anmenu:visited {display:block; width:87px; height:41px; background:url(images/5h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.anmenu, #nav a.bmenu:link, #nav a.anmenu:visited {float:left;}
#nav a.anmenu:hover{background:url(images/5h.jpg); color:#fff;}
#nav a.anmenu:active{background:url(images/5h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.fhmenu, #nav a.fhmenu:link, #menub a.vmenu:visited, #nav a.fhmenu:visited {display:block; width:87px; height:41px; background:url(images/4h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.fhmenu, #nav a.bmenu:link, #nav a.fhmenu:visited {float:left;}
#nav a.fhmenu:hover{background:url(images/4h.jpg); color:#fff;}
#nav a.fhmenu:active{background:url(images/4h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.ghmenu, #nav a.ghmenu:link, #menub a.vmenu:visited, #nav a.ghmenu:visited {display:block; width:87px; height:41px; background:url(images/7h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.ghmenu, #nav a.bmenu:link, #nav a.ghmenu:visited {float:left;}
#nav a.ghmenu:hover{background:url(images/7h.jpg); color:#fff;}
#nav a.ghmenu:active{background:url(images/7h.jpg); color:#fff;}
#nav {height:41px;}

#nav a.vmenu, #menub a.vmenu:link, #nav a.khmenu, #nav a.khmenu:link, #menub a.vmenu:visited, #nav a.khmenu:visited {display:block; width:87px; height:41px; background:url(images/6h.jpg); color:#fff; text-decoration:none; text-align:center; line-height:41px;}
#nav a.khmenu, #nav a.bmenu:link, #nav a.khmenu:visited {float:left;}
#nav a.khmenu:hover{background:url(images/6h.jpg); color:#fff;}
#nav a.khmenu:active{background:url(images/6h.jpg); color:#fff;}
#nav {height:41px;}


#nav:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden;}



#nav img {
	float: left;
}

#nav {
	margin-top: 3px;

}




#body {
	padding-top: 150px;

}

#photo {
	float: left;
	width: 624px;
}
#photo div {
	border: 1px solid #D8D8D8;
	padding: 2px;
}
#photo img {
	display: block;
}

#ab {
	float: left;
	width: 800px;
}
#ab div {
	border: 0px solid #D8D8D8;
	padding: 2px;
}
#ab img {
	display: block;
}


#search-news {
	float: right;
	width: 140px;
}
#search-news div {
	padding: 3px 0;
	margin: 0;
}
#search-news #q {
	width: 140px;
	border: 1px solid #859D31;
}
#search-news .downcast {
	background: #E6E7E7;
	border-top: 1px solid #CFD0D0;
	padding: 3px 4px 4px 4px;
	margin: 2px 0 0 0;
}
#search-news h3 {
	background: url(images/bullet_letter.gif) no-repeat;
	padding-left: 15px;
	font-weight: bold;
	margin: 1em 0 0.4em 0;
}
#search-news p {
	padding-left: 15px;
	padding-right: 2px;
	margin: 0.1em 0;
}
a {
	font-weight: bold;
	color: #5C5C5C;
}



#body-left {
	float: left;
	width: 408px;
}
#body-right {
	float: right;
	width: 330px;
}

#body-left ul.plussbullets {
	margin-top: 45px;
	margin-left: 120px;
	padding: 0;
	font-weight: bold;
}
#body-left ul.plussbullets li {
	background: top left url(images/bullet_plus.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 25px;
}

#body h2, #body p {
	margin: 0.3em 0;
}

#body-right p {
	margin-right: 2em;
}

#body a.green {
	color: #9AAB68;
	font-weight: normal;
	text-decoration: underline;
}

#gallery img {
	float: left;
}

#footer {
	color: #fff;
	background: #fff url(images/footer.jpg) repeat-x;
	padding: 40px 0 160px 0;
	margin-top: 2em;
	font-weight: bold;
}
#footer p {
	margin: 0;
	padding: 0;
}


    vielen Dank
    Zitieren Zitieren  
  11. 22.04.2010 14:05 #9
    georgzed
    georgzed ist offline
    TP-Junior georgzed macht alles soweit korrekt
    Registriert seit
    Apr 2010
    Beiträge
    6
    ok, super! jetzt passt alles bis auf das menü und das ist unter
    #nav nur das bekomm ich nicht zentriert an was kann das liegen?

    Dankeschön
    Zitieren Zitieren  
  12. 22.04.2010 14:49 #10
    max.m
    max.m ist offline
    TP-Veteran max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User max.m lebt für das TP und seine User Avatar von max.m
    Registriert seit
    Dec 2005
    Ort
    Stuttgart
    Beiträge
    1.955
    Also mir sind da deutlich zu viele #nav im CSS um es durchzuschauen.
    Ich hab Dir aber hier mal den prinzipiellen Aufbau Wrapper - Navi - Content - Footer. Alles zentriert.

    HTML-Code:
    <!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--

* {
    margin: 0;
    padding: 0;
    border: 0;
}

#wrapper {
    width: 700px;
    margin: 0 auto;
    background-color: #cccccc;
}

#footer {
    width: 700px;
    background-color: #000000;
    color: #ffffff;
}

#content {
    width: 600px;
    margin: 0 auto;
    background-color: #f1f1f1;
}

#nav {
    width: 300px;
    margin: 0 auto;
    background-color: #ffffff;
}
-->
</style>
</head>
<body>
<div id="wrapper">Wrapper
    <div id="nav">Nav</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>
</body>
</html>
    Vielleicht kannst Du es selbst übertragen. ,)
    Zitieren Zitieren  
  13. 23.04.2010 11:49 #11
    georgzed
    georgzed ist offline
    TP-Junior georgzed macht alles soweit korrekt
    Registriert seit
    Apr 2010
    Beiträge
    6
    super ! Danke alles funktioniert.
    Zitieren Zitieren  
+ Antworten
« Wordpress: Ein Kubrick-theme und Internet Explorer (8) Problem | Div rutscht nach unten »

Ähnliche Themen

  1. Seite zentrieren
    Von Xorron im Forum Dreamweaver & andere Webeditoren
    Antworten: 6
    Letzter Beitrag: 26.01.2010, 10:26
  2. DW - Seite zentrieren
    Von "Alt+C." im Forum Dreamweaver & andere Webeditoren
    Antworten: 4
    Letzter Beitrag: 20.12.2008, 21:03
  3. seite zentrieren
    Von Kommandant im Forum Fireworks
    Antworten: 8
    Letzter Beitrag: 13.10.2006, 09:16
  4. Seite zentrieren
    Von chrisi im Forum Dreamweaver & andere Webeditoren
    Antworten: 2
    Letzter Beitrag: 17.04.2003, 21:38
  5. Seite Zentrieren
    Von christine im Forum Webdesign allgemein
    Antworten: 6
    Letzter Beitrag: 28.08.2002, 15:30

Aktive Benutzer

Aktive Benutzer

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

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51