Div-Suppenkonstrukte oder design-images..

[Mel]

Hallo liebes Forum,

ich bräuchte mal fachkundige Meinungen + Ansichten.
Es geht um die Umsetzung eines Layoutes, das einige runde Ecken enthält.
Das Argument "Am besten gleich darauf verzichten und lieber ein einfacheres klares Layout nehmen" gefällt mir persönlich ganz gut aber ich kann es in diesem Fall nicht beeinflussen (ausserdem sieht es schon sehr schick aus ;))

Bei der Umsetzung kann ich mich gerade schwer entscheiden: sollten diese  abgerundeten Ecken besser rein mit CSS gelöst werden, also als Hintergrundbilder? Favorisiere ich. Aber die Folge sind div-suppen, bzw. schon sehr viele div-konstrukte. Vor allem wenn das layout schön flexibel bleiben soll und sowohl in die Breite als auch Höhe mitwächst.

Der andere Weg wäre diese gifs einfach in den quelltext einzubinden. Weniger divs, weniger css. Aber ich sträube mich irgendwie dagegen vom inhalt her bedeutungslose designbilder in den Quelltext zu binden, entspricht ja auch nicht dem Gedanken Strikte Trennung von Layout und Inhalt oder??

Dass man mit CSS auch runde Ecken erzeugen kann ist mir bekannt aber in diesem Fall sind die IE-User mal wieder grösste Zielgruppe deshalb werde ich es wohl mit Bildern lösen müssen, ist nur die Frage was ist besser (oder schlimmer). Was meint ihr?

Freue mich auf Eure Antworten,
vg melanie

[MudGuard]

Hi,

Bei der Umsetzung kann ich mich gerade schwer entscheiden: sollten diese  abgerundeten Ecken besser rein mit CSS gelöst werden, also als Hintergrundbilder?

Rein mit CSS. Aber deswegen nicht notwendigerweise als Hintergrundbilder.
Etwas Geduld haben, bis sich CSS3 weiter durchsetzt.
Da kommen so schöne Dinge wie border-radius *) und die Möglichkeit, beliebig viele Hintergrundbilder pro Element anzugeben ...

*) als -moz-border-radius schon seit einiger Zeit in Geckos verfügbar

Aber die Folge sind div-suppen, bzw. schon sehr viele div-konstrukte. Vor allem wenn das layout schön flexibel bleiben soll und sowohl in die Breite als auch Höhe mitwächst.

Wenn es sofort sein muß, geht es nur mit zusätzlichen Elementen.

Der andere Weg wäre diese gifs einfach in den quelltext einzubinden. Weniger divs, weniger css.

Hm. Wo siehst Du da den entscheidenden Unterschied?
Du hast in beiden Fällen zusätzliche Elemente im Dokument, die da eigentlich nichts zu suchen haben.

Dass man mit CSS auch runde Ecken erzeugen kann ist mir bekannt aber in diesem Fall sind die IE-User mal wieder grösste Zielgruppe deshalb werde ich es wohl mit Bildern lösen müssen, ist nur die Frage was ist besser (oder schlimmer). Was meint ihr?

Wie wichtig sind die runden Ecken? Sind die wirklich so entscheidend?

cu,
Andreas

[Gunther]

Hi Melanie und Andreas,

Der andere Weg wäre diese gifs einfach in den quelltext einzubinden. Weniger divs, weniger css.

Hm. Wo siehst Du da den entscheidenden Unterschied?

in der "sauberen" Skalierbarkeit

Du hast in beiden Fällen zusätzliche Elemente im Dokument, die da eigentlich nichts zu suchen haben.

