✔ Wie setze ich dieses Layout um?

Ich mach dir jetzt mal einen ganz anderen Vorschlag, da ich mich hier nicht bei jedem auftretenden Problem mit dem Menü (oder andere Seitenkomponenten) in dein genutztes CMS und seinem generierten Quellcode erneut reindenken kann und will: Wenn du dich damit schwer tust bzw. damit nicht zurechtkommst, dann laß einfach die Finger davon.

mfg Maik
 
Die Seite ist mittlerweile so gut wie fertig. Ein Problem habe ich leider mit der in dem CMS integrierten Suche bzw. deren Anzeige. Sobald ich einen Suchbegriff in die Suche eingegeben habe und dann auf ein Suchergebnis klicke, ist der gesamte Header weg.

Hier ein Screenshot der Seite VOR der Suche:
http://s7b.directupload.net/file/d/1594/cyfxosc5_jpg.htm

Hier ein Screenshot der Seite mit angezeigten Suchergebnissen:
http://s2b.directupload.net/file/d/1594/iy6isfg7_jpg.htm

Hier ein Screenshot der Seite, nachdem auf ein Suchergebnis geklickt wurde:
http://s3b.directupload.net/file/d/1594/97aqcs2e_jpg.htm

Wie man sieht, ist oben der gesamte Teil abgeschnitten. Klicke ich auf irgendeinen Link in der Navi, sieht wieder alles normal aus.

Ich habe mal etwas rumgetüftelt und rausgefunden, dass diese Stelle im Stylesheet dafür verantwortlich ist (padding-bottom und margin-bottom). Die beiden Werte sind dafür da, dass sich die Navi immer mit dem Inhaltsbereich ausdehnt. Kommentiere ich sie aus, wird der obere Teil bei der Suche nicht abgeschnitten. Gibt es anstatt dieser Variante eine Alternative? Oder kann man trotz der Werte die Suche dazu bringen, den oberen Teil nicht abzuschneiden? Habe deshalb mal den Code der Suche unten gepostet und zur Übersicht nochmal das gesamte Stylesheet ganz unten. Hoffe, es gibt eine Lösung dafür :) Danke!

HTML: 
#Huelle-Navi {
		width: 220px;
		height: auto;
		margin-left: 20px;
		float: left;
		display: inline;									
		background: #3e4d55;
		color: #FFFFFF;
		padding-bottom: 32800px;								
		margin-bottom: -32768px;
		}

Das ist der Code der Suche:

Kopfzeile:

HTML: 
<h1>[TEXT_SEARCH]</h1>
<br />
<form name="search" action="[WB_URL]/search/index.php" method="get">
<input type="hidden" name="referrer" value="[REFERRER_ID]" />
<table cellpadding="3" cellspacing="0" border="0" width="520px">
<tr>
<td>
<input type="hidden" name="search_path" value="[SEARCH_PATH]" />
<input type="text" name="string" value="[SEARCH_STRING]" style="width: 360px;" />
</td>
<td width="150px">
<input type="submit" value="[TEXT_SEARCH]" style="width: 100%;" />
</td>
</tr>
<tr>
<td colspan="2">
<br />
<input type="radio" name="match" id="match_all" value="all"[ALL_CHECKED] />
<label for="match_all">[TEXT_ALL_WORDS]</label>
<input type="radio" name="match" id="match_any" value="any"[ANY_CHECKED] />
<label for="match_any">[TEXT_ANY_WORDS]</label>
<input type="radio" name="match" id="match_exact" value="exact"[EXACT_CHECKED] />
<label for="match_exact">[TEXT_EXACT_MATCH]</label>
</td>
</tr>
</table>

</form>
<br />
<hr />

Ergebnisse Überschrift:

HTML: 
<br />[TEXT_RESULTS_FOR] '<b>[SEARCH_STRING]</b>':
<table cellpadding="2" cellspacing="0" border="0" width="100%" style="padding-top: 10px;">

Ergebnisse Schleife:

