zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Runde Ecken mit Div´s und Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.03.2006, 15:18
Benutzerbild von unclesam
Realist
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2006
Ort: Lippe
Beiträge: 45
unclesam befindet sich auf einem aufstrebenden Ast
Standard Runde Ecken mit Div´s und Bildern

Hallo,
warum funktioniert mein runde Ecken Layout bloß nicht richtig?
Also wenn man das Explorer-Fenster resized, dann bricht das grüne Text-Div manchmal aus dem Rahmen heraus und zerschiesst des Layout.
Und im Firefox reisst das Grüne Div manchmal sogar noch die Ecke mit.

Hier ist das Übel: http://jugend-pivitsheide.de/rund/index2.html
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.03.2006, 15:17
Benutzerbild von unclesam
Realist
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2006
Ort: Lippe
Beiträge: 45
unclesam befindet sich auf einem aufstrebenden Ast
Standard

so, ich habe jetzt noch eine zweite Lösung der "runde Ecken mittels Div mit Bildern" erstellt.
Hier sind die divs anders verschachtelt, also nicht so wie in Version 1 sondern wie in Version 2. Siehe Anhang.

Was denkt ihr, welche ist die bessere Variante?
Nachteil an der zweiten Variante ist, dass nur fixe Größen funktionieren.
Nachteil an Version 1 ist, dass es nicht richtig funktioniert ;o)

hier als Link zur HTML:

Version 1
Version 2

Getestet hab ich mit FF 1.5, IE6.0, IE 5.0 und Opera8.5.
Version 1: Opera und FF gleiches Ergebnis IE6+5 gleiches Ergebnis. (Siehe vorherigen Eintrag.)
Version 2: In allen Browsern waren es die gleichen Ergebnisse. (Korrekte Anzeige.)
Angehängte Grafiken
Dateityp: gif version1.gif (4,3 KB, 309x aufgerufen)
Dateityp: gif version2.gif (3,8 KB, 308x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.03.2006, 21:46
Neuer Benutzer
neuer user
 
Registriert seit: 18.10.2004
Beiträge: 21
finkenmann befindet sich auf einem aufstrebenden Ast
Standard

Hallo unclesam

Ist zwar schon lange aufm Netz aber sicher noch aktuell. Hab mir den Code net angeschaut, scheint aber zu funzen. Check dieses Tutorial mal aus...

http://www.andreas-kalt.de/webdesign...ls/runde-ecken

Gruss
Pierre
Mit Zitat antworten
  #4 (permalink)  
Alt 20.03.2006, 10:48
Benutzerbild von unclesam
Realist
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2006
Ort: Lippe
Beiträge: 45
unclesam befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Tutorialtipp, allerdings kenn ich das Tut schon und finde die Lösung nicht gerade optimal.

Wenn mein Fenster größer als die Hintergrundgrafik wird, hab ich ein Problem. Die Lösung von Andreas Kalt ist also nur begrenzt dynamisch und außerdem eher "speicherintensiv", da die größen Grafiken geladen werden müssen.

Daher auch mein Versuch einer anderen Lösung.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.03.2006, 16:10
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

Wehe du schreibst mir nochmal eine PM, nur weil dir keiner Antwortet, sowas macht man nicht.

Code:
	body{
	background:#F4F2F2;
	}
	
	#main{
	width:100%;
	min-width:800px;
	float:left;
	}
	#top{
	width:100%;
	height:26px;
	background:url(bilder/rimNG_design2_slices_05.gif) repeat-x;
	}
	
	#top_left{
	width:12px;
	height:26px;
	float:left;
	background:url(bilder/rimNG_design2_slices_04.gif);
	}
	
	#top_right{
	width:15px;
	height:26px;
	float:right;
	background:url(bilder/rimNG_design2_slices_07.gif);
	}
	
	#center{
	background:#D6D8D8 url(bilder/rimNG_design2_slices_49.gif) repeat-y;
	border-left:1px solid #d5d7d8;
        padding:0 0 0 10px;
	}
	#center:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
	}

	#content{
        padding:0 16px 0 0;
        background:url(bilder/rimNG_design2_slices_48.gif) top right repeat-y;
	}

	#bottom{
	width:inherit;
	height:15px;
	background:url(bilder/rimNG_design2_slices_51.gif) repeat-x;
	}
	
	#bottom_left{
	width:11px;
	height:15px;
	float:left;
	background:url(bilder/rimNG_design2_slices_50.gif) no-repeat;
	}
	
	#bottom_right{
	width:16px;
	height:15px;
	float:right;
	background:url(bilder/rimNG_design2_slices_53.gif) no-repeat;
	}
	#center_left,#center_right {
        display:none;
        }
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
  #6 (permalink)  
Alt 20.03.2006, 16:57
Benutzerbild von unclesam
Realist
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2006
Ort: Lippe
Beiträge: 45
unclesam befindet sich auf einem aufstrebenden Ast
Standard

höhöhö, das geht. FETT. Einen Herzlichsten Dank.

Aber was macht das hier?:
Code:
   #center:after {
   content:".";
   display:block;
   clear:both;
   height:0;
   visibility:hidden;
   }
Und im IE funzt der Rand links nicht... gibt es da auch eine Profi-Lösung für?
Mit Zitat antworten
  #7 (permalink)  
Alt 23.03.2006, 12:05
Benutzerbild von unclesam
Realist
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2006
Ort: Lippe
Beiträge: 45
unclesam befindet sich auf einem aufstrebenden Ast
Standard

nochmals die Frage nach dem Rand links im IE. Weiß jemand, woran das liegt?

Mit euer Hilfe hab ich es aber shcon weit geschafft.
Habe nun allerdings noch ein weiteres Problem, nämlich das die Tabs hier
http://jugend-pivitsheide.de/rund/index3_1.html
nicht genau am Inhalt dran sind. Keine Ahnung warum da eine Lücke ist. Kein Padding, kein margin aber trotzdem eine Lücke...
Mit Zitat antworten
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
Nicht erwünschte runde Ecken für select in Safari Holley CSS 7 10.11.2014 17:28
IE - runde Ecken mit Transparenz ohne Grafiken? freshUser CSS 19 17.03.2011 21:55
Runde Ecken mit Hintergrund Phil2812 CSS 0 04.09.2010 18:14
Runde Ecken mit CSS oder Bildern? Cu Chullain CSS 3 16.04.2009 19:18
Runde Box (bzw. runde Ecken) l2107 CSS 3 08.02.2004 04:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:55 Uhr.