das Problem bleibt natürlich bestehen :-(

Dass man mit CSS auch runde Ecken erzeugen kann ist mir bekannt aber in diesem Fall sind die IE-User mal wieder grösste Zielgruppe deshalb werde ich es wohl mit Bildern lösen müssen, ist nur die Frage was ist besser (oder schlimmer). Was meint ihr?

Ich habe mich vor einiger Zeit auch mal mit diesem Thema beschäftigt. Zu sehen auf der oben angegebenen Seite.

Die Grafiken werden per PHP Skript erzeugt (bedingt halt entsprechenden Webserver). Wenn's interessiert grabe ich mal in meiner Sammlung.

Gruß Gunther

[Mel]

Hallo Gunther!

Saubere Skalierbarkeit? Hmm das kann ich nicht nachvollziehen!

Mich interessiert Deine php-Technik brennend *lechz*
;))

vg melanie

[Gunther]

Hallo Melanie!

Saubere Skalierbarkeit? Hmm das kann ich nicht nachvollziehen!

Du sprachst ja eingangs von flexiblem Layout. Unterstellt, dass sich nicht nur die Schriftgröße vom User skalieren lässt, sondern auch deine Box (mit den abgerundeten Ecken), dann ist eine entsprechende CSS-Lösung 'sauberer' als vom Browser skalierte Grafiken.

Mich interessiert Deine php-Technik brennend *lechz*

Wie du siehst ist das Script nicht von mir (meine PHP Kenntnisse sind auch nicht sehr ausgeprägt).

  
<?  
//  The following script is hereby released under the Modified BSD license (http://www.opensource.org/licenses/bsd-license.php)  
//  Copyright 2004 Raefer Gabriel  
//  
//  Script arguments:  
//  Corner Name :              cn (one of: tl, bl, tr, br)  
//  Height      :              h (height for elliptical arc)  
//  Width       :              w (width for elliptical arc)  
//  Size        :              s (alternative parameter for circular arc)  
//  Border      :              b (thickness of optional border line)  
//  Border color:              cb (ignored unless b!=0)  
//  Inner color :              ci  
//  Outer color :              co  
//  
//  Usage:  
//  rounded.php?cn=tl&s=10&ci=ffffff&co=000077 (top left 10x10 image, white inside, light blue outside)  
//  rounded.php?cn=tr&h=20&w=20&ci=ffffff&co=000077 (top right 10x20 elliptical corner image, white inside, light blue outside)  
  
//  See http://hardgrok.org/blog/item/20/ for more information on use, or see the included examples.  
  
//  This variable controls the caching mechanism.  It's off by default for ease of installation, but I highly  
//  recommend using it unless you are just testing things out or doing active development work on this script.  
//  
//  You will need to create the directory 'cache' under the script install directory (usually your web server  
//  root) and make sure the user this script runs as has write access to it in order for caching to work.  
  
$caching = true;  
$cachedir = 'cache/';  
  
  
/**  
 * Helper functions  
 **/  
  
// hex to rgb color translation  
function hex2rgb($hex)  
{  
    for($i=0; $i<3; $i++)  
    {  
        $temp = substr($hex,2*$i,2);  
        $rgb[$i] = 16 * hexdec(substr($temp,0,1)) + hexdec(substr($temp,1,1));  
    }  
    return $rgb;  
}  
  
//output image from cached file  
function outputfromfile($filename)  
{  
 header("Content-Type: image/gif");  
 header("Expires: ".gmdate("D, d M Y H:i:s",time()+24*60*60));  
 include($filename);  
}  
  
/**  
 * Script body  
 **/  
  
$mangledname = $cn.'_'.$s.'_'.$h.'_'.$w.'_'.$b.'_'.$cb.'_'.$ci.'_'.$co.'.gif';  
$cachefile = $cachedir.$mangledname;  
  
//first check to see if we've already generated this file.  If so, just return it  
if ($caching && file_exists($cachefile)) {  
 outputfromfile($cachefile);  
 exit();  
}  
  
// set default values for size and color  
if ( !$s and !$h )  
  $s=10;  
if ( !$ci )  
  $ci="ffffff";  
if ( !$co )  
  $co="000000";  
  
//pick larger of inner and outer radius  
if ($h==0) {  
  $h=$w=$s;  
} else if ($h>$w) {  
  $s = $h;  
} else {  
  $s = $w;  
}  
  