HTML: 
<tr style="background-color: #F0F0F0;">
<td><a href="[LINK]">[TITLE]</a></td>
<td align="right">[TEXT_LAST_UPDATED_BY] [DISPLAY_NAME] ([USERNAME]) [TEXT_ON] [DATE]</td>
</tr>
<tr><td colspan="2" style="text-align: justify; padding-bottom: 5px;">[DESCRIPTION]</td></tr>
<tr><td colspan="2" style="text-align: justify; padding-bottom: 10px;">[EXCERPT]</td></tr>

Ergebnisse Fußzeile:

HTML: 
</table>

Stylesheet:

HTML: 
/* -------------------------------------------------------------------------------------------------------------------> allgemein */
* { 				/*setzt global alle Abstände auf 0 - an gewünschter Stelle können Abstände manuell eingetragen werden*/
	margin: 0; 
	padding: 0; 
	}

html { 
     height: 100%;   										/*nötig, um ein DIV auf 100% Höhe zu bringen */
	 } 

Body {
/* -------------------------------------------------------------------------------------> Farben */
      background: #eaf4da;      

/* -------------------------------------------------------------------------------------> Schrift */
     font-family:  Arial;
     font-size:    12px;	
    
/* -------------------------------------------------------------------------------------> Abstände */
     margin:      0px;
     height:      100%; 									/*nötig, um ein DIV auf 100% Höhe zu bringen */
     }

/* -------------------------------------------------------------------------------------> Listen */
/*li {
   list-style-image: url(Bilder/Liste.png);
   margin-left:25px;
   margin-right:10px;
   line-height: 13px;
   }*/

/* -------------------------------------------------------------------------------------> Formulare */
input {    
		font-family: Arial;                
           	font-size: 13px;
		font-weight: bold;
	   	color: #787878;                
           	background-color: #FFFFFF;
           	border-color: #8cca42;
           	border-style: solid;           	
		}	
			        
Textarea {
           font-family:         Arial; 
           font-size:           12px;               
           color:               #2969AD;                
           background-color:    #FFFFFF;
           border-color:        #FFFFFF;
           border-style:    solid;    	 
           }

/* -------------------------------------------------------------------------------------------------------------------> Huelle-gesamt */
#Huelle-gesamt {  
        position:    relative;
        margin-right: auto;
        margin-left: auto; 
        margin-top: 40px;
	width:       820px;
	height:      auto;   
        background: #FFFFFF;      
	}	
	   
/* -------------------------------------------------------------------------------------------------------------------> Rand oben */
#Rand-oben { 
	   width:           820px;
	   height:          19px;
	   background:      url(Bilder/Schatten-oben.gif);
           }	

/* -------------------------------------------------------------------------------------------------------------------> Huelle-klein */
#Huelle-klein {
		width: 820px;
		height: auto;
		background: url(Bilder/Schatten-mitte.gif) repeat-y;
		overflow: hidden;
		}

/* -------------------------------------------------------------------------------------------------------------------> Sub-Navi */
#Sub-Navi {
		width: 500px;
		height: 40px;
		background: #3e4d55;
		margin-left: 20px;
		float:left;
		display:inline; 									/* The IE5/6 Doubled Float-Margin Bug */
		color: #FFFFFF;
		}

#Sub-Navi-Links {
			height: 100%;
			margin-left: 50px;
			margin-top: 10px;
			}				 

#Sub-Navi ul li {
			margin-right: 15px;
			display: inline;
			float: left;
			font-weight: bold;
			font-size: 13px;
			}

#Sub-Navi a {
		color: #FFFFFF;
		text-decoration: none;
		}

#Sub-Navi a:hover {
			text-decoration: none;
			color: #8cca42;
			}

#Sub-Navi ul li.menu-current a {									/*Subnavi aktiv*/
					color: #8cca42;
					}

#Sub-Navi ul li.Sprachen {
				margin-left: 220px;
				display: inline;
				float: right;
				font-weight: bold;
				font-size: 13px;
				border: 0px;
				}

#Sub-Navi ul.Sprachen img {
				border: 0px;
				}

/* -------------------------------------------------------------------------------------------------------------------> Login */
#Suche {
		width: 280px;
		height: 40px;
		background: #3e4d55;
		margin-right: 20px;
		float:right;
		display:inline; 									/* The IE5/6 Doubled Float-Margin Bug */
		color: #FFFFFF;	
		}

