![]() |
| | LinkBack | Themen-Optionen | Thema bewerten | Ansicht |
|
#1
| |||
| |||
Hallo liebes Forum! Ich bin ein Typo3-Neuling, und habe folgendes Problem: Ich habe entsprechend eines Tutorials eine HTML/CSS-Vorlage mit einer Box mit runden Ecken angelegt. Funktoniert soweit auch... Wenn ich die Vorlage jetzt aber in Typo3 verwende, dann verrutschen einige Ecken/Kanten um 1-2px. Woran könnte das denn liegen? Ich konnte leider trotz langer Recherche und mehrfachem Ausprobieren keine Lösung finden. So sieht der Code aus: HTML-Code: <body> <!-- ###DOKUMENT### Start --> <div class="uedge"> <div class="redge"> <div class="bedge"> <div class="ledge"> <div class="ulcorner"> <div class="urcorner"> <div class="blcorner"> <div class="brcorner"> <div class="innercontent"> <p>Content of the box goes here.</p> <p>The box can be of any width and height. The width of this one is 40% of its containing block.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- ###DOKUMENT### Stop --> </body> HTML-Code: .uedge {
min-width: 832px;
background-image: url(../img/layout/nn.gif);
background-position: top right;
background-repeat: repeat-x;
}
.redge {
background-image: url(../img/layout/ee.gif);
background-position: top right;
background-repeat: repeat-y;
}
.bedge {
background-image: url(../img/layout/ss.gif);
background-position: bottom left;
background-repeat: repeat-x;
}
.ledge {
background-image: url(../img/layout/ww.gif);
background-position: top left;
background-repeat: repeat-y;
}
.ulcorner {
background-image: url(../img/layout/nw.gif);
background-position: top left;
background-repeat: no-repeat;
}
.urcorner {
background-image: url(../img/layout/ne.gif);
background-position: top right;
background-repeat: no-repeat;
}
.blcorner {
background-image: url(../img/layout/sw.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
.brcorner {
background-image: url(../img/layout/se.gif);
background-position: bottom right;
background-repeat: no-repeat;
padding: 15px 30px 30px 15px;
}
.innercontent {
width: 100%; Gerald |
|
#2
| |||
| |||
| puh... sehr unsauberer HTML-Code mit "DIV-eritis", es gibt mittlerweile andere Konzepte, um runde Ecken zu erzeugen, dann tust du dich auch leichter bei evtl. Problemen in versch. Browsern oder beim Resize des Browserfensters... |
|
#3
| |||
| |||
| aha, wie gesagt, ich hab das aus einem Tutorial übernommen... Was wären denn die anderen Möglichkeiten, von denen Du sprichst? Hättest Du evtl. nen Link oder so? Danke GEald |
|
#4
| |||
| |||
| Wie wärs mit dem hier ? 25 Techniken für runde Ecken via CSS |
|
#5
| |||
| |||
| Hallo nochmal, also ich hab mal noch ein paar andere Tutorials ausprobiert, und dabei ist mir aufgefallen, dass die oben genannte Verschiebung zwischen den einzelnen Grafiken nur im Firefox 3 auftaucht, und auch nur, wenn ich eine Grafik mit "repeat" wiederholen lasse. Scheint also ein browserspezifisches Problem zu sein, daß ich aber nicht beim testen der html Seite auftritt, denn die rohen html/css Seiten hab ich auch mit anderen Browsern getestet. Das Problem tritt ausschließlch bei der durch Typo3 generierten Seite auf, die ich nur im FF3 angeschaut hab ![]() Naja, ich habe das Problem umgangen, indem ich keine Grafiken wiederhole. Ist zwar nicht so elegant, aber so viel Content kommt eh nicht auf die Seite. Falls aber jemand eine Idee hat, wie sich das Problem schöner lösen lässt: Immer her damit! Gruß Gerald |
![]() |
| Lesezeichen |
| Themen-Optionen | |
| Ansicht | Thema bewerten |
| |
Ähnliche Themen | ||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| GIFBUILDER: Bild + runde Ecken + Schlagschatten | pedda | TYPO3 4.x Fragen und Probleme | 1 | 16.11.08 16:51 |
| Abgerundete Ecken mit css | Würmchen | HTML & CSS | 3 | 19.02.08 16:10 |
| Verrutschen des gesamten Contents bei bestimmten Links | Isabell | HTML & CSS | 0 | 04.02.08 07:56 |
| fancycorners - Runde Ecken | digitalfreak | Alle anderen Extensions | 5 | 05.12.07 14:47 |
| Runde Ecken mit Bild | Reimemonster | TYPO3 4.x Fragen und Probleme | 6 | 17.08.07 10:36 |