//convert colors to rgb  
$rgbinner = hex2rgb($ci);  
$rgbouter = hex2rgb($co);  
$rgbborder = hex2rgb($cb);  
  
//we want to render the image at twice the specified size then downsample later to antialias  
$width = $w*2;  
$height = $h*2;  
$bthickness = $b*2;  
  
if ( $cn=="tl" ) {  
  $center_x = $width;  
  $center_y = $height;  
  $arc_start = 180;  
  $arc_end = 270;  
} else if ( $cn=="tr" ) {  
  $center_x = -2;  
  $center_y = $height;  
  $arc_start = 270;  
  $arc_end = 360;  
} else if ( $cn=="bl" ) {  
  $center_x = $width;  
  $center_y = -1;  
  $arc_start = 90;  
  $arc_end = 0;  
} else if ( $cn=="br" ) {  
  $center_x = -2;  
  $center_y = -1;  
  $arc_start = 180;  
  $arc_end = 90;  
}  
  
$image_scratch = imagecreatetruecolor($width, $height);  
//imageantialias function seems broken in PHP4.3.8  
//imageantialias($im,TRUE);  
$inner_color = imagecolorallocate($image_scratch, $rgbinner[0], $rgbinner[1], $rgbinner[2]);  
$outer_color = imagecolorallocate($image_scratch, $rgbouter[0], $rgbouter[1], $rgbouter[2]);  
$border_color = imagecolorallocate($image_scratch, $rgbborder[0], $rgbborder[1], $rgbborder[2]);  
  
//fill in background color  
imagefill($image_scratch, 0, 0, $outer_color);  
  
  
//first deal with border case  
if ($b!=0) {  
  //draw filled arc for border  
  imagefilledarc($image_scratch, $center_x, $center_y, $width*2, $height*2, $arc_start, $arc_end, $border_color, IMG_ARC_PIE);  
  //draw smaller filled arc for inner region  
  imagefilledarc($image_scratch, $center_x, $center_y, $width*2-2*$bthickness+1, $height*2-2*$bthickness+1, $arc_start, $arc_end, $inner_color, IMG_ARC_PIE);  
} else {  
  //plain, non-bordered corner  
  //draw filled arc  
  imagefilledarc($image_scratch, $center_x, $center_y, $width*2, $height*2, $arc_start, $arc_end, $inner_color, IMG_ARC_PIE);  
}  
  
//resample image down to antialias  
$image_dest = imagecreatetruecolor($w, $h);  
//why size-1 here?  I'm not exactly sure, but it works  
imagecopyresampled($image_dest, $image_scratch, 0, 0, 0, 0, $w, $h, $width-1, $height-1);  
  
// first setting content-type and caching header to 1 day expiration.  
// this needs to be done before we do any output, even buffered output  
header("Content-Type: image/gif");  
header("Expires: ".gmdate("D, d M Y H:i:s",time()+24*60*60));  
//alternative approach to control caching, doesn't seem to be necessary though  
//header("Cache-Control : max-age = ".str(24*60*60));  
//header("Content-Disposition: inline; filename=".$cn.$h.$w.$ci.$co.".gif");  
  
  
//first, save a copy of the generated image if caching mode is set  
if ($caching) {  
 // Start buffering the output  
 ob_start();  
  
 // Now output the image  
 imagegif($image_dest);  
  
 // Fetch output buffer  
 $buffer = ob_get_contents();  
  
 // Stop buffering and display the buffer  
 ob_end_flush();  
  
 // Write a cache file from the contents  
 $fp = fopen($cachefile, 'wb');  
 fwrite($fp, $buffer);  
 fclose($fp);  
}  
  
//now send the gif to the browser  
imagegif($image_dest);  
  
  
//can also output jpegs if you prefer, but I don't recommend it (quality is much worse)  
imagejpeg($image_dest,"",95);  
  
//clean up images  
imagedestroy($image_scratch);  
imagedestroy($image_dest);  
  
?>  
  

Die Einbindung kann dann bspw. so erfolgen (Pfadangaben sind natürlich entsprechend anzupassen):

  
@charset "iso-8859-1";  
  
  
.rc_container {  
 background: #30689B;  
 margin: 0 auto;  
 padding: 0px;  
}  
  
.rc_contents {  
 margin: 0 0 0 5px;  
 padding: 0;  
 background: #30689B;  
}  
  
.rc_top {  
 background: transparent url(../rounded.php?cn=tr&s=10&ci=30689B&co=E5E5E5) no-repeat top right;  
}  
  
.rc_top div {  
 background: transparent url(../rounded.php?cn=tl&s=10&ci=30689B&co=E5E5E5) no-repeat top left;  
}  
  
.rc_bot {  
 background: transparent url(../rounded.php?cn=br&s=10&cb=0044AA&ci=30689B&co=E5E5E5) no-repeat bottom right;  
}  
  
.rc_bot div {  
 background: transparent url(../rounded.php?cn=bl&s=10&cb=0044AA&ci=30689B&co=E5E5E5) no-repeat bottom left;  
}  
  
.rc_top div, .rc_top, .rc_bot div, .rc_bot {  
 width: 100%;  
 height: 10px;  
 font-size: 1px;  
}  
h4.rc_contents {  
 margin: 0 0 0 0;  
}  
  
div.rc_contents p {  
 padding: 0 5px;  
}  
div.rc_contents ul {  
 margin: -5px 0 0 1.5em;  
 padding: 0;  
}  
* html div.rc_contents ul {  
 padding: 0 0 0 20px;  
}  

Gruß Gunther

[Mel]

Hallo Gunther,

achso da hatte ich dich falsch verstanden, ja css-technisch ist die skalierbarkeit besser da hast Du recht (1 Meinung ;)

Vielen Dank für das Skript. Werde ich mal testen-- man lernt nie aus schön ist das ;)

vg melanie

[Mel]

Hallo  Andreas,

danke für Deine Antwort!
Ja ich denke auch dass ich es so mache wie Du vorgeschlagen hast. Das mit den Bildern im Quelltext: ich sehe da keinen Vorteil. Ich habe hier nur die Diskussion mit Kollegen, die das bevorzugen würden.
Es ist so eine Frage, inhaltsleere Elemente oder ein image einbinden. Ich hab das mal hier grob überschlagen udn bin zum Ergebnis gekommen dass das CSS sich etwas reduzieren würde. Aber ich werde es troztdem nicht machen, sondern rein mit CSS.

Wie wichtig die Ecken sind?Wer kann das sagen...ich muss mich mit dem Designer eben arrangieren. Aber ich möchte auch nciht jedesmal sagen NEIN DAS GEHT NICHT, denn aus ästhetischer Sicht die abgerundete Ecken schön. Ein subjektives Statement sicherlich!

CSS3-- tja ich freu mich drauf!

vg melanie

[Detlef G.]

Hallo Melanie

Bei der Umsetzung kann ich mich gerade schwer entscheiden: sollten diese  abgerundeten Ecken besser rein mit CSS gelöst werden, also als Hintergrundbilder? Favorisiere ich. Aber die Folge sind div-suppen, bzw. schon sehr viele div-konstrukte. Vor allem wenn das layout schön flexibel bleiben soll und sowohl in die Breite als auch Höhe mitwächst.

Leider werden, je nachdem, in welche bzw. in wie viele Richtungen die
Boxen flexibel sein sollen, zusätzliche Elemente benötigt.
Es müssen aber auch nicht immer so viele zusätzliche Divs sein, wie in dem
Artikel: Runde und andere Ecken für skalierbare Boxen.
Die Hintergrundbilder lassen sich oft (zumindest teilweise) auch  Elementen
zuweisen, die auch ohne die runden Ecken verwendet würden.

Der andere Weg wäre diese gifs einfach in den quelltext einzubinden. Weniger divs, weniger css.

Dafür viele Grafiken im Quelltext, die bei einer csslosen Anzeige der
Seite sinnlos in der Gegend herumhängen, die in ansonsten unnötige
Tabellen geschachtelt sind oder/und das Layout starr machen, bei einer
anderen Schriftgröße, einem anderen Zeilenumbruch plötzlich nicht mehr
wirklich zusammenpassen oder/und aufwendig mittels CSS positioniert sind.

