Navigationsgröße an Textfeldgröße anpassen

Hallo,

ich bin schon ziemlich weit mit meiner neuen Homepage. Leider gefällt mir folgendes am Design noch nicht.

Ich hätte gerne eine automatische Anpassung der Größe zwischen den Navigationsleisten (links, rechts) mit dem Textfeld. Da sich das Textfeld mit dem kleinen Balken "Hinweis unter dem Inhaltsbereich" auf jeder Seite ändert, nehme ich an, dass der Hintergrund der Navigationsleiste verändert werden muss.
Ist der Inhalt mancher Seiten aber kleiner als die Navigationsliste, so müsste der Balken trotzdem an die Größe der Navigationsleiste angepasst werden.

Ich habe es schon an dieser Stelle (*) versucht, hat aber leider nicht zum Erfolg geführt.

*

/* Bild unter Navigation entfernt */
td.edit_below_nav {display: none;}

Ich hoffe ich konnte mich einigermaßen ausdrücken, es ist nicht leicht, dass Problem schriftlich zu verfassen.


Hier mal mein Code:

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

/* Nullformatierung für alle Browser */
*{margin:0px; padding:0px;}

/* Werbung über Design mittig */
table[height="102"] { margin: auto; }

/* Das Design mittig - zentriert ausrichten */
table.edit_main_table { margin: auto; }

/* Design kürzen (kein scrollen des Designs bei kurzen Seiten) */
td.edit_main_tr {
height: 50% !important; }

/* Schriftfarbe + Größe Baukasten-Extras */
td.edit_content_main DIV td {
color: #000000;
font-size: 14px;
text-align: left;
font-family: arial; }

/* Schriftfarbe und Größe Seiteninhalt */
td.edit_content_main DIV {
color: #000000;
font-size: 14px;
text-align: left;
font-family: arial; }

/* Titel im Header entfernen */
td.headline {visibility: hidden;}
/* aktuell besuchte Seite Hintergrund */
tr.checked_menu td {
background-color: #6f8ac4;
background-image: url(); }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display: none;}

/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color: ;
background-image: url();
border: 0px solid #000000; }