#Suche-Feld {
			height: 100%;
			margin-top: 10px;
			margin-left: 53px;
			}

#Suche input {    
         	font-family: Arial;                
           	font-size: 13px;
		font-weight: bold;
	   	color: #787878;                
           	background-color: #FFFFFF;
           	border-color: #8cca42;
           	border-style: solid;           	
		}

/* -------------------------------------------------------------------------------------------------------------------> Header-klein */
#Header-klein {
		width: 30px;
		height: 200px;
		background: #3e4d55;
		margin-left: 20px;
		float:left;
		display:inline; 									/* The IE5/6 Doubled Float-Margin Bug */
		}

/* -------------------------------------------------------------------------------------------------------------------> Header */
#Header {
		width: 740px;
                height: 180px;
                background: #FFFFFF url(Bilder/Header.jpg) no-repeat 10px 10px;
                margin-right: 10px;
                padding:10px;
                float:right;	
		display:inline; 									/* The IE5/6 Doubled Float-Margin Bug */	
		}

#HeaderDE {
		width: 740px;
                height: 180px;
                background: #FFFFFF url(Bilder/Header-de.jpg) no-repeat 10px 10px;
                margin-right: 10px;
                padding:10px;
                float:right;	
		display:inline; 									/* The IE5/6 Doubled Float-Margin Bug */	
		}

#HeaderEN {
		width: 740px;
                height: 180px;
                background: #FFFFFF url(Bilder/Header-en.jpg) no-repeat 10px 10px;
                margin-right: 10px;
                padding:10px;
                float:right;	
		display:inline; 									/* The IE5/6 Doubled Float-Margin Bug */	
		}

/* -------------------------------------------------------------------------------------------------------------------> Navi */
#Huelle-Navi {
		width: 220px;
		height: auto;
		margin-left: 20px;
		float: left;
		display: inline;									/* The IE5/6 Doubled Float-Margin Bug */
		background: #3e4d55;
		color: #FFFFFF;
		padding-bottom: 32800px;								/*equal hight columns*/
		margin-bottom: -32768px;
		}

#Huelle-Navi ul {
			margin: 30px 20px 0 50px;
			list-style: none;
			}

#Huelle-Navi ul ul {
			margin: 0 0 0 20px;
			list-style: square;
			padding: 0 0 5px 0;								/*Abstand des Untermenüs zum nächsten Hauptmenüpunkt*/
			}

#Huelle-Navi a {
			display: block;
			text-decoration: none;
			text-align: right;
			font-weight: bold;
			color: #FFFFFF;
			}

#Huelle-Navi ul a {											/*Hauptmenüpunkte Darstellung*/
			width: 150px;
			padding-top: 10px;
			background: url(Bilder/Liste.gif) no-repeat left center;
			border-bottom: 1px dashed #667e8b;
			font-size: 14px;
			}

#Huelle-Navi ul a:hover {										/*Hauptmenüpunkte hover*/
				color: #8cca42;
				background: url(Bilder/Liste-over.gif) no-repeat left center;
				}

#Huelle-Navi ul li.menu-parent a {									/*Hauptmenüpunkte, wenn Unterpunkt aktiv*/
					color: #8cca42;
					background: url(Bilder/Liste-over.gif) no-repeat left center;
					}

#Huelle-Navi ul li.menu-current a {									/*Hauptmenüpunkte aktiv*/
					color: #8cca42;
					background: url(Bilder/Liste-over.gif) no-repeat left center;
					}

#Huelle-Navi ul ul a {											/*Untermenüpunkte Darstellung*/
				width: 130px;
				padding-top: 5px;
				background: none;
				border-bottom: none;
				font-size: 13px;
				font-weight: normal;
				}

#Huelle-Navi ul ul a:hover {										/*Untermenüpunkte hover*/
				/*color: #8aa2af;*/
				background: none;
				text-decoration. underline;
				}


#Huelle-Navi ul ul li.menu-current a {									/*Untermenüpunkte aktiv*/
					color: #FFFFFF;	
					background: none;
					text-decoration: underline;				
					}

