zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV lässt sich nicht zentrieren.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.07.2011, 17:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2011
Beiträge: 5
densi befindet sich auf einem aufstrebenden Ast
Standard DIV lässt sich nicht zentrieren.

Hallo,

ich versuche Gerade verzweifelt ein DIV horizontal zu zentrieren. Hier der Code vom DIV:
Code:
#extraDiv1 {
	background:  url(header.png) center no-repeat;
    position:  absolute;
	margin-right: auto; 
	margin-left:auto;
	width: 500px; 
	height: 145px;
	}
Warum funktioniert das nicht?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.07.2011, 17:41
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Weil du position: absolute; nutzt.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.07.2011, 17:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2011
Beiträge: 5
densi befindet sich auf einem aufstrebenden Ast
Standard

Und was soll ich statt dessen nutzen? Ich habe die anderen Sachen schon probiert, aber es hat nicht geklappt?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.07.2011, 17:48
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Nichts, lösche die position-Eigenschaft aus dem Regelsatz heraus und dein Element (sofern es sich um ein Blockelement handelt) verhält sich, so wie du es wünschst.

Sollte dem nicht so sein, ist mehr Information erforderlich.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.07.2011, 17:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

ja, mach position: absolute einfach weg.
mit der option kannst du unabhängig von den zentrierten anderen objekten ein objekt positionieren wohin du möchtest
Mit Zitat antworten
  #6 (permalink)  
Alt 09.07.2011, 17:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2011
Beiträge: 5
densi befindet sich auf einem aufstrebenden Ast
Standard

Ok danke für die Antworten. Dazu muss man sagen das das DIV im Html sowie in der CSS Datei unterm dem Haupt-Container steht. Tut das was zur Sache? Die HTML Datei darf ich nicht verändern.

Ohne die Postitionsangabe ist das DIV zwar zentriert aber ander falschen Stelle. Hier mein kompletter Code:
Code:
/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
html {
	margin: 0;
	padding: 0;
	}
body { 
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753; 
	background: #fff  no-repeat bottom right; 
	margin: 0; 
	padding: 0;
    background: #000;
	}
p { 
	margin-top: 0; 
	text-align: justify;
	}
h3 { 
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px; 
	margin-bottom: 0; 
	color: #7D775C;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #B7A5DF;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #D4CDDC;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #9685BA;
	}
acronym {
	border-bottom: none;
	}


/* specific divs */
#container { 
	background: url(zen-bg.jpg) no-repeat top left; 
	padding: 0 175px 0 110px;  
	margin-top: 400px; 
    margin-left: auto;
    margin-right: auto;
	
    border: 6px solid #0d72b9;
    width: 400px;
    height: 800px;
	}

#intro { 
	min-width: 470px;
	}

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 { 
	background: transparent url(h1.gif) no-repeat top left; 
	margin-top: 10px; 
	width: 219px; 
	height: 87px; 
	float: left;
	}
#pageHeader h1 span {
	display:none
	}
#pageHeader h2 { 
	background: transparent url(h2.gif) no-repeat top left; 
	margin-top: 58px; 
	margin-bottom: 40px; 
	width: 200px; 
	height: 18px; 
	float: right;
	}
#pageHeader h2 span {
	display:none
	}
#pageHeader {
	padding-top: 20px;
}

#quickSummary {
	clear:both; 
	float: left;
	}
#quickSummary p {
	font: italic 10pt/22pt georgia; 
	text-align:center;
	}

#preamble {
	clear: right; 
	padding: 0px 10px 0 10px;
	}
#supportingText {	
	padding-left: 10px; 
	margin-bottom: 40px;
	}

#footer { 
	text-align: center; 
	}
#footer a:link, #footer a:visited { 
	margin-right: 20px; 
	}

#linkList {
	margin-right: 10px; 
	position: absolute; 
	top: 0; 
	right: 0;
	}
#linkList2 { 
	font: 10px verdana, sans-serif;  
	padding: 10px; 
	margin-top: 210px; 
    border: 6px solid #0d72b9;
	width: 130px;
    
	}
#linkList h3.select { 
	background: transparent url(h3.gif) no-repeat top left; 
	margin: 10px 0 5px 0; 
	width: 97px; 
	height: 16px; 
	}
#linkList h3.select span {
	display:none
	}
#linkList h3.favorites { 
	background: transparent url(h4.gif) no-repeat top left; 
	margin: 25px 0 5px 0; 
	width: 60px; 
	height: 18px; 
	}
#linkList h3.favorites span {
	display:none
	}
#linkList h3.archives { 
	background: transparent url(h5.gif) no-repeat top left; 
	margin: 25px 0 5px 0; 
	width:57px; 
	height: 14px; 
	}
#linkList h3.archives span {
	display:none
	}
#linkList h3.resources { 
	background: transparent url(h6.gif) no-repeat top left; 
	margin: 25px 0 5px 0; 
	width:63px; 
	height: 10px; 
	}
#linkList h3.resources span {
	display:none
	}