/* große Feld unter Textfeld entfernen */
td.edit_rechts_cbg {
height: 50px;
background-color: ;
background-image: url();
border: 0px solid #000000; }

/* Counter / Besucherzähler */
td.edit_content_bottom2_counter {
font-family: arial;
font-size: 14px; }


/* Titel über rechter Box */
td.sidebar_heading {
color: #FFFFFF;
font-size: 14px;
font-family: arial;
text-align: center;
height: 29px;}

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5, .shouty6 {
color: #000000;
font-size: 12px;
font-family: arial;
text-align: center; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer {display: none; }

td.edit_header_full{background-image:url(http://img.webme.com/pic/s/sg-goesmes-walberngruen/sg4klein.jpg);height: 192px;width: 921px;}


/* Feld für das Menu */
#Menu_Box {
width: 650px; /* Breite */
position: absolute;
left: 50%; /* = NICHT ÄNDERN ! */
margin-left: -310px; /* nach LINKS + RECHTS verschieben */
margin-top: 259px; /* nach OBEN + UNTEN verschieben */
overflow: hidden;}

/* die 5 DIV Felder */
#link_1, #link_2, #link_3, #link_4, #link_5 {
float: left; /* Buttons nebeneinander */
text-align: center;
margin-right: 5px; /* Abstand zwischen Buttons */
overflow: hidden; }

/* das Aussehen der 5 Links */
#link_1 a, #link_2 a, #link_3 a, #link_4 a, #link_5 a {
display: block; /* = Verlinkung füllt Feld aus */
width: 100px; /* = Breite des Button */
height: 20px; /* = Höhe des Button */
line-height:20px; /* = muss Höhe bekommen, die auch height hat */
margin-top: 30px; /* = nur notwendig, wenn Hover-Effekt verwendet wird */
color: #ffffff; /* = Linkfarbe */
font-size: 14px; /* = Link Textgroeße */
font-family: arial; /* = Link Schriftart */
text-decoration: none; /* = Link nicht unterstrichen */
background-color: #555555; /* = Hintergrundfarbe Link */
border: 1px solid #bbbbbb; /* = Rahmen */
-moz-border-radius-topleft: 10px; /* = abgerundete Ecke oben links */
-moz-border-radius-topright: 10px; /* = abgerundete Ecke oben rechts */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}

/* Der Hover Effekt fuer die Links */
#link_1 a:hover, #link_2 a:hover, #link_3 a:hover, #link_4 a:hover, #link_5 a:hover {
font-size:15px;
margin-top: 20px;
padding-top: 5px;
padding-bottom: 5px;
color: #ffffff;
font-weight: bold;
background-color: #6f8ac4; }

--></style>

<div id="Menu_Box">
<div id="link_1"> <a href="http://sg-goesmes-walberngruen.de.tl/Home/index.htm">Home</a> </div>
<div id="link_2"> <a href="http://sg-goesmes-walberngruen.de.tl/Galerie/index.htm">Galerie</a> </div>
<div id="link_3"> <a href="http://sg-goesmes-walberngruen.de.tl/Forum/index.htm">Forum</a> </div>
<div id="link_4"> <a href="http://sg-goesmes-walberngruen.de.tl/G.ae.stebuch/index.htm">Gästebuch</a> </div>
<div id="link_5"> <a href="http://sg-goesmes-walberngruen.de.tl/Links/index.htm">Links</a> </div>
</div>

da die navigation kleiner ist als die rechten boxen und des textfeldes, geht es nicht.

das blaue feld unter der navigation, wird übrigens so entfernt:

damit zumindest die startseite stimmt, kannst du aber ein bild unter der navi einfügen. breite 185 pixel. einfach die url des bildes in die klammer setzen.

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Vielen Dank erstmal für die schnelle Antwort.
Okay schade, dass dies nicht funktioniert. Würde auf jedenfall schöner ausschauen.

Noch kurz drei andere Fragen zu diesem Thema:

Würde es funktionieren, wenn die Navigation größer wäre?

Kann ich den Balken unter dem Textfeld (Copright), bei kleinen Textfeldern an die Größe der Navigationsleiste anpassen?

Gibt es vielleicht eine andere Lösung zu diesem Problem, die mein Design schönes aussehen lässt?

Vielen Dank und Grüße

Oder vielleicht vereinfacht:

Die rechte Leiste ist ja mit einer langen grauen Farbe unterlegt und die Navigationsleiste links mit einer blauen. Wie kann ich die Länge und Farbe dieser beiden Hintergründe anpassen?

So ziemlich alles, was sich rein Clientseitig in der Darstellung abspielt "geht"! Die Frage ist, wie man es macht. Man könnte entweder die Navi verlängern oder Contentbereich und rechte Boxen verkleinern!?

@sg-goesmes-walberngruen
Empfehlenswert wäre allerdings Navi und Content an die Länge der rechten Boxen anzupassen. Dazu musst du allerdings genauer beschreiben, wie es aussehen soll.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Ich versuche es mal so gut wie möglich zu erklären:

Ich hätte gerne, dass sich der Hintergrund (=Länge) der rechten und linken Box bei jeweils unterschiedlichen Seiten an die Textfeldgröße anpasst.
Der Balken der unter meinem Textfeld ist (Copright), sollte also immer den Abschluss (unteres Ende) meiner Homepage bilden und nicht wie jetzt bei kleineren Textfeldern mit nach oben "wandern".

Es wäre auch schön, wenn die beiden Farbhintergründe der linken und rechten Leisten gleiche Farbe und Länge haben. Momentan ist ja die linke Leiste blau und die rechte Leiste grau hinterlegt.

Ich hoffe es ist einigermaßen verständlich!

Viele Dank schonmal für die Hilfe

mal sehen ob ich das jetzt richtig verstehe. wenn man diese seite öffnet http://sg-goesmes-walberngruen.de.tl/Loipen.htm

dann sieht man rechts unter den boxen, wie es richtig sein soll. gleichen effekt möchtest du nun auch unter der navigation haben, oder?

beginne erstmal damit, das blaue unter der navi auszublenden, den code hatte ich schon dafür gepostet.

wenn du es auf der art machst, kannst du jederzeit noch ein bild unter der navigation einfügen.

nun muss das gleiche bild, was rechts ist, noch als hintergrund der navigation gemacht werden. das wäre dann der code:

teste mal, ob es das war, was du meinst. das bild hab ich von der rechten seite genommen und gespiegelt, sowie die breite angepasst.

ich hatte es zuerst so verstanden, das deine navigationsbutton genau so hoch werden sollen, wie die rechten boxen.

um eine kürzere seite optisch zu verlängern, so das sie länger als die rechten boxen ist, kannst du einfach tricksen. nach der texteingabe in den seiten, einfach so oft die leertaste drücken, bis die gewünschte länge erreicht ist. das geht zwar auch mittels code, der fällt mir aber gerade nicht ein.

gruss gringo

tip: noch steht der homepagename im haeder, der nicht benötigt wird. entferne ihn mit:

Edit: hmm, seltsam. der homepagename verschwindet nicht. da musst du tricksen. löscche den homepagenamen und statt dessen mach ein leerzeichen rein. nun noch speichern und der überflüssige name ist weg.

edit 2: lol, kein wunder, denn der zweite homepagename befindet sich direkt im bild. da hatte wohl jemand mit einem bildschirmfoto den haeder erstellt.

den rechten dunklen streifen habe ich auch entfernt. der wirkt störend.

hier dein gesamter code:

______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Wow, vielen Dank für die schnelle und vorallem ausführliche Erklärung zu meinem Problem. Ja mein Problem ist damit gelöst.

Nochmal zum Headerbild: Das habe ich von einem Graphiker erstellen lassen und es ist gewollte, dass der Name zweimal vorkommt.
Aber trotzdem Danke für den Hinweis.

Viele Grüße
Steffen

ich gaube dann kann ja geclosed werden oder.

pokemon-city ist zwar gut gemeint, aber das machen die mods schon selber, wenn sie es für richtig halten

jop

gern geschehen

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Vielen Dank an den Helfer und für die Rückmeldung.

-CLOSED-, da erledigt.

mfg
______________
Forenregeln, FAQ, Suchfunktion