zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seite mittig zentriert

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2006, 15:49
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard Seite mittig zentriert

Hallo,
ich möchte gerne einen Seite basteln, welche mittig ist.
Also links platz und rechts platz und den content innerhalb in mehreren div containern.
Wie mache ich das am besten.
kann ich ein div definieren und alles was da drinne ist, also andere divs sind dann mittig zu diesem div ausgerichtet.
Mit tabellen wäre es einfach aber wie ist das mit den div containern?

Hat jemand Erfahrungen?
Lg
Jenny
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2006, 16:04
Neuer Benutzer
neuer user
 
Registriert seit: 27.03.2006
Beiträge: 23
T´Pau befindet sich auf einem aufstrebenden Ast
Standard

Soll die Seite nur horizontal, oder auch vertikal zentriert sein?
Für horizontal gib dem div eine feste Breite z.B. width: 700px, 80em oder 60% und margin: auto.
Dann noch im body ein text-align: center.
__________________
I call upon Cardassians everywhere - Resist. Resist today. Resist tomorrow. Resist till the last Dominion soldier has been driven from our soil.
Damar - DS9
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2006, 16:12
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

aber der TExt innerhalb der div's soll nicht mittig sein, was mit dem text-align:center doch aber passiert, oder?
Oder soll ich innerhalb dann wieder gegensteuern mit align:left?

lg
jenny
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2006, 16:18
Weltverbesserer
XHTMLforum-Mitglied
 
Registriert seit: 22.05.2006
Beiträge: 125
Dr Snuggles befindet sich auf einem aufstrebenden Ast
Standard

Hallo

text-align:center im body ist für den IE 5, wenn ich mich nicht irre, und kannst du anschließend im zentrierten div wieder per text-align:left; zurücksetzen.

Gruß Christian
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2006, 16:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Dr Snuggles
text-align:center im body ist für den IE 5, wenn ich mich nicht irre
Du irrst nicht, genauso ist es
Mit Zitat antworten
  #6 (permalink)  
Alt 16.08.2006, 17:51
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank,
leider klappt es bei mir noch nicht ganz, denn im mozilla ist es links bündig.
Und im IE sind die teaser mittig.
Hier ist der code, vielleicht habe ich auch wieder was falsch gemacht?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sommerteam Newsletter</title>
<STYLE>
<!--
body {
  text-align: center;
  margin:0px;	
  font-family: Verdana, arial, sans-serif;
  line-height:1.0em;
  font-size:12px;
  background: #D9D9D9;
  background-image:url(newsletter_bg.png);
}

a
{
	color:#000000;
	text-decoration:none;
}
.newsletter_container{
width:640px;
background-color:#FFFFFF;

}
.headerimage{
background-color:#00FF33;
background-image:url(newsletterheader.gif);
height:86px;
}

.issuecontainer{
background-image:url(navigation.gif);
color:#000000;
font-weight:bold;
text-align:right;
padding:4px;
}

.editorial{
 text-align: left;
background-color:#ffffff;
}

.newsletter_teaser{
 text-align: left;
}

.newsletter_container{
 text-align: left;
}