#Huelle-Navi ul ul li.menu-sibling a {									/*Untermenüpunkte, wenn anderer Untermenüpunkt aktiv*/
					color: #FFFFFF;	
					background: none;				
					}

#Huelle-Navi ul ul li.menu-sibling a:hover {								/*Untermenüpunkte, wenn anderer Untermenüpunkt aktiv, hover*/
						color: #FFFFFF;	
						background: none;
						text-decoration: underline;				
						}

#Huelle-Navi ul ul li.menu-child a {									/*Untermenüpunkte, wenn nur Hauptmenüpunkt aktiv*/
					color: #FFFFFF;	
					background: none;				
					}

#Huelle-Navi ul ul li.menu-child a:hover {								/*Untermenüpunkte, wenn nur Hauptmenüpunkt aktiv, hover*/
						color: #8aa2af;	
						background: none;				
						}

#Huelle-Navi h1 {											/*Überschrift Navigation*/
			margin-top: 30px;
			margin-left: 50px;
			margin-bottom: 20px;
			font-weight: bold;			
			font-size: 17px;
			text-transform: uppercase;
			color: #8cca42;
			}

/* -------------------------------------------------------------------------------------------------------------------> Content */
#Huelle-Content {
			width: 550px;
			height: auto;
			background: #FFFFFF;
			margin-right: 20px;
			margin-left: 10px;			
			float: right;
			display: inline; 								/* The IE5/6 Doubled Float-Margin Bug */
			color: #3e4d55;									/*Schriftfarbe für den Haupt-Text*/

			line-height:  1.3em;								/*Zeilenhöhe*/
    			word-spacing: 0.3em;								/*Wortabstand*/			
			}

#Huelle-Content h1 {
			width: 540px;
			background: #8cca42;
			margin: 0 0 3px 0;			
			padding: 8px 0 8px 10px;							
			font-weight: bold;			
			font-size: 17px;
			text-transform: uppercase;
			color: #FFFFFF;			
    			word-spacing: 0.2em;			
			}

#Huelle-Content h2 {											/*Datum bzw. Zwischenüberschrift*/
			width: 540px;
			background: #3e4d55;
			margin: 3px 0 10px 0;
			padding: 4px 0 4px 10px;			
			font-weight: bold;			
			font-size: 12px;
			color: #FFFFFF;			
    			word-spacing: 0.2em;
			}

#Huelle-Content a {
			color: #3e4d55;
			font-weight: bold;
			text-decoration: underline;
			}

#Huelle-Content a:hover {
				color: #3e4d55;
				font-weight: bold;
				text-decoration: none;
				}

#Huelle-Content ul {
   			margin-left: 15px;  			
 			}

			
/* -----------------------------------------------------------------------------------------------------------------> Divider */
#Divider {
		width: 780px;
		height: 10px;
		background: #FFFFFF;
		margin-right: 20px;
		margin-left: 20px;			
		}

/* -----------------------------------------------------------------------------------------------------------------> Abschluss */
#Abschluss {
		width: 820px;
		height: auto;
		background: url(Bilder/Schatten-mitte.gif) repeat-y;
		}

/* -----------------------------------------------------------------------------------------------------------------> Footer */
#Huelle-Footer {
			width: 780px;
			height: 30px;
			background: #3e4d55;
			margin-top: 0px;
			margin-right: 20px;
			margin-left: 20px;	
			}

#Huelle-Footer-Print {
			height: 100%;
			padding-top: 7px;
			margin-left: 50px;
			color: #bdbdbd;	
			float: left;
			display:inline;
			}

#Huelle-Footer-Print a {
				margin-left: 3px;
				color: #bdbdbd;
				text-decoration: underline;
				border: 0px;
				}

#Huelle-Footer-Print a:hover {
				margin-left: 3px;
				color: #bdbdbd;
				text-decoration: none;
				border: 0px;
				}

#Huelle-Footer-Top {
			height: 100%;
			padding-top: 7px;
			text-align: right;
			margin-right: 20px;
			float: right;
			display: inline;					
			}

#Huelle-Footer-Top a {
			margin-left: 3px;
			color: #bdbdbd;
			text-decoration: underline;
			border: 0px;
			}

#Huelle-Footer-Top a:hover {
				margin-left: 3px;
				color: #bdbdbd;
				text-decoration: none;
				border: 0px;
				}

/* -------------------------------------------------------------------------------------------------------------------> Rand unten */
#Rand-unten { 
		width:           820px;
		height:          19px;
		background:      url(Bilder/Schatten-unten.gif);
		}

/* -------------------------------------------------------------------------------------------------------------------> clear - Float aufheben */
.clear { 
		clear: both; 
		}		  

.search_string {												/*Breite des Suchfeldes*/
			width: 150px;
			}

.highlight { 													/*Suchbegriffe hervorheben*/
		background: #8cca42;
		color: #FFFFFF;
		font-weight: bold;
		}
	  
.Bilder {        
		margin-right:  10px;
		margin-bottom: 10px;	
		border-style:  solid;
        	border-width:  4px;
        	border-color:  #FFFFFF;		
       		}	
		  
.Bilder:hover {  
             	 border-style: solid;
              	border-width: 4px;
              	border-color: #8CC7FF;    
             	}
 

Anhänge

  • 01.jpg
    01.jpg
    84,3 KB · Aufrufe: 9
  • 02.jpg
    02.jpg
    83,2 KB · Aufrufe: 6
  • 03.jpg
    03.jpg
    366,4 KB · Aufrufe: 9
Rayne hat gesagt.:
Ich habe mal etwas rumgetüftelt und rausgefunden, dass diese Stelle im Stylesheet dafür verantwortlich ist (padding-bottom und margin-bottom). Die beiden Werte sind dafür da, dass sich die Navi immer mit dem Inhaltsbereich ausdehnt. Kommentiere ich sie aus, wird der obere Teil bei der Suche nicht abgeschnitten. Gibt es anstatt dieser Variante eine Alternative?
Zum Vergrößern anklicken....
Hi,

der Artikel AnyColumnLongest nennt Links zu weiteren Techniken, die solche "Equal-Height-Columns" erzeugen.

mfg Maik
 
An der Seite hat sich mittlerweile einiges geändert, leider gibt es einen Darstellungsfehler in älteren Firefox-Versionen.

Es betrifft die Sprachauswahl oben rechts (Deutsch, English). Beide Blöcke sollen nebeneinander stehen. Im Firefox 2.x.x sieht es allerdings wie im Anhang aus.

Wie kann ich dieses Problem beheben?

http://wiko.bplaced.net/wb/

HTML: 
* 
{ 
margin:0; 
padding:0; 
}

html 
{ 
height:100%; 
} 

Body 
{
background:#D1D1D1;      
font-family:Arial,sans-serif;
font-size:0.75em;	
margin:0px;
height:100%; /*nötig, um ein DIV auf 100% Höhe zu bringen */
}

#Sprachen
{
width:450px;
height:50px;
float:right;
display:inline; /* The IE5/6 Doubled Float-Margin Bug */
background: #81d000; 
}

#Sprachen-ausrichten
{
margin:0 10px 0 320px; 
}

#Sprachen ul li 
{
display:inline;
float:left;			
font-weight:bold;
}

#Sprachen ul li  a
{
background:#2e2e2e;
color:#FFFFFF;
text-decoration:none;
padding:2px 5px 2px 5px; /*Ausrichtung der Schrift mittig*/
margin:0 0 0 5px; /*Abstand der Sprachen untereinander*/
}

#Sprachen ul li  a:hover
{
background:#FFFFFF;
color:#2e2e2e;
text-decoration:none;
}

Vielen Dank :)
 

Anhänge

  • oto2j6l5.jpg
    oto2j6l5.jpg
    57,1 KB · Aufrufe: 14
Hm, den Screenshot hat mir jemand aus meiner Projektgruppe geschickt. Sie meinte nur, dass es auf ihrem Firefox auf dem Mac so aussieht. Mit Opera oder Safari ist alles tip top.
Werde sie nochmal nach der genaue Firefox-Version fragen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück