XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hintergrund automatisch anpassen (http://xhtmlforum.de/showthread.php?t=57709)

Wenqu 15.07.2009 11:36

Hintergrund automatisch anpassen
 
Liste der Anhänge anzeigen (Anzahl: 4)
Guten Tag,
ich möchte meine Website variabel gestalten... d.h. der Bildschirmauflösung teilweise anpassen...

Bisher sieht es wiefolgt aus:

HTML:
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="header">

</div>

</body>
</html>

CSS:
HTML-Code:


/* CSS Document */

body{
        padding:0;
        margin:0;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        background-color:#EAEDD8;
        color:#6C6C6C;

}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
        margin:0; padding:0;
}

#header{
        background:url(images/header.gif) 0 0 repeat;
        min-width: 720px;
        max-width: 960px;
       
        height:93px;
        margin:0 auto;
        padding:0 5px 0 34px;
}

Im Anhang findet ihr die header.gif... diese wird nicht angepasst was ja logisch ist...

Nun habe ich mir gedacht ich trenn die header.gif in 3 Teile: Linker Rand, Rechter Rand und Background

Wie setze ich das nun im CSS am besten um?

Gruß Klaus

heiko_rs 15.07.2009 12:09

Du brauchst insgesamt 3 verschachtelte Elemente: Das "äußerste" enthält die repeat-Grafik (wg. IE-Performance besser 20px breit), dessen Kindelement den linken Abschluss, und dessen Kindelement wiederum den rechten. Passende Elemente gibt es i.d.R. genug.

Wenqu 15.07.2009 12:37

Kannste mir mal ein Beispiel geben? Ich steh glaub momentan aufem Schlauch.

Gruß Klauis

heiko_rs 15.07.2009 12:42

Das Prinzip ist folgendes: Runde und andere Ecken (Webdesign) | andreas-kalt.de


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023