Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS: Zentrierung
Ja, ich hab da ein kleines Problem mit CSS ...
Um ein Objekt genau in der Mitte der Website zu platzieren, müsste man (wie es auch in einigen Tutorials beschrieben wird) einfach den Abstand vom linken und rechten Rand auf je 50% setzen.
position: absolute;
left: 50%;
right: 50%;
Nun geschieht bei mir allerdings folgendes: Das Objekt (was in diesem Fall der ganze, 800px breite Body ist, und das ist hier das Problem) grenzt mit dem linken Rand genau an die Mitte an. Wenn ich das 'right' über das 'left' setze, passiert das Gleiche O.o. Das deutet ja darauf hin, dass die Angabe für 'left' einfach dominant ist ... ich müsste es aber irgendwie hinbekommen, dass es genau in der Mitte platziert wird, um das Problem bei den einzelnen Auflösungen zu umgehen und nicht extra eine (wahrscheinlich eh nicht exakte) Browserweiche zu stellen ... und die Möglichkeit des <div align="center"> bietet sich ja leider nicht, da es wiegesagt um den ganzen Inhalt geht ... und wenn ich die Abstände in Pixeln definiere, sieht's halt von Auflösung zu Auflösung anders aus. Kann mir wer sagen, wie ich das Problem mit CSS (oder notfalls auch anders, wenn's geht) löse ?
Die eleganteste Lösung ist folgende:
<html>
<head>
<style>
#main
{
position:absolute;
left:50%;
top:50%;
width:800px;
height:500px;
margin-left:-400px;
top-margin:-250px;
background-color:#AAAAAA;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
aja, wunderschön. mit dem margin-left funzts. auch wenn ichs einfach in die body-definitionen reinschreib. vielen dank :)
[edit] naja, seh grad das das ganze im IE net funzt (was mir zwar persönlich egal is ... ) ... aber naja, stör ich mich erstmal nich weiter dran.
Wenn der IE nicht richtig darstellt, dann benutze diesen Doctypee hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Damit zwingst du den IE in einen validen Standard.
Wenn der IE nicht richtig darstellt, dann benutze diesen Doctypee hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Damit zwingst du den IE in einen validen Standard.
funzt, dankeschön :A
hab im moment irgendwie ne schlechte einstellung gegenüber diesen doctypes, da mir diese xhtml-doctypes noch und nöcher das design verhaun haben, und ich konnt mich stundenlang mit der sinnlosen fehlersuche abmühen :/
aber naja, mit dem funzt ja noch alles.
Wenn du ne Seite baust, dann solltest du den direkt von Anfang an rein machen. So kannst du direkt beim bauen sehen, ob was nicht geht. Vorteil ist, das die Seite danach wesentlich kompatibler zu allen Browsern ist.
alter beitrag: jo, werd ich mir dann bei den HTML-doctypes auch wieder angewöhnen .. nur mit dem xhtml-doctypes hatte ich halt öfters probleme, obwohl ich nie fehler im script gefunden hatte.
naja, thema hat sich dann erstma erledigt.
neu dazu: ~~~
so, hab noch ein problem mit css ... die seite soll so aussehen, dass abwechselnd erst links ein bild und dann ein text, im nächsten absatz dann links der text und rechts das bild. erster gedanke: float. funzt aber leider nicht, da in den texten unvermeidbare zeilenumbrüche enthalten sind, und das bild daher nur in der ersten zeile steht -> einiges nach oben rausragt. zweiter versuch: positionierung / margin-left bzw -right. bei beiden das problem: die texte und bilder werden zwar richtig positioniert, aufgrund der css-positionierung (left / right) wird aber der zeilenumbruch zwischen den einzelnen absätzen nicht interpretiert -> die texte & bilder stehen direkt übereinander. mit css auch noch in der höhe positionieren wollte ich allerdings auch nicht, da das dann wieder bei anderen auflösungen ergibt ... [Link zur Seite] (http://www.tomarus.de/garde/raenge.php). Hat da irgendwer ne idee, wie mans noch machen kann oder den browser zum 'untereinanderanordnen' der absätze zwingen kann ? mit relativer positionierung hab ichs auch schon versucht ... bringt net viel.
aus
<img src="gfx/rekrut.gif" alt="Rekrut" class="floata" />
<div class="texta">
<strong>Skillpunkte:</strong> 3 <br />
<strong>Belegbar mit:</strong> Einhandwaffenbeherrschung, Bogenbeherrschung, Jagen & Schleichen <br />
<strong>Beschreibung:</strong> Beim Eintritt in die Garde wird man in den Rang eines Rekruten versetzt. Nach guten RPG Posts und Engagement in der Gilde und der Unterweisung durch den Ausbilder erreicht man rasch den nächsten Rang. Man bekommt ein Schwert kostenlos und kann beim Rüstungsbauer eine Lederrüstung erstehen. <br />
<strong>Aufgabenbereich:</strong> Der Ausbilder wird dich anleiten und dir erklären was für dich zu tun ist.
</div>
Das hier machen?
<div class="texta">
<img src="gfx/rekrut.gif" alt="Rekrut" align="left" />
<strong>Skillpunkte:</strong> 3 <br />
<strong>Belegbar mit:</strong> Einhandwaffenbeherrschung, Bogenbeherrschung, Jagen & Schleichen <br />
<strong>Beschreibung:</strong> Beim Eintritt in die Garde wird man in den Rang eines Rekruten versetzt. Nach guten RPG Posts und Engagement in der Gilde und der Unterweisung durch den Ausbilder erreicht man rasch den nächsten Rang. Man bekommt ein Schwert kostenlos und kann beim Rüstungsbauer eine Lederrüstung erstehen. <br />
<strong>Aufgabenbereich:</strong> Der Ausbilder wird dich anleiten und dir erklären was für dich zu tun ist.
</div>
hm ... dann werden texte und bilder zwar vertikal richtig positioniert, allerdings steht (bei mir) jetzt der eine text direkt unter dem anderen, und dadurch auch neben dem falschen bild (siehe hier (http://www.tomarus.de/garde/raenge.php)). wäre besser, wenn die texte untereinander stehehn ... und zwar kontrolliert untereinander, nicht irgendwie mit genügend zeilenumbrüchen oder so, sieht dann ja wieder überall anders aus ..
[edit] sollte also so aussehen *klick* (http://www.tomarus.de/garde/raenge.gif)
Du musst die img Tags auch mit in die divs packen. Also
<div>
<img>
Text
</div>
und nicht
<img>
<div>
text
</divY
stimmt, übersehen ... nu funzts, und wenn ich noch genug nen trennstrich dazwischen setz, funzts auch mit dem untereinander :A gut, vielen dank :)
so, ich benutz den thread hier einfach nochmal, is ja wieder ein css-problem.
also, ich hätte eine seite (*klick* (http://www.tomarus.de/fallout)), die halt recht standardmäßig aufgebaut ist: oben header, links navigation, rechts content. für den content, dacht ich mir, probier ich mal overflow (das problem würde wohl aber auch mit nem iframe auftreten). problem: da der content bis an den rechten rand reichen soll, denk ich mir, ok, width (und height): 100%;. joar, kommt aber nicht das bei raus, was ich mir erhofft hatte. statt nämlich bis zum rand zu gehen, setzt er mir die breite auf die breite des bildschirms - da der content aber (ebenfalls mit css) ein wenig nach rechts und unten verschoben wurde, um platz für navi und header zu lassen, steht er nun aber über. was tun, damit er nur genau bis zum bildschirmrand reicht ?
Hast Du es schon mal mit
overflow: scroll; versucht? Ist sowieso etwas kritisch, da du nicht kontrollieren kannst, ob der Inhalt zusammengestaucht wird. Vielleicht wäre es auch eine gute Idee die Masse des Body-Elements zu definieren.
Fàilte, Lughwyn Shor Gormalin
jap, damit hab ichs auch schon versucht. bringt leider auch nichts, abgesehen davon, dass da halt scrollbalken entstehen. deutlich zu breit ist es immernoch. btw, womit ichs auch schonmal versucht hatte: 100%-300px;. geht das eigentlich irgendwie in css ? so hats nämlich nicht funktioniert.
Also ich würde die generell mal raten, die finger von frames zu lassen. Die machen einem wie du ja selber siehst, immer nur ärger. Eine Lösung für dein Problem weiß ich nicht, aber ich hab vielleicht nen anderen ansatz. Deine Datei im Frame könnte so aussehen:
<html>
<head></head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
// Sonstiger Quelltext
</td>
</tr>
</tabel>
</body>
</html>
Damit ugehst, du die css Breite. Unschöne Frames, verlangen unschöne Tabellen :D
Also ich würde die generell mal raten, die finger von frames zu lassen. Die machen einem wie du ja selber siehst, immer nur ärger. Eine Lösung für dein Problem weiß ich nicht, aber ich hab vielleicht nen anderen ansatz. Deine Datei im Frame könnte so aussehen:
<html>
<head></head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
// Sonstiger Quelltext
</td>
</tr>
</tabel>
</body>
</html>
Damit ugehst, du die css Breite. Unschöne Frames, verlangen unschöne Tabellen :D
hmm ... ja, ne. funzt net so wirklich. *klick* (http://www.tomarus.de/fallout)
der frame wird auf der viel zu kleinen größe gelassen ...
Powered by vBulletin® Version 4.2.2 Copyright ©2024 Adduco Digital e.K. und vBulletin Solutions, Inc. Alle Rechte vorbehalten.