Ecken abrunden

[4seven]

Semantischer Code

super vortrag

[Boecki91]

ein 1000x100 Pixel Bild ist ja riesig, vom Speicher her, 100.000 Bildpunkte, bei 1 Byte (256 Farben) wären das 100KB und das nur für diese Ecken (Komprimierte Formate könnten aufgrund der Einfachheit des Bildes noch sehr viel Rausholen, aber dennoch), zusätzlich noch den nachteil des vollkommen unflexiblen Designs, ich hätte Lücken am Rand, andere müssten Scrollen, vor allem seidem Sidebars und angedockte IMs im Trend sind.

[P7BB]

Keine Sorge, das passt schon
und Lücken gibt es eben rechts und links, also die homepage ist schön zentral...
Das mit dem Scrollen lässt sich nicht vermeiden, dass muss man sowieso, weil die Inhalte meistens mehr als eine Seite beanspruchen... Naja ich kann bei Gelegenheit vllt mal ein Bild hochladen und hier zeigen...

Ich gebe zu, es ist nicht die beste Lösung aber ich finde es ganz ok.

[Boecki91]

Ja Rauf runter ist einfach aber links recht ist echt blöd, das geht mit normalen Rädchen nicht.

[P7BB]

Ach so war das gemeint... Naja, ich setze mal vorraus, dass jeder eine Auflösung von mindestens 1024 x irgendwas hat... Notfalls kann man ja auch (zumindest in Firefox) Strg und - drücken, dann wird die Seite ja verkleinert.
Ich versteh ja das Prinzip, wie man die Ecken so abrunden kann, aber ich will eben nur den Rand in einer bestimmten farbe haben und den inhalt selbst einfach weiß. wenn ich einfach das ganze blau haben wollte, und dann nur abgerundete ecken haben will, muss ich nicht lange nachdenken...

Edit: Ich habe es nun auch verstanden, wie das ganze mit divs funktioniert, aber das problem bei absolut positionierten divs ist ja, dass wenn z.b. ein teil der homepage, der weiter oben ist, länger sein könnte, als geplant und dann lieg das nächste div ja schon dadrüber... also müsste sich das untere div auf das dadrüber beziehen, aber wie? Wenn es geht ein kleines Bsp...

[Boecki91]

Nimmste phpBB3 prosilver als Vorbild:
HTML:

Code: Alles auswählen

<div class="post bg2 online" id="p1068781">
		<div class="inner"><span class="corners-top"><span/></span>
Ich bin eine Coole abgerundete Box, ich bin so cool weil ich rund bin :D
		<span class="corners-bottom"><span/></span></div>
	</div>

Klasse corners-top:

Code: Alles auswählen

 ....loading....
 
