Suche im Forum:
Suchen


Autor Nachricht
Beitrag21.11.2012 um 20:05 (UTC)    
Titel: Feld unter Navigation anpassen

Hallo Ihr Lieben!

Ich würde mich sehr freuen, wenn mir jemand bei meinem Design Problem helfen könnte! Smile Allerdings bin ich ich wirklich ein absoluter Laie, verzeiht mir also bitte, wenn ich eventuelle nicht alles sofort verstehe. Wink

Also, ich habe die Homepage für meinen Geschmack soweit schon ganz gut hingekriegt, habe aber folgendes Problem:

Das Feld unter der Navigation hätte ich gerne so geändert, dass das rote Feld immer genauso weit runter geht wie das Textfeld der jeweiligen Seite. Ich hoffe, ich habe mich hablwegs verständlich ausgedrückt! Embarassed

Hier mal mein DesignCode:

<style type="text/css">
<!--
table.edit_main_table{width: 90% !important;}
table.edit_main_table, table[height="102"]{margin: 0 auto;}
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: 5% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 5% !important;position: absolute;left: -300px;}
td.edit_rechts_cbg{width:100%;}
td.shouty{visibility: hidden;width: 0px;}
td.edit_rechts_sbg{visibility:hidden;}
td.sidebar_heading{visibility: hidden;}
td.nav_heading{display: none}

td.headline2{visibility:hidden;}

td.edit_main_tr{height: 0px !important;}
td.edit_rechts_cbg{height: 0px !important;}
td.edit_rechts_bottom{height: 0px !Important;}
td.edit_navi_headbg{height: 0px !important;}

td.nav:hover{background-image: url(http://img.webme.com/pic/a/amptist/buttonhoverneu.jpg);background-color:#c0c0c0;width:185px;height:25px;border-bottom: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF;}

td.nav{background-image: url(http://img.webme.com/pic/a/amptist/buttonamptist.jpg);background-color:#cccccc;width:185px;height:25px;border-bottom: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF;}

tr.checked_menu td{background-image: url(http://img.webme.com/pic/a/amptist/buttonhoverneu.jpg);background-color:#c0c0c0;width:185px;height:25px;border-bottom: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF;}

td.edit_below_nav img{visibility: hidden;}
td.edit_below_nav{background-image: url(http://img.webme.com/pic/a/amptist/hintergrundweinrot.jpg);
background-position: center top;background-repeat: repeat;}

td.edit_content{background-image:url(http://img.webme.com/pic/a/amptist/hintergrundbraun.jpg);background-color:#E4B16E;border: 3px solid #ffffff;}

td.edit_content_top{display: none}

td.edit_rechts_cbg{background-image: url(http://img.webme.com/pic/a/amptist/hintergrundweinrot.jpg);}

td.edit_navi_headbg{background-image:url();background-color:#FFFFFF;border: 3px solid #ffffff;}

td.edit_rechts_sbg{background-image:url(http://img.webme.com/pic/a/amptist/hintergrundweinrot.jpg);background-color:#XXXXXX;border: 0px solid #ffffff;}

td.edit_rechts_bottom{background-image:url(http://img.webme.com/pic/a/amptist/hintergrundweinrot.jpg);background-color:#XXXXXX;border: 0px solid #ffffff;}

body {background-image:url();background-color:#DC363A;}
body {background-attachment:fixed;border: 0px solid #5E100C;}

td.edit_rb_footer{background-image:url();height: 20px;background-color:#5E100C;border: 0px solid #5E100C;}

td.edit_content_bottom2{background-image:url(URL);background-color:#XXXXXX;border: 0px solid #ffffff;}

td.edit_content_bottom{display: none}

td.nav a{font-family: arial;font-size: 12px;color: #5E100C;text-decoration: none}
td.nav a:hover{font-family: arial;font-size: 12px;color: #5E100C;text-decoration: none}
tr.checked_menu td a{font-family: arial;font-size: 12px;color: #5E100C;text-decoration: none}

td.edit_content_main div{overflow: hidden!important;}

td.edit_header_full{background-image:url(http://img.webme.com/pic/a/amptist/banner16.11..png);background-color:#80c0c0;width:
930; height: 200px;background-position: center top;background-repeat: no-repeat;border-left: 1px solid #ffffff; border-rightt: 1px solid #ffffff;border-top: 1px solid #ffffff;}

/* Textgröße + Textfarben Seiteninhalte */
td, div {font-size: 13px;font-family: arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma ;color: #000000; }

/* Linkfarben + Größen auf Seiten */
a:link {
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none; }

/*Hover-Effekt bei Links*/
a:hover{
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none;}

/* besuchte Links */
a:visited {
color:#800000;
font-size:13px;
font-family:arial, Times New Roman, Helvetica, Verdana, Comic Sans MS
, Courier New, Tahoma;
text-decoration:none;}
td.headline{visibility:hidden;}
--></style>


Über eine Antwort und eine Lösung des Problems würde ich mich sehr freuen! Very Happy
Beitrag23.11.2012 um 20:42 (UTC)    
Titel:

Also ich würde das ganz einfach lösen:

Nimm den roten Block ganz weg (Code dafür siehe unten). Der weiße Teil unter dem roten Block passt sich meines Wissens nach dann automatisch an die Höhe des Textfeldes an.

Ergänzend dazu kannst du das übrig bleibende Weiß unter der Navigation dann wieder rot färben. Entweder komplett, oder einen roten Block oben und den Rest weiß lassen (so wie es aktuell auch zu sehen ist).

Nun erstmal der Code zum "Verstecken" des roten Blocks:
Zitat:

td.edit_below_nav img{display:none;} td.edit_below_nav{visibility: hidden;}


In deinem Code hast du:
Zitat:

td.edit_below_nav img{visibility: hidden;}
td.edit_below_nav{background-image: url(http://img.webme.com/pic/a/amptist/hintergrundweinrot.jpg);
background-position: center top;background-repeat: repeat;}


Das überschreibst du komplett mit obigem Code.


Nun ist nur noch das Weiße übrig. Wenn du wieder Rot drin haben willst, musst du ein entsprechendes Bild erstellen, hochladen, und wiefolgt einfügen:
Zitat:

td.edit_navi_headbg{background: url(LINK ZU DEINEM BILD); background-repeat: no-repeat;!important; background-position: bottom;!important; #FFFFFF; border: 3px solid #ffffff;}


In deinem Code hast du:
Zitat:

td.edit_navi_headbg{background-image:url();background-color:#FFFFFF;border: 3px solid #ffffff;}


Auch dies wieder mit obigem überschreiben. Alles bei Text über dem Design einfügen. Fertig.

WICHTIG
Mach dir, wenn du diese Methode anwendest, vorher bitte eine Sicherheitskopie deines Codes! Z.B. alles in ein Textdokument kopieren und auf deiner Festplatte speichern.
Damit du das alte Design wieder herstellen kannst, falls was schief geht
Wink

Ich hoffe ich konnte dir helfen und es klappt Very Happy

Gruß
L.D.


Zuletzt bearbeitet von LiamDucray am 23.11.2012, 21:44, insgesamt einmal bearbeitet
Beitrag25.11.2012 um 15:41 (UTC)    
Titel:

Daaaanke! Es hat alles super geklappt, so gefällt es mir viel besser!

Vielen lieben Dank für die Unterstützung!

Hier kann dann zu!
Beitrag26.11.2012 um 15:12 (UTC)    
Titel:

Hi. Danke für das Feedback. Freut mich, dass es geklappt hat.

Mir ist noch aufgefallen, dass unter dem Textfeld ein roter Balken ist, weswegen Navigation und Mittelfeld farblich noch nicht zu 100% auf einer Ebene abschliessen.

Wenn du das rote Stück unter dem Textfeld wegmachen willst, sodass Gelb und Braun genau auf einer Linie abschließen, probier doch mal diesen Code aus:

Zitat:

td.edit_rechts_cbg img{display:none;} td.edit_rechts_cbg{visibility: hidden;}


Diese Stelle in deinem Design überschreibst du mit obigem Code:

Zitat:

td.edit_rechts_cbg{background-image: url(http://img.webme.com/pic/a/amptist/hintergrundweinrot.jpg);}


Wenns klappt ... vielleicht gefällt es dir so besser Very Happy

Gruß
L.D.
Beiträge der letzten Zeit anzeigen:   


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