Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag26.07.2011 um 11:12 (UTC)    
Titel: 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. Smile


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>
Beitrag26.07.2011 um 11:20 (UTC)    
Titel:

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:

Zitat:
td.edit_below_nav img{visibility: hidden;}

td.edit_below_nav{background-image: url();
background-repeat: no-repeat;background-position: center top;}

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



Zuletzt bearbeitet von 6p-iceblue am 26.07.2011, 12:27, insgesamt 2-mal bearbeitet
Beitrag26.07.2011 um 11:29 (UTC)    
Titel:

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

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? Smile

Vielen Dank und Grüße
Beitrag26.07.2011 um 11:41 (UTC)    
Titel:

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?
Beitrag26.07.2011 um 22:27 (UTC)    
Titel:

6p-iceblue hat Folgendes geschrieben:
da die navigation kleiner ist als die rechten boxen und des textfeldes, geht es nicht.

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
Beitrag27.07.2011 um 07:14 (UTC)    
Titel:

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! Smile

Viele Dank schonmal für die Hilfe
Beitrag27.07.2011 um 10:08 (UTC)    
Titel:

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.

Code:
td.edit_below_nav img{visibility: hidden;}

td.edit_below_nav{background-image: url();
background-repeat: no-repeat;background-position: center top;}


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:

Code:
td.edit_navi_headbg{background-image:url(http://666kb.com/i/bvk5mxhk22k142l6m.png);background-color:#XXXXXX;
background-repeat:repeat-x;background-position:top;}


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:

Code:
td.headline{visibility:hidden;}


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:


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(); }

/* 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;}

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

td.edit_below_nav img{visibility: hidden;}

td.edit_below_nav{background-image: url();
background-repeat: no-repeat;background-position: center top;}

td.edit_navi_headbg {
    height: 50%;
    background-color: ;
    background-image: url(http://666kb.com/i/bvk74kl4y1dddqy0u.png);
    border: 0px solid #000000; }



/* 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>


Zuletzt bearbeitet von 6p-iceblue am 27.07.2011, 12:06, insgesamt 9-mal bearbeitet
Beitrag27.07.2011 um 13:38 (UTC)    
Titel:

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. Smile
Aber trotzdem Danke für den Hinweis.

Viele Grüße
Steffen
Beitrag27.07.2011 um 13:44 (UTC)    
Titel: .

ich gaube dann kann ja geclosed werden oder.
Beitrag27.07.2011 um 13:52 (UTC)    
Titel:

pokemon-city ist zwar gut gemeint, aber das machen die mods schon selber, wenn sie es für richtig halten
Beitrag27.07.2011 um 13:53 (UTC)    
Titel:

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


jop
Beitrag27.07.2011 um 14:24 (UTC)    
Titel:

sg-goesmes-walberngruen hat Folgendes geschrieben:
Wow, vielen Dank für die schnelle und vorallem ausführliche Erklärung zu meinem Problem. Ja mein Problem ist damit gelöst.

Viele Grüße
Steffen
Beitrag27.07.2011 um 14:35 (UTC)    
Titel:

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

-CLOSED-, da erledigt.

mfg
______________
Forenregeln, FAQ, Suchfunktion
Beiträge der letzten Zeit anzeigen:   


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