Sliding doors
Matthias
- programmiertechnik
0 Ben0 Tim Tepaße- css
0 Matthias0 Jürgen Z.0 Matthias
Hallo!
Ich will auf meiner Internetseite das Prinzip der "Sliding doors" anwenden.
Wenn nach diesem Kastens mit "runden Ecken" kein Text mehr steht, funktioniert alles wunderbar. Füge ich unterhalb der sliding doors noch Text an, zerreißt's mir die untere Hälfte völlig.
Weiß jemand, was ich dagegen tun kann?
Vielen Dank schonmal im Voraus.
MfG.,
Matthias
Hi Matthias,
liegt es an mir oder ist dein Problem vollkommen undeutlich? Was ist das "Sliding Doors Prinzip", um welche runden Ecken in welchem Kasten geht es? Ich bin verwirrt.
Gruß
Ben
Hallo,
liegt es an mir oder ist dein Problem vollkommen undeutlich? Was ist das "Sliding Doors Prinzip", um welche runden Ecken in welchem Kasten geht es? Ich bin verwirrt.
Er meint wohl: http://www.alistapart.com/articles/slidingdoors2/
Aber das Problem verstehe ich auch nicht wirklich.
Grüße
Jeena Paradies
Hallo Matthias,
Füge ich unterhalb der sliding doors noch Text an, zerreißt's mir die untere
Hälfte völlig.
Idealerweise postest Du mal Quellcode oder noch besser einen Link auf das
Beispiel. Von dem Fehler so habe ich noch nie gehört bzw. ihn selbst nicht
erlebt, obwohl ich durchaus mit der Technik rumexperimentiert habe. Das kann
vielleicht irgendein Flüchtigkeitsfehler im Quellcode sein. Aber ohne den
konkreten Code kann man das nicht sagen.
Tim
Hallo!
Ich bitte vielmals um Entschuldigung. Da, wo der große Absatz steht, wollte ich eigentlich den Quelltext einfügen, hab's aber vergessen.
Also: Ich will auf meiner Internetseite das Prinzip der "Sliding doors" anwenden. Näheres hierzu findet man auch auf:
http://www.andreas-kalt.de/webdesign/tutorials/runde_ecken.htm
(Dieser Link steht auch irgendwo in selfhtml.)
Mein Quelltext sieht also so aus:
<html>
<head>
<style type="text/css">
.ro {
background:url("roundbox_ro.gif") top right no-repeat;
margin:0;
padding:0;
}
.lo {
background:url("roundbox_lo.gif") top left no-repeat;
margin:0;
padding:0;
}
.ru {
background:url("roundbox_ru.gif") bottom right no-repeat;
margin:0;
padding:0;
}
.lu {
background:url("roundbox_lu.gif") bottom left no-repeat;
margin:0;
padding:0;
}
.inhalt {
margin:0;
padding:2.0em 2.0em 2.0em 2.0em;
}
.inhalt p {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<p><table border="1" bordercolor="#00A2FF" width="550" cellspacing="0" cellpadding="5" rules="all">
<colgroup>
<col width=33%>
<col width=34%>
<col width=33%>
</colgroup>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>...</td>
<td>usw.</td>
<td>...</td>
</tr>
</table>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Wenn nach diesem Kastens mit "runden Ecken" kein Text mehr steht, funktioniert alles wunderbar. Füge ich unterhalb der sliding doors noch Text an, zerreißt's mir die untere Hälfte völlig, d.h. der background "roundbox_ru.gif" wird weiter nach unten geschoben als der background "roundbox_lu.gif"
Weiß jemand, was ich dagegen tun kann?
Vielen Dank schonmal im Voraus.
MfG.,
Matthias
Servus!
Wenn nach diesem Kastens mit "runden Ecken" kein Text mehr steht, funktioniert alles wunderbar. Füge ich unterhalb der sliding doors noch Text an, zerreißt's mir die untere Hälfte völlig.
Stimmt - hab' ich auch nachvollzogen...
Weiß jemand, was ich dagegen tun kann?
Hmmm, hab durch "rumprobieren" herausgefunden, dass wenn Du dem ersten DIV (ro) ein "border:1px solid *farbe*" gibst, dann macht der IE zumindest es so wie Du es wohl beabsichtigst. Frag mich aber nicht warum!
*farbe* sollte dann solch eine sein, die Du auf Deiner Seite dann nimmer siehst.
Vielen Dank schonmal im Voraus.
Bitteschön.
BTW: Bist Du sicher, diesen Weg verwenden zu wollen? Ich meine mich zu erinnern, dass ich das auch mal ins Auge gefasst hatte. Es gab dann allerdings Probleme bei zu viel oder zu wenig "Kasteninhalt". Bei zu wenig Inhalt schiebt's Dir die Randgrafiken übereinander, bei zu wenig Inhalt gibt's Lücken.
Ciao, Jürgen
Servus!
Danke nochmal für den Tipp! Wenn man noch eine width-Angabe macht, funktioniert's jetzt reibungslos. (Warum, kann ich auch nicht sagen.)
BTW: Bist Du sicher, diesen Weg verwenden zu wollen? Es gab Probleme bei zu viel oder zu wenig "Kasteninhalt". Bei zu wenig Inhalt schiebt's Dir die Randgrafiken übereinander, bei zu wenig Inhalt gibt's Lücken.
Das ist vollkommen richtig, aber es sieht eben gut aus und weiß keine Alternative wie ich es anders machen kann.
Ciao, Matthias