Suche im Forum:
Suchen


Autor Nachricht
Beitrag25.06.2010 um 19:42 (UTC)    
Titel: [Vorlage] Iceblue mit horizontales Menü

Ich habe mich mit dem Design "Iceblue" beschäftigt und dort mal etwas neues
gebastelt, was zur Zeit keiner großartig kennt - ein Iceblue Design mit
einer horizontalen Menüliste und nein, kein Coolmenü.

Das Design besteht aus 3 einfachen Bereichen: Header, horizontales Menü sowie Content.
Die Navigation und die rechten Boxen wurden entfernt, dadurch wurde das Textfeld
in die Breite gezogen.

Außerdem ist das Design so eingestellt, dass immer 90% des Bildschirm damit
bedeckt sind bei einem Widescreen-Monitoren! Bei größeren Auflösungen ist
eine Mindestbreite von 1000px vorgegeben, nur bei kleineren Auflösungen wird
die Breite mit beeinflusst.



Die Navigation ist die Standard Navigation, die eigentlich links wäre. Nur diese
wurde via CSS umgebastelt und somit wird jede Seite automatisch mit bei
der horizontalen Navigation mit aufgenommen.

Das Design ist noch im Test - d.h es kann Darstellungsfehler enthalten und
der Code wird bestimmt noch paar mal geändert. Ich würde mich freuen,
wenn ihr eure Kritik hier schreibt, was man verbessern könnte.

(sobald ich den Code optimal habe, werde ich einige Erklärungen hinzufügen, welche Bereiche man mit Grafiken austauschen kann, etc.)

Iceblue mit horizontalen Menü - Code:

Code:
<style type="text/css"> <!--

table.edit_main_table{width: 90%; margin: 0 auto; min-width: 1000px;}
table.edit_second_table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
.edit_main_tr{width: 0%; height: 0px;}
.edit_navi_headbg{width:0px;height: 0px}
.edit_rechts_cbg{width:0%;}