Aber ich sträube mich irgendwie dagegen vom inhalt her bedeutungslose designbilder in den Quelltext zu binden, entspricht ja auch nicht dem Gedanken Strikte Trennung von Layout und Inhalt oder??

Auch zusätzliche geschachtelte Elemente, die dann die Hintergrundgrafiken
aufnehmen, entsprechen nicht unbedingt diesem Gedanken, kommen ihm aber
wesentlich näher, als festeingebaute Designgrafiken.
Diese Elemente bilden nicht ein bestimmtes Design sondern bilden den (leider
noch) notwendigen Rahmen um das gewünschte (und bei Bedarf auch ein ganz
anderes) Design umzusetzen.

... Was meint ihr?

Ich würde die Variante mit den Hintergrundbildern vorziehen, dabei aber
anhand der HTML-Struktur genau überlegen, welche der vorhandenen Elemente
ich dafür bereits verwenden kann, und wie viele ich unbedingt zusätzlich
einfügen muss.

Auf Wiederlesen
Detlef

[Hans-PeterRieger]

Hallo Melanie,

ich bastle für eine ganz bestimmte Website seit fragmichnichtwielange an so einem Layout basierend auf hierarchische DIV-Konstrukte. Nachdem bei dieser Website sehr viele Seiten mit sehr unteschiedlichen - teilweise dynamischen Inhalten - aber halt einem sehr ähnlichen Layout gebaut werden sollen, überlasse ich das kochen der DIV-Suppe einigen PHP Funktionen und Server-seitigen Includes. Und ich muss sagen: Das Konzept funktioniert wirklich ausgezeichnet. Man darf sich zwar das generierte HTML im Browser nicht mit vollem Magen ansehen, aber semantisch und syntaktisch ist alles korrekt und der Validator hat auch nichts zu meckern. Fehlersuche durch Interpretation der HTML-Seite ist nahezu ausgeschlossen, dafür ähnelt das modulare Konzept der PHP Konstrukte sehr einer "richtigen" Programmiersprache und man hat entsprechend auch die Möglichkeit Unit- und Integrationstests zu fahren, was der Stabilität und Änderungsfreundlichkeit der Website nur zuträglich ist.
Die Botschaft lautet also: Mut zur eigenen Kreativität, gerne mal was neues ausprobieren und die Expertenmeinung nur mittelschwer gewichten.

Gruß
Hans-Peter

[Mel]

Hallo Hans-Peter,

ganz ehrlich: ich hab fast kein Wort verstanden.. ;(
kann man das in einem klaren einfachen satz zusammenfassen das auch ein dreijähriger versteht? ;)

es klingt nämlich gut...;)

vg melanie

[Hans-PeterRieger]

Hallo Melanie