.footer{
text-align: left;
background:#ffffff;
}
.innerteaser{
 border: 1px solid #E8E8E8;}
.categoryteaser {
  margin:auto;
  margin-bottom: 2em;		
  margin-left: 10px;		
  width: 374px;
/*  border: #FFFFFF 1px solid;  Rahmen in Hintergrd-Farbe fuer ff*/
  border-top: 1px dotted #E8E8E8; 	
  padding-top: 5px;
/*  margin-right: 150px; */
  background: #FFFFFF;
}
.categoryteasernew {
  margin:auto;
  margin-bottom: 2em;		
  margin-left: 10px;		
  width: 374px;
/*  border: #FFFFFF 1px solid;  Rahmen in Hintergrd-Farbe fuer ff
  border-top: 1px dotted #E8E8E8; 	*/
  padding-top: 5px;
/*  margin-right: 150px; */
  background: #FFFFFF;
}
.advertisementimage{
background-image:url(newsletter_ad.gif);
height:229px;
}

.categoryteaser p {
  margin-top:0px;	
  margin-bottom:0px;	
  text-align: left;
  background-color:#FBFAFA;
}

html>body .categoryteaser {
  /* childselector-hack, wird von ie ignoriert */
  float:left; /* in ff notwendig, in ie stoerend */
}

.teaser { 
  text-align:left;  
  border:1px solid #FFFFFF; /* in hintergrdfarbe, noetig fuer ff */
  /* overflow:auto; */
}

.teaser_l {
  width: 47%;
  float:left;
  margin-right:20px;  
} 

.teaser_r {
  width: 47%; 
  float:right;
} 

.teaserinfo {
  font-size:0.7em;
  line-height:1.1em;
  margin-bottom:5px;
  background:#EDEDED; 
  height:15px;
}

html>body .teaserinfo {
  font-size:0.8em; 
}

.teaserquelle {  
  float:right;
  margin:0em;
  padding:0px;
}

.teaserimage {
  float:left;
   margin-right:10px;
}

.teasertitle {
  font-size:1.0em;
  font-weight:bold;		
}

.teasertitle a{
  font-size:13px;
  font-weight:bold;
  text-decoration:none;		
}
.teasertitler {
  font-size:1.0em;
  font-weight:bold;	
    background-color:#F5F5F5;
  border-bottom:1px solid #E8E8E8;	
  padding: 4px 0px 4px 8px;	
}
.teasertitler a{
  font-size:11px;
  font-weight:bold;
  text-decoration:none;	
  
}

.teasertext { 
  color:#666666;
  margin:auto;
  padding-left:80px;
  font-size:12px;
}

#nav_right
{
  background: #FFFFFF;
  float:right;
  width:150px;
  text-align:left;
  margin-top:15px;
  margin-right:5px;
/*  margin-left:10px; */
  font-size:0.8em;
}

.nav_right_gruppe{
  margin-bottom:10px;
}

.nav_right_main{
color:#FFFFFF;
  background: #000066;
  font-weight:bold;
  font-size:1.0em;
  padding-left:5px;
  padding-top:3px;
  padding-bottom:3px;
}

.nav_right_body{
  background: #CBCFD2;
  padding-top:5px;
  padding-left:5px;
  padding-right:5px;
  line-height:normal;
}
.nav_right_body a{
color:#000066;
}

.nav_link{
  line-height:1.8em;
}
-->
</STYLE>

</head>

<body>

<div class="newsletter_container">
	<div class="headerimage"></div>
	<div class="issuecontainer">Ausgabe 02/2006</div>
	<div class="advertisementimage"></div>
	<div class="editorial">
		<div style="font-family:Verdana; font-size:13px;">
		<br>
		Mit freundlichen Grüßen<br><br>
		<br>
		Ihr Sommerteam <br>
		<br>

		</div>
	</div>
	
	<div id=nav_right>
  		<!-- SERVICE BOX -->
  
 			 <div class=nav_right_gruppe>
   			 <div class=nav_right_main>Reisen in Europa </div>
   			 <div class=nav_right_body>Nicht immer ist es möglich, einen arzt oder eine apotheke aufzusuchen. Daher ist es immer gut, wenn Sie noch ein Notfallset mit einem entsprechenden Vorrat an allen Materialien, die Sie zur Selbstkontrolle und Behandlung brauchen, mit sich führen. <br>
     		 <br>
		     <a href="">Mit unserem Reisepaket sind Sie bestens vorbereitet...</a> </div>
   			 <!-- /nav_right_body -->
 			 </div>
  
  			<!-- nav_right_gruppe -->
 			 <!-- ENDE SERVICE BOX -->
  
  			<!-- NaVIGaTION BOX -->
  			<div class=nav_right_gruppe>
    		<div class=nav_right_main>Direktlinks </div>
   			 <!-- /nav_right_main -->
    		<div class=nav_right_body> 
			  <p><a class=nav_link href="/55958">schule &amp; Arbeit</a></p>
			  <p>fun &amp; skate <a class=nav_link href="/56188"></a><br>
		            </p>
    		</div>
    		<!-- /nav_right_body -->
  			</div>
 		 	<!-- nav_right_gruppe -->
 			<!-- ENDE NaVIGaTION BOX -->
  </div>
<!-- nav_right -->

<P>
<br> <br>  <br>
</P>

	<!-- Teaser BEGIN-->
	
<div class="newsletter_teaser">
	

<DIV class="categoryteasernew">
<div class="innerteaser">
<DIV class="teasertitler">Ferienchaos</DIV>	
<DIV class="teaseimage"><IMG alt="" src="/sixcms_upload/media_fast/3/gewinn.neu.70x72.gif" border=0></DIV>
<DIV class="teasertext">

<div class="teasercontent">Gewinnen Sie USB-Sticks, eine Polar-Uhr… Wie? Schreiben Sie uns über Ihr 
Blutzuckermessgerät.</div> <br>
<div> <a href="http://www.sommerteam/747120/umfragen/mobil-mein-blutzuckermessgeraet?bereich=">lesen Sie mehr</a> </div>
</DIV></div>
</DIV>
		
<DIV class="categoryteaser">
<DIV class="teaseimage"><IMG alt="" src="/sixcms_upload/media_fast/3/gewinn.neu.70x72.gif" border=0></DIV>
<DIV class="teasertext">
<DIV class="teasertitle">Wie mobil ist IHR Blutzuckermessgerät?</DIV>
<div class="teasercontent">Gewinnen Sie USB-Sticks, eine Polar-Uhr… Wie? Schreiben Sie uns über Ihr 
Blutzuckermessgerät.</div> <br>
<div> <a href="http://www.sommerteam/747120/umfragen/mobil-mein-blutzuckermessgeraet?bereich=">lesen Sie mehr</a> </div>
</DIV>
</DIV>
		
  </div>
	
	
	
	
	
	
	
	<div class="footer">
		<div style="clear: both; BORDER-TOP: #333333 1px solid; FONT-SIZE: 0.9em; MARGIN: auto; WIDTH: 100%; COLOR: #999999; PADDING-TOP: 5px">
		Bitte senden Sie Ihre Aanregungen, Kommentare oder Fragen an 
		<a href="mailto:redaktion@sommerteam">redaktion@sommerteam</a>
		<br>
		<br>
		Selbstverständlich können Sie jederzeit von Ihrem Widerspruchsrecht Gebrauch machen und der Verwendung Ihrer Daten, insbesondere zu Werbezwecken, widersprechen. Es fallen 
		selbstverständlich keine weiteren, als die für Sie üblichen Online-Gebühren an.<br>
		<a href="http://www.sommerteam" target=_blank>Änderungen oder abmeldungen</a>
		des abos können Sie <a href="http://www.sommerteam" target=_blank>hier</a> 
		vornehmen.<br><br>
		© sommerteam 2006
		</div>

	</div>
</div>


</body>
</html>
Was meint Ihr?

Lg
Jenny
Mit Zitat antworten
  #7 (permalink)  
Alt 16.08.2006, 18:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Nochmal:
text-align ist nur ein Workaround für den IE5, margin:auto zentriert in richtigen Browsern. Diese Angabe braucht der zu zentrierende Container.
Mit Zitat antworten
  #8 (permalink)  
Alt 16.08.2006, 18:23
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

ok super !!
jetzt klappts!!


vielen dank
Mit Zitat antworten
  #9 (permalink)  
Alt 16.08.2006, 19:07
Benutzer
neuer user
 
Registriert seit: 14.06.2006
Ort: london
Beiträge: 38
earworms befindet sich auf einem aufstrebenden Ast
Standard

genau das versuche ich auch gerade. oder ist meine fall etwas anders?

ich habe zwei boxen (navigation und hauptteil), nebeneinander. bisher habe ich sie mit position: absolute und genauen px angaben links und oben festgesetzt. allerdings sieht das dann in manchen browsern und vor allem bei computern unterschiedlicher bildschirmgroesse komisch aus. ich moechte gerne, dass sich diese zwei boxen (im richtigen abstand zueinander bleibend) immer mittig des bildschirms zentrieren.

wie mache ich das am besten?

bitte so genau erklaeren wie moeglich, ich bin noch nicht lange dabei.


danke!

oh ja, meine seite als beispiel: www.dancingwayang.com
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit dem Layout: divanordnung Muckel CSS 8 29.06.2008 11:28
3 Boxen mittig zentriert Gecko CSS 1 02.11.2007 18:22
Seite zentriert darstellen Sodie CSS 10 07.09.2006 09:33
IE zentriert meine Seite nicht insanic! CSS 2 25.08.2006 20:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:45 Uhr.