#linkList ul {
	margin: 0;
	padding: 0;
	}
#linkList li {
	line-height: 2.5ex; 
	background: transparent url(cr1.gif) no-repeat top center; 
	display: block; 
	padding-top: 5px; 
	margin-bottom: 5px;
	list-style-type: none;
	}
#linkList li a:link {
	color: #988F5E;
	}
#linkList li a:visited {
	color: #B3AE94;
	}


#extraDiv1 {
	background:  url(header.png) center no-repeat;
    margin-top: 75px;
	margin-right: auto; 
	margin-left:auto;
	width: 500px; 
	height: 145px;
	}
.accesskey {
	text-decoration: underline;
	}
Mit Zitat antworten
  #7 (permalink)  
Alt 09.07.2011, 18:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

mit falschen stelle meinst du was?
du hast margin top angewendet, damit verschiebst du dein div nach unten vielleicht meinst du das mit falsche stelle?
wenn deine seite online ist wäre es hilfreicher uns das zu zeigen
Mit Zitat antworten
  #8 (permalink)  
Alt 09.07.2011, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2011
Beiträge: 5
densi befindet sich auf einem aufstrebenden Ast
Standard

Also mit falscher Stelle meine ich das das Header Div unter dem container Div liegt. Eigentlich soll der Header aber über dem Container liegen. Auch ohen margin Top aänder sich nichts....
Mit Zitat antworten
  #9 (permalink)  
Alt 09.07.2011, 18:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

naja ich bin zwar kein experte aber ich sehe keine großen fehler, kann an dein html script liegen... das sehen wir hier nicht. mir fällt auf dein container ist 400px breit??? eine website mit der breite habe ich noch nie gesehen ist das nicht zu klein? heutige standarts sind 1024px breite und der trend geht deutlich in richtung 1260px

Geändert von gandalf_hh (09.07.2011 um 18:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.07.2011, 18:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.07.2011
Beiträge: 5
densi befindet sich auf einem aufstrebenden Ast
Standard

Das wäre meine Html Datei. Ich bin schon echt am verzweifeln...
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" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Dave Shea" />
	<meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display" />
	<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." />
	<meta name="robots" content="all" />

	<title>css Zen Garden: The Beauty in CSS Design</title>

	<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
	<script type="text/javascript"></script>
	
	<style type="text/css" media="all">
		@import "style.css";
	</style>
	
</head>

<!--


	This xhtml document is marked up to provide the designer with the maximum possible flexibility.
	There are more classes and extraneous tags than needed, and in a real world situation, it's more
	likely that it would be much leaner.
	
	However, I think we can all agree that even given that, we're still better off than if this had been
	built with tables.


-->

<body onload="window.defaultStatus='css Zen Garden: The Beauty in CSS Design';" id="css-zen-garden">

<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>css Zen Garden</span></h1>
			<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
		</div>

		<div id="quickSummary">
			<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
			<p class="p2"><span>Download the sample <a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
		</div>

		<div id="preamble">
			<h3><span>The Road to Enlightenment</span></h3>
			<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>
			<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>
			<p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.</span></p>
		</div>
	</div>

	<div id="supportingText">
		<div id="explanation">
			<h3><span>So What is This About?</span></h3>
			<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>
			<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>
		</div>

		<div id="participation">
			<h3><span>Participation</span></h3>
			<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a> for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>
			<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</span></p>
			<p class="p3"><span>Download the sample <a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>
		</div>

		<div id="benefits">
			<h3><span>Benefits</span></h3>
			<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</span></p>
		</div>

		<div id="requirements">
			<h3><span>Requirements</span></h3>
			<p class="p1"><span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates.</span></p>
			<p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.</span></p>
			<p class="p3"><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.</span></p>
			<p class="p4"><span>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/sa/1.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</span></p>
			<p class="p5"><span>Bandwidth graciously donated by <a href="http://www.dreamfirestudios.com/">DreamFire Studios</a></span></p>
		</div>

		<div id="footer">
			<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a> &nbsp; 
			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a> &nbsp; 
			<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a> &nbsp;
			<a href="http://mezzoblue.com/zengarden/faq/#s508" title="Read about the accessibility of this site">508</a> &nbsp;
			<a href="http://www.mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site">aaa</a>
		</div>

	</div>

	
	<div id="linkList">
		<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
		<div id="linkList2">

		<!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
		<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
			<div id="lselect">
				<h3 class="select"><span>Select a Design:</span></h3>
				<!-- list of links begins here. There will be no more than 8 links per page -->
				<ul>
					<li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
					<li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a> by <a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li>
				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Archives:</span></h3>
				<ul>
					<li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a>&nbsp;</li>
					<li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">&laquo; <span class="accesskey">p</span>revious designs</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li>
				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li><a href="http://www.csszengarden.com/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design’s <acronym title="Cascading Style Sheets">CSS</acronym></a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a>&nbsp;</li>
					<li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
				</ul>
			</div>
		</div>
	</div>


</div>

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:46 Uhr.