.edit_navi_headbg table{position: absolute; width: 89.5%; min-width: 1000px; background: url(http://img.webme.com/pic/t/testseiteonly/orgicebluecontop.png) transparent; height: 25px;}
.edit_navi_headbg table td{background: transparent url(); width: auto; height: 25px; display:inline; text-align: center;}
.edit_navi_headbg table td a{color: #fff; font-size: 15px; background: url() transparent;}
.edit_navi_headbg table td a:hover{text-decoration:underline;}
tr.checked_menu td a{font-weight: bold; color: #FFF1AF;}
.edit_navi_headbg table tr {float: left;}

.edit_rechts_bottom{display:none;}
.edit_rechts_sbg{display:none;}
.nav_heading{display:none !important;}
.edit_below_nav img{display:none;}
.edit_content_bottom{display:none;}
.edit_content_top{display:none;}

.edit_content{height: 450px; background: url() #ffffff; padding: 10px 0 10px 0;}
.edit_content_bottom2{background: url(http://img.webme.com/pic/t/testseiteonly/orgicebluecontop.png) #000080;}
.edit_header_full{background: url(http://theme.webme.com/designs/iceblue/images/header.jpg) no-repeat #000; height: 96px;}

.edit_rechts_tabelle{margin-top: 28px;  padding:0; margin:0;}
.edit_rechts_cbg{height: 490px; background: url() transparent;}
--> </style>

______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile


Zuletzt bearbeitet von blutsegelbukaniere am 26.06.2010, 13:04, insgesamt 2-mal bearbeitet
Beitrag25.06.2010 um 19:58 (UTC)    
Titel:



Iceblue mit horizontalen Menü (rechte Boxen) - Code:

Code:
<style type="text/css"> <!--

table.edit_main_table{width: 90%; margin: 0 auto; min-width: 1000px;}
table.edit_second_table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
.edit_main_tr{width: 0%; height: 0px;}
.edit_navi_headbg{width:0px;height: 0px}
.edit_rechts_cbg{width:0%;}
.edit_rechts_bottom{background: url() transparent;}

.edit_rechts_bottom table#sidebar_heading_1{margin-top: 25px;}

.edit_navi_headbg table{position: absolute; width: 89.5%; min-width: 1000px; background: url(http://img.webme.com/pic/t/testseiteonly/orgicebluecontop.png) transparent; height: 25px;}
.edit_navi_headbg table td{background: transparent url(); width: auto; height: 25px; display:inline; text-align: center;}
.edit_navi_headbg table td a{color: #fff; font-size: 15px; background: url() transparent;}
.edit_navi_headbg table td a:hover{text-decoration:underline;}
tr.checked_menu td a{font-weight: bold; color: #FFF1AF;}
.edit_navi_headbg table tr {float: left;}

.nav_heading{display:none !important;}
.edit_below_nav img{display:none;}
.edit_content_bottom{display:none;}
.edit_content_top{display:none;}
.edit_rechts_sbg{display:none;}

.edit_content{height: 450px; background: url() #ffffff; padding: 10px 0 10px 0;}
.edit_content_bottom2{background: url(http://img.webme.com/pic/t/testseiteonly/orgicebluecontop.png) #000080;}
.edit_header_full{background: url(http://theme.webme.com/designs/iceblue/images/header.jpg) no-repeat #000; height: 96px;}

.edit_rechts_tabelle{margin-top: 28px;  padding:0; margin:0;}
.edit_rechts_cbg{height: 490px; background: url() transparent;}
--> </style>

______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile


Zuletzt bearbeitet von blutsegelbukaniere am 25.06.2010, 21:01, insgesamt einmal bearbeitet
Beitrag25.06.2010 um 20:00 (UTC)    
Titel:

ist ja mit boxen noch besser. klasse Wink

werden die seiten normal erstellt und siedeln sich automatisch an?

man muss ja von dem schlimmsten ausgehen, sagen wir mal eine 1024er auflösung, wie hoch ist die grösste anzahl der seiten, das es normal angezeigt wird und innerhalb des designs bleibt?

für unterseiten ist das nicht geeeignet, war das richtig? dann doch ein coolmenü, stimmts?

das sind erstmal genug fragen Wink

ansonsten bin ich gespannt wie das noch wird. von der idee her super.

gruss gringo

mir fällt gerade ein, das ich sowas ähnliches damals mal gemacht hatte, ich hatte dazu verlinkte buttons bei text über dem design gesetzt, die ordneten sich auch automatisch an (sparte das positionieren), aber halt über dem haeder. deine lösung finde ich aber besser.
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell



Zuletzt bearbeitet von 6p-iceblue am 25.06.2010, 21:06, insgesamt einmal bearbeitet
Beitrag25.06.2010 um 20:14 (UTC)    
Titel:

Zitat:
werden die seiten normal erstellt und siedeln sich automatisch an?

Ja, die Seiten werden automatisch hinzugefügt. Es ist wie die normale Navigationm
wenn man eine Seite erstellt, dann war diese in der Navigation auf der Seite zu
finden, bei der horizontalen ist es nicht anders.

Zitat:
man muss ja von dem schlimmsten ausgehen, sagen wir mal eine 1024er auflösung, wie hoch ist die grösste anzahl der seiten, das es normal angezeigt wird und innerhalb des designs bleibt?

Kommt je auf die Seitennamen sowie Unterseiten an, man sollte es natürlich
nicht zu viele Seiten machen, ansonsten überschreitet man das Menü und dadurch
wirkt es zerstört. Deswegen ist bei diesem Design: weniger ist mehr. Wink

Zitat:
für unterseiten ist das nicht geeeignet, war das richtig? dann doch ein coolmenü, stimmts?

Unterseiten gehen in diesem Fall schon, aber schön sieht es meiner Meinung
nach nicht sonderlich schön aus. Aber das sollte jeder selbt testen. Aber ein Coolmenü wäre
in diesem Fall wirklich die bessere Wahl.
______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile


Zuletzt bearbeitet von blutsegelbukaniere am 25.06.2010, 21:16, insgesamt einmal bearbeitet
Beitrag27.12.2010 um 15:51 (UTC)    
Titel:

der thread ist zu schade um unter zu gehen. deshalb pushe ich mal und poste ein beispiel, was man aus dem code machen kann.



ich lass das mal eine weile zur komplettansicht drin: http://6pdesign002.de.tl

edit: soweit ich weiss, gibt es beim telecom-browser darstellungsprobleme Exclamation

gruss gringo

Hinweis: Variante 2, also mit rechten boxen, ist leider noch fehlerhaft und daher auch nicht so geeignet.
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell



Zuletzt bearbeitet von 6p-iceblue am 15.02.2011, 12:03, insgesamt 3-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de