ganz ehrlich: ich hab fast kein Wort verstanden.. ;(

oh, verzeihung. So war das nicht gemeint. Ich versuch es mal etwas anders. Deine Frage war (in etwa): "Darf ich DIV-Suppen verwenden oder soll ich lieber nach eine alternativen Methode zur Seitengestaltung suchen?". Die übliche Experten-Antwort ist: "DIV sind gut, DIV-Suppe aber böse!". Nachgefragt: "Warum sind DIV-Suppen böse?" und die Antwort dazu: "Weil (a) niemand mehr das entsprechende HTML lesen kann und weil es (b) üble Seiteneffekte mit der CSS-Formatierung geben kann, wenn man einen Fehler macht."

So weit verständlich?

"Gut" ... dachte ich mir ... "Was wäre denn, wenn ich (a) das HTML gar nicht mehr lesen _will_ und (b) ich "Software" statt "Brainware" verwende um die Konsistent meiner Seiten sicherzustellen.

Immer noch verständlich?

Das Ergebnis ist ein ziemlich umfangreicher PHP-Code, der mir (ähnlich wie bei einem komerziellen CMS (Content Management System)) Textbausteine aus einer Datenbank ließt, das gewünschte Seitenlayout ebenfalls aus einer Datenbank ließt (abhängig z. B. vom Namen des Besuchers der Seite, oder der Tageszeit, oder der Mondphase oder was auch immer) und daraus eine HTML-Seite automatisch generiert. "Automatisch" heißt dabei: Es wird ein PHP-Script verwendet, von dem ich weiß, dass es keine Fehler macht. Dabei können bis DIV-Hierarchien bis zu 10 Ebenen entstehen - aber interessiert mich das nicht, weil ich das (individuelle) Seiten-HTML nicht mehr ansehe sondern (schlimmstenfalls, solange noch Fehler vorhanden sind) die (allgemeingültigen) PHP-Scrips.

Ok, ich gebe zu, das ist in drei Sätzen nicht einfach zu beschreiben. Zumal ich damit nicht mal 5% der Funktionalität beschrieben habe.

Kleines Beispiel gefällig (das allerdings auch nicht schlauer macht)?: Quasi jede Seite sieht in etwa wie die folgende "HomePage" aus:

<?php
  // define page specific constants
  $Path2Root     = "../../";
  $FileTitle     = "HomePage";
  $FileName      = "index.php";

require($Path2Root . "Page/prep.inc.php");

// include THIS page main content
  $TimeLeft  = floor((mktime(0, 0, 0, 7, 29, 2005) - time()) / 86400);
 require("Content.inc.php");

$contBox1  = "<div class="cont_ar48 cont_ttop">" . $contText01a . "</div>" .
               "<div class="cont_al48 cont_ttop">" . $contText01b . "</div>";
  $contBox2  = "<div class="cont_ab01 cont_ttop">" . $contText02  . "</div>";
  $contBox3  = "<div class="cont_ac01 cont_ttop">" . $contText03  . "</div>";
  $contBox4  = "<div class="cont_ar30 cont_ttop">" . $contText04a . "</div>" .
               "<div class="cont_al65 cont_ttop">" . $contText04b . "</div>";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<?php require($Path2Page . "head.inc.php");?>
  <body>
    <div class="OuterDivBox" style="width:<?php echo $LefBox?>px; top:0px; left:0px;">
<?php require($Path2Page . "left.inc.php");?>
    </div>
    <div class="OuterDivBox" style="width:<?php echo $BigBox?>px; top:0px; left:<?php echo $LefBox?>px;">
<?php DrawBox("QuadBox", "none",       &$BoxTitle, $BigBox-$MarginLeft, "60",  "left");?>
<?php DrawBox("QuadBox", "none",       &$BoxState, $BigBox-$MarginLeft, "30",  "left");?>

<?php DrawBox("TitleBox", $contHead01, &$contBox1, $SmlBox-$MarginLeft, "170", "left");?>
<?php DrawBox("TitleBox", $contHead02, &$contBox2, $BetBox-$MarginLeft, "170", "left");?>
<?php DrawBox("TitleBox", $contHead03, &$contBox3, $SmlBox-$MarginLeft, "170", "right");?>
<?php DrawBox("TitleBox", $contHead04, &$contBox4, $SmlBox-$MarginLeft, "396", "left");?>
<?php DrawBox("NoBoBox",  "none",      &$BoxBild,  $MedBox-$MarginLeft, "330", "right");?>
<?php DrawBox("QuadBox", "none",       &$BoxState, $MedBox-$MarginLeft, "60",  "right");?>
<?php DrawBox("QuadBox", "none",       &$BoxState, $BigBox-$MarginLeft, "30",  "left");?>
    </div>
  </body>
</html>

Gruß
Hans-Peter

[Mel]

lieber Hans-Peter,

wow danke für die ausführliche Antwort! Das ist wirklich nett. Ein bisschen klarer ist es jetzt auf jeden Fall. Ich denke mal ich werde mich intensiver damit beschäftigen (müssen), gut zu wissen jedenfalls dass es sowas gibt.

vg melanie