.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {style.ph...2&lang=de (Linie 416)
margin:0 -10px;
}
span.corners-top {style.ph...2&lang=de (Linie 2958)
background-image:url(./styles/phpBBde/theme/images/corners_left.png);
}
span.corners-top {style.ph...2&lang=de (Linie 389)
background-image:none;
background-position:0 0;
margin:0 -5px;
}
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {style.ph...2&lang=de (Linie 381)
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
* {style.ph...2&lang=de (Linie 12)
margin:0;
padding:0;
}
Geerbt vonbody#phpbb.section-viewtopic
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
body {style.ph...2&lang=de (Linie 25)
color:#828282;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:10px;
}
Geerbt vonhtml
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
html {style.ph...2&lang=de (Linie 18)
font-size:100%;
}

Klasse corners-top für alle unter span:

Code: Alles auswählen

 ....loading....
6 x 12
span.corners-top span {style.ph...2&lang=de (Linie 2962)
background-image:url(./styles/phpBBde/theme/images/corners_right.png);
}
span.corners-top span {style.ph...2&lang=de (Linie 395)
background-image:none;
background-position:100% 0;
}
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {style.ph...2&lang=de (Linie 381)
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
* {style.ph...2&lang=de (Linie 12)
margin:0;
padding:0;
}
Geerbt vonspan.corners-top
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {style.ph...2&lang=de (Linie 381)
font-size:1px;
line-height:1px;
}
Geerbt vonbody#phpbb.section-viewtopic
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
body {style.ph...2&lang=de (Linie 25)
color:#828282;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:10px;
}
Geerbt vonhtml
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
html {style.ph...2&lang=de (Linie 18)
font-size:100%;
}

Klasse corners-bottom:

Code: Alles auswählen

 ....loading....
6 x 12
.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {style.ph...2&lang=de (Linie 416)
margin:0 -10px;
}
span.corners-bottom {style.ph...2&lang=de (Linie 2966)
background-image:url(./styles/phpBBde/theme/images/corners_left.png);
}
span.corners-bottom {style.ph...2&lang=de (Linie 400)
background-image:none;
background-position:0 100%;
clear:both;
margin:0 -5px;
}
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {style.ph...2&lang=de (Linie 381)
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
* {style.ph...2&lang=de (Linie 12)
margin:0;
padding:0;
}
Geerbt vonbody#phpbb.section-viewtopic
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
body {style.ph...2&lang=de (Linie 25)
color:#828282;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:10px;
}
Geerbt vonhtml
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
html {style.ph...2&lang=de (Linie 18)
font-size:100%;
}

Klasse corners-bottom für alle unter span:

Code: Alles auswählen

 ....loading....
6 x 12
span.corners-bottom span {style.ph...2&lang=de (Linie 2970)
background-image:url(./styles/phpBBde/theme/images/corners_right.png);
}
span.corners-bottom span {style.ph...2&lang=de (Linie 407)
background-image:none;
background-position:100% 100%;
}
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {style.ph...2&lang=de (Linie 381)
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
* {style.ph...2&lang=de (Linie 12)
margin:0;
padding:0;
}
Geerbt vonspan.corners-bottom
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {style.ph...2&lang=de (Linie 381)
font-size:1px;
line-height:1px;
}
Geerbt vonbody#phpbb.section-viewtopic
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
body {style.ph...2&lang=de (Linie 25)
color:#828282;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:10px;
}
Geerbt vonhtml
html, body {style.ph...2&lang=de (Linie 2829)
color:#393A3D;
}
html {style.ph...2&lang=de (Linie 18)
font-size:100%;
}

So die CSS Klassen habe ich nun 1 zu 1 rauskopiert, inklusive Vererbungen die aber ggf. Überschrieben werden. Bei doppelten Eigenschaftszuweisungen zählt (hierbei) der 1. Wert.
Firebug streicht das nichtgültige im übrigen immer raus, und formatiert das ganze schöner. Die Dateiangaben stimmen aufgrund des zusammengesetzen CSS nicht.

[P7BB]

Wow, danke für die ganze Arbeit... Ich hab mir den Code auch angeguckt, aber ich versteh es leider immer noch nicht :'(
Wie wird nun verhindert, dass ein div über das andere einfach rübergeht? Sry, ich bin ein style-technischer anfänger... ich hatte bisher immer nur ein ganz schlichtes design und brauchte bis jetzt nur php und html so wirklich, aber css noch nicht...

[FCM]

Ist ohne Bilder gelöst, rein in CSS.

Code: Alles auswählen

<style type="text/css">

	.box { 
		width: 350px; 
		background: #9BD1FA;
	}

	.box h1, .box p {
		margin: 0px 10px;
	}

	.box h1 {
		color: #ffffff; 
	}

	.box .top, .box .bottom {
		display: block;
		background: #FFFFFF;
	}

	.box .top strong, .box .bottom strong {
		display: block;
		height: 1px; 
		overflow: hidden; 
		background: #9BD1FA;
	}

	.box .n1 {
		margin: 0px 5px;
	}

	.box .n2 {
		margin: 0px 3px;
	}

	.box .n3 {
		margin: 0px 2px;
	}

	.box .top .n4, .box .bottom .n4 {
		margin: 0px 1px;
		height: 2px;
	}

</style>

<div class="box">
	<strong class="top">
		<strong class="n1"></strong>
		<strong class="n2"></strong>
		<strong class="n3"></strong>
		<strong class="n4"></strong>
	</strong>
	
	<h1>Lorem ipsum dolor</h1>
	
	<p>Lorem ipsum dolor sit amet ...</p>
	
	<strong class="bottom">
		<strong class="n4"></strong>
		<strong class="n3"></strong>
		<strong class="n2"></strong>
		<strong class="n1"></strong>
	</strong>
</div>

[P7BB]

Ich verstehs nicht... :'(

wenn ich die Ecken einfach nur abrunden will, ist das kein problem, das bekomm ich ja hin, aber wenn ich noch eine dünne linie (z.b. bei einem weißem feld eine dünne blaue linie) drumherum machen will, weiß ich überhaupt nicht, wie ich anfangen soll...
Ich kann diese linie bei den abgerrundeten ecken ja mit einbauen, weil die ecken ja nur ein bild sind, aber wie kann ich jetz noch überall am restlichem rand diese linie machen?

[Boecki91]

Border?

Musst allerdings noch etwas Testen wie du die ecken wieder aussparen kannst, vielleicht dem span auch einen border geben und den in Hintergrundfarbe zu gestallten.