Antwort
 
LinkBack Themen-Optionen Thema bewerten Ansicht
  #1  
Alt 16.07.08, 15:45
Forum Zuschauer
 
Registriert seit: 16.07.08
Beiträge: 3

Runde Ecken verrutschen!


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>
Die CSS:

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%;
Vielen Dank für jedwede Hilfe!!

Gerald
Miniaturansicht angehängter Grafiken
runde-ecken-verrutschen-richtig.png   runde-ecken-verrutschen-falsch.png  

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Wong this Post!Spurl this Post!Reddit! Diesen Post bei linksilo.de bookmarken!
Mit Zitat antworten
  #2  
Alt 16.07.08, 15:49
Forum Stammgast
 
Registriert seit: 21.07.06
Alter: 34
Beiträge: 312

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...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Wong this Post!Spurl this Post!Reddit! Diesen Post bei linksilo.de bookmarken!
Mit Zitat antworten
  #3  
Alt 16.07.08, 15:54
Forum Zuschauer
 
Registriert seit: 16.07.08
Beiträge: 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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Wong this Post!Spurl this Post!Reddit! Diesen Post bei linksilo.de bookmarken!
Mit Zitat antworten
  #4  
Alt 16.07.08, 15:56
Forum Stammgast
 
Registriert seit: 21.07.06
Alter: 34
Beiträge: 312

Wie wärs mit dem hier ? 25 Techniken für runde Ecken via CSS
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Wong this Post!Spurl this Post!Reddit! Diesen Post bei linksilo.de bookmarken!
Mit Zitat antworten
  #5  
Alt 18.07.08, 21:45
Forum Zuschauer
 
Registriert seit: 16.07.08
Beiträge: 3

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Wong this Post!Spurl this Post!Reddit! Diesen Post bei linksilo.de bookmarken!
Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht Thema bewerten
Thema bewerten:

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 an


Ä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


Alle Zeitangaben in WEZ +1. Es ist jetzt 17:26 Uhr.


Powered by vBulletin® Version 3.7.3 (Deutsch)
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.1.0