Vollbild
Design Iceblue Bildschirmfüllend :
4 Tabellen und 6 Tabellenspalten müssen Ihre Breite mit Prozente-Angabe bekommen.
Iceblue wird dann für alle Bildschirmauflösungen in voller Breite angezeigt.
- hier die 4 Tabellen und 6 Tabellenspalten
- Code einfügen im Feld : "Text über Design"
<style type="text/css">
<!--
/* Iceblue verbreitern */
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 10% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 10% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>
<!--
/* Iceblue verbreitern */
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 10% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 10% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>
Das Design wird nun für alle Bildschirmauflösungen in voller Breite angezeigt.
Von body (Hintergrund hinter Design) sehen Besucher nichts.
Ein Hintergrundbild (für body) wird also nicht gesehen / nicht benötigt !
Bitte nur diese 2 Werte anpassen :
td.edit_navi_headbg{width: 10% !important;}
td.edit_rechts_bottom{width: 10% !important;}
- Beide müssen die gleiche Prozentezahl bekommen !
- Beide bitte NICHT höher als 15% !
- Ideal ist 10%
- Besucher mit 1024 x 768 Bildschirm haben sonst Scrollbalken in der Breite
Bitte beachten :
|
 |
Tipp:
Wer kein Bildprogramm besitzt oder im erstellen von passenden Bildern ungeübt ist ,
der sollte diesen Klassen eine Hintergrundfarbe geben. Das Textfeld zum Beispiel weiße Hintergrundfarbe statt weißes Bild .
Beispiel für das Textfeld :
td.edit_content {
background-color: #FFFFFF;
background-image: none; }
background-color: #FFFFFF;
background-image: none; }
- das background-color: ist Hintergrundfarbe
- bei background-image: none; die Klammer leer lassen
- das Bild wird dadurch ausgeblendet, die Wunschfarbe kann angezeigt werden
Problem mit dem Header :
Besucher mit 1024 er Bildschirmauflösung sehen ca 1000 Pixel breites Header-Feld.
Besucher mit 1440 er Bildschirmauflösung sehen ca 1400 Pixel breites Header-Feld.
Hintergrundbilder / Grafiken können sich nicht anpassen !
- maximale Breite für Headerbild : 1000 Pixel
- Header hat die Klasse td.edit_header_full
- gebe dieser Klasse eine Hintergrundfarbe / background-color
- gebe dieser Klasse ein background-repeat: no-repeat;
- damit sich der Header (das Bild) nicht wiederholt bei großer Bildschirmauflösung
/* Headerfeld */
td.edit_header_full {
background-color: #000000;
background-image: url(Bild-URL);
background-repeat: no-repeat; }
td.edit_header_full {
background-color: #000000;
background-image: url(Bild-URL);
background-repeat: no-repeat; }
Das background-color: bekommt die Farbe, die der Header hat.
So fällt nicht auf, wo Bild endet und wo Hintergrundfarbe beginnt.
Beachtet beim Verbreitern des Designs auch den Seiteninhalt:
Besucher mit unterschiedlichen Bildschirmauflösungen sehen auch das Textfeld mit unterschiedlichen Breiten. Die Platzierung des Inhalts ist nun von der Bildschirmgröße der Besucher abhängig.
Habt Ihr bereits CSS-Codes im Feld "Text über Design eingefügt" ?
- Prüfe bitte ob die Klassen im eigenen Code schon vorhanden sind
- Wenn Ihr die Klassen-Namen bereits habt, im eigenem Code anpassen
- Klassen-Namen sollten nicht doppelt vorkommen im CSS-Code