1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Hilfe

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von mschoening, 26.10.08.

  1. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    ich brauche ein wenig Hilfe bei einer CSS Lösung. Naja eher Anregungen :D!

    Ich will folgendes Bild umsetzen:
    [​IMG]

    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:

    Code:
    .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.

    Code:
    <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.

    Code:
    <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.

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

    Thanks,
    Max
     
  2. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    So ich habe jetzt alle Varianten getestet (auf Performance) und am besten schneidet folgende Variante ab:

    CSS
    Code:
    	.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

    Code:
    	<div id="header/navigation/content">
    		<div class="section_top"></div>
    		
    		<div class="section_middle">
    			Hello World
    		</div>
    		
    		<div class="section_bottom"></div>
    	</div>
    
     
  3. MasterofDistres

    MasterofDistres Kleiner Weinapfel

    Dabei seit:
    07.12.06
    Beiträge:
    1.139
    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.
     
  4. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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
     
  5. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Gelöst! Ich werde das Resultat die Tage posten!
     
  6. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    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.
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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!
     
  8. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    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 ?
     
  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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:
    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!
     
    #9 mschoening, 28.10.08
    Zuletzt bearbeitet: 28.10.08
  10. Dinofelis

    Dinofelis Leipziger Reinette

    Dabei seit:
    03.02.08
    Beiträge:
    1.789
    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.
     

Diese Seite empfehlen