CSS Hilfe

[mschoening]

Hi,
ich brauche ein wenig Hilfe bei einer CSS Lösung. Naja eher Anregungen !

Ich will folgendes Bild umsetzen:


Jetzt habe ich aber unterschiedliche Möglichkeiten wie ich das umsetzen könnte. Generell werde ich die hinteren grauen Boxen mit den abgerundeten Ecken als .class auf der ganzen Seite verfügbar machen:

.section {
	background: url(background.jpg);
	padding: 10px;
	etc.
}

Meine Frage ist jetzt welcher der beiden Ansätze besser ist:

A) Die Box in 3 Slices teilen und dementsprechen das Markup aufblähen.

<div class="section_top">
	<div class="section_bottom">
		<div class="section_content"></div>
	</div>
</div>

B) Die Box in 2 Slices teilen und dementsprechen die Bildgröße einer der beiden Slices stark vergrößern.

<div class="section_top">
	<div class="section_bottom section_content"></div>
</div>

C) Mit jQuery (wird sowieso geladen) das Markup automatisch durch .append ergänzen.

<div class="section_content"></div>

Thanks,
Max

 

[mschoening]

So ich habe jetzt alle Varianten getestet (auf Performance) und am besten schneidet folgende Variante ab:

CSS

	.section_top {
		background: url(../images/section_top_bg.gif) no-repeat;
		height: 5px;
	}
	
	.section_middle {
		background: url(../images/section_middle_bg.gif) repeat-y;
		padding: 5px 10px;
	}
	
	.section_bottom {
		background: url(../images/section_bottom_bg.gif) no-repeat;
		height: 5px;
	}

HTML

	<div id="header/navigation/content">
		<div class="section_top"></div>
		
		<div class="section_middle">
			Hello World
		</div>
		
		<div class="section_bottom"></div>
	</div>

 

[MasterofDistres]

Benutze die 3-teilige Variante eigentlich auch immer, weil man sehr flexibel mit der Länge ist und zudem mit geringen Datei(größen) auskommt.

 

[mschoening]

Ich hänge hier gleich noch mal etwas drann: wieso ist unter einem <input type="image" /> immer ein kleiner Abstand (wie ein margin-bottom)? Das gleich gilt für inline <img />.

Thanks,
Max

 

[mschoening]

Gelöst! Ich werde das Resultat die Tage posten!

 

[Bajuware]

hm, ich hätte das anders gemacht:

<div id="site_hodling">
<!-- Start Container top -->
<div class="container_top">
<div class="container_cont_toprow">
<div class="container_cont_edge_l"></div>
<div class="container_cont_edge_r"></div></div>
<div class="container_cont_inner">Hier steht der Inhalt</div>
<div class="container_cont_botrow">
<div class="container_cont_edge_l bottom"></div>
<div class="container_cont_edge_r bottom"></div></div>
</div>
<!-- Start Container middle -->
<div class="container_cont_toprow">
<div class="container_cont_edge_l"></div>
<div class="container_cont_edge_r"></div></div>
<div class="container_cont_inner">Hier steht der Inhalt</div>
<div class="container_cont_botrow">
<div class="container_cont_edge_l bottom"></div>
<div class="container_cont_edge_r bottom"></div></div>
</div>
<!-- Start Content Container -->
<div class="container_content">
<div class="container_cont_toprow">
<div class="container_cont_edge_l"></div>
<div class="container_cont_edge_r"></div></div>
<div class="container_cont_inner">Hier steht der Inhalt</div>
<div class="container_cont_botrow">
<div class="container_cont_edge_l bottom"></div>
<div class="container_cont_edge_r bottom"></div></div>
</div>


.container_cont_botrow/toprow hat ein repeat-x Hintergrundbild von 1px x 10px
.container_cont_edge_l/r hat die Ecken als 10x10px grafik
.bottom verschiebt die Hintergrund-Grafik der Ecken auf 10 0

Das wäre die schnellste und professionellste Lösung.
1 Grafik für die Ecken, jeweils nur mit background-position: verschieben
1 Grafik für die Strecken zwischen den Ecken, repeat-x und background-position
Noch kleiner gehts kaum.

Das was du mit 2 oder 3 Maxi Grafiken reinhaust, das kann ich mit der alternative
High Quality darstellen und hab zugleich noch weniger CSS Angaben, einzig und allein
das <div>-Gerüst ist etwas umfangreicher, was aber anhand von <!-- Comment --> auch kein Problem darstellen sollte. Das wichtigste aber die Boxen sind so flexibel, vertikal und horizontal. Und auf unterseiten je nach bedarf mit den gleichen CSS Regeln, mit varriierendem Inhalt anzuzeigen und einzusetzen.

 

[mschoening]

Deine Lösung ist sehr unpraktisch da das Markup 10 mal auf einer Seite vorkommen könnte ! Das CSS aber nur einmal und die Bilder sind klein genug! Trotzdem danke!

 

[Bajuware]

Deine Lösung ist sehr unpraktisch da das Markup 10 mal auf einer Seite vorkommen könnte ! Das CSS aber nur einmal und die Bilder sind klein genug! Trotzdem danke!

lol, alles klar ^^
Wenn du meinst. Ich bin irgendwie der Auffassung das Boxen mit Runden Ecken global so gestaltet werden. Aber bitte - tausende von Profis können sich natürlich auch irren. Und was ist deiner Meinung nach das "Markup". Die Container ? Roger, Erde!
Kommt es mir nur so vor, oder willst du dir eigentlich gar nicht helfen lassen, weil du eh
alles und überall besser weißt ?

 

[mschoening]

Hi,
oh da kann aber einer keine Kritik vertragen. Nein war wirklich nicht irgendwie harsch gemeint nur ich habe noch mit Freunden über eine Lösung diskutiert und wir sind zu dem Schluß gekommen, dass der kleinste Aufwand entsteht wenn man das Markup so kompakt wie möglich hält weil ich von den "containern" eben einige auf der Seit verwenden werde. Insofern steht die Ladezeit in keiner Relation zu dem "maintenance nightmare" was man sich einfängt wenn man 7 div's lädt.

Deine Variante ist natürlich super weil man die Box sowohl im Horizontalen als auch im Vertikalen expandieren kann aber in diesem Fall ist ja nur die Höhe wichtig. Die Breite ist fix.

Ich entschuldige mich noch mal wenn irgendwie etwas unhöflich rüber kam.

P.S: Das meinte ich mit Markup.
P.P.S: Ich denke die "Profis" werden darüber genauso diskutieren wie wir.

P.P.S:

Kommt es mir nur so vor, oder willst du dir eigentlich gar nicht helfen lassen, weil du eh
alles und überall besser weißt ?

Das wollte ich nicht das das so rüber kommt aber wenn ich hier ins Forum schreibe, schreibe ich auch gleichzeitig in anderen Foren und frage Freunde nach Lösungen und Anregungen. Wenn ich dann hier die Lösung (naja was ich am besten halte) poste heißt das nicht, dass ich die Lösung eh schon wusste sondern das ich woanders etwas dazugelernt habe und mir denke, dass andere Leute bei AT bestimmt auch einen Lösungsansatz haben wollen!

 

[Dinofelis]

Ich bin irgendwie der Auffassung das Boxen mit Runden Ecken global so gestaltet werden.

Könntest du vielleicht mal nebenbei die Adresse deiner gehosteten Webseiten hier posten? Ich würde gerne nachschauen, welche Radien so eine gerundete Boxenecke allgemein zu haben hat.