Problem mit Seite

Status
Nicht offen für weitere Antworten.
P

Philipp-

Hallo Community,

schaut euch diese Seite mal an:

http://wbb-service.de.dd17812.kasserver.com/hacklistev2/index.php

Im FF passt alles soweit, bis auf dass sich der Hintergrund des "Startmenü´s" nicht wiederholt, sondern eine feste größe braucht.

Im Ie 7 ist außerdem das ganze Menü kaputt, seht ihr vllt selber.
Ich hoffe ihr könnt mir helfen:

Hier mal der html Code:

Code: 
<div class="menuStart clearfix">
 <div id="searchBox">
  <form action="" method="post">
  <input type="text" value="Suche starten..." onBlur="if(this.value=='') this.value='Suche starten...';" onFocus="if(this.value=='Suche starten...') this.value='';" />
  </form>
 </div>
 <div id="navBox">
  <ul style="padding-left:4px;">
   <li id="navBoxTop"></li>
   <li id="navBoxMiddle">
	<a class="nav" style="text-decoration:none;" href="#">
	<img src="images/vista/iconMsStart" border="0" alt="" /> <span class="navTypo">Startseite</span></a>
	<a class="nav" style="text-decoration:none;" href="#">
	<img src="images/vista/iconMsProfil" border="0" alt="" /> <span class="navTypo">Profil</span></a>
	<a class="nav" style="text-decoration:none;" href="#">
	<img src="images/vista/iconMsPms" border="0" alt="" /> <span class="navTypo">Private Nachrichten</span></a>
	<a class="nav" style="text-decoration:none;" href="#">
	<img src="images/vista/iconMsKalender" border="0" alt="" /> <span class="navTypo">Kalender und Events</span></a>
	<a class="nav" style="text-decoration:none;" href="#">
	<img src="images/vista/iconMsDatenbank" border="0" alt="" /> <span class="navTypo">Datenbank</span></a>
	<a class="nav" style="text-decoration:none;" href="#">
	<img src="images/vista/iconMsImpressum" border="0" alt="" /> <span class="navTypo">Impressum</span></a>
   </li>
   <li id="navBoxBottom"></li>
  </ul>
  <div id="menuBottom"></div>
 </div> 
</div>

So und hier der Css Code:

Code: 
/* Startmenu */
	
.menuStart {
	position:fixed;
	left:0;
	top:30px;
	z-index:1;
	text-align:center;
	background-image:url(images/vista/menuBg.png); 
	background-repeat:repeat-y; 
	width:287px;
	min-height:313px;
	height:auto !important;
	}
	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: 
	inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from IE-mac */
	
#menuBottom {
	background-image:url(images/vista/menuBottom.png); 
	background-repeat:no-repeat; 
	width:287px;
	height:8px;
	padding:0;
	margin:0;
	}
	
#searchBox {
	width:274px;
	height:24px;
	margin-left:4px;
	padding-top:6px;
	}
		
#searchBox input {
	background-color:#ffffff;
	width:260px;
	height:17px;
	border:2px solid #3F3F3F;
	font-family:Calibri;
	font-size:12px;
	font-style:italic;
	padding-left:10px;
	padding-top:3px;
	background-image:url(images/vista/iconSearchBox.png);
	background-position:right;
	background-repeat:no-repeat;
	}
	
#navBox {
	width:274px;
	height:24px;
	margin:0px;
	padding:0px;

	}
	
#navBox ul li {
	list-style:none;
	padding:0;
	margin:0;
	}
	
#navBoxTop {
	background-image:url(images/vista/navBoxTop.png);
	background-repeat:no-repeat;
	width:274px;
	height:5px;
	}
	
#navBoxMiddle {
	background-image:url(images/vista/navBoxMiddle.png);
	background-repeat:repeat-y;
	width:274px;
	}
	
a.nav {
	width:262px;
	height:40px;
	display:block;
	margin-left:6px;
	font-family:Calibri;
	font-size:18px;
	color:#000000;
	font-style:italic;
	text-align:left;
	line-height:40px;
	}
	
.navTypo {
	padding-top:12px;
	}
	
a.nav:link    { color:#000000; background-color:#FFFFFF;  	width:262px;
	height:40px; line-height:40px;}
a.nav:visited { color:#000000; background-color:#FFFFFF; 	width:262px;
	height:40px; line-height:40px; }
a.nav:hover   { color:#000000; background-image:url(images/vista/menuButtonOn.png); 	width:262px;
	height:40px; line-height:40px; }
a.nav:active  { color:#000000; background-image:url(images/vista/menuButtonOn.png); 	width:262px;
	height:40px; line-height:40px; }
	
#navBoxBottom {
	background-image:url(images/vista/navBoxBottom.png);
	background-position:bottom;
	background-repeat:no-repeat;
	width:274px;
	height:5px;
	}

Wäre euch sehr dankbar wenn mir jemand ne Lösung für mein Problem hätte.

mfg
Philipp
 
Hi,

bei mir wird im Firefox das Hintergrundbild des "Startmenüs" trotz der Mindesthöhe in der Vertikalen wiederholt.

Den Darstellungsfehler im IE 6 + 7 bzgl. der Listennavigation bekommst du folgendermaßen in den Griff:

Code: 
#navBox ul, #navBox ul li {
        list-style:none;
        padding:0;
        margin:0;
        }
 
Hmm..naja klappt irgendwie nicht so wie es soll.
Es sieht immernoch anders aus als im FF. Bei mir wiederholt
sich das ganze im Ie auch irgendwie net. Weist du an was das liegt?

mfg
Philipp
 
Hi,

mit den fettmarkierten Änderungen bzw. Ergänzungen erziele ich im FF und IE (6 + 7) eine einheitliche Darstellung des "Startmenüs":

Code: 
.menuStart {
        position:fixed;
        left:0;
        top:30px;
        z-index:1;
        /*text-align:center;*/ /* auskommentiert = deaktiviert */
        background-image:url(images/vista/menuBg.png);
        background-repeat:repeat-y;
        width:287px;
        min-height:280px;
	height:auto !important;
        height:280px; /* Für IE <7 */
        }

#navBox {
        width:274px;
        /*height:24px;*/ /* auskommentiert = deaktiviert */
        margin:0px;
        padding:0px;
        }

#navBoxTop {
        background-image:url(images/vista/navBoxTop.png);
        background-repeat:no-repeat;
        width:274px;
        height:5px;
        overflow:hidden;
        }

#navBoxBottom {
        background-image:url(images/vista/navBoxBottom.png);
        background-position:bottom;
        background-repeat:no-repeat;
        width:274px;
        height:5px;
        overflow:hidden;
        }

#menuBottom {
        background-image:url(images/vista/menuBottom.png);
        background-repeat:no-repeat;
        width:287px;
        height:8px;
        padding:0;
        margin:0;
        overflow:hidden;
        }
Nach dem Stylesheet notierst du für den IE einen "Conditional Comment", um ihm noch die folgende CSS-Regel zuzuweisen:

Code: 
<style type="text/css">
...
</style>
<!--[if lte IE 7]>
<style type="text/css">
#navBox li { float:left; }
</style>
<![endif]-->
 
Danke dir, das klappt soweit. Nun gibt es noch ein Kleines Problem: Du siehst oben ja diese "Tastkleiste" mit der Top Navigation. Dort gibt esja den Startbutton ganz links. Dieser liegt Optisch unter dem Startmenu. WIe bekomm ich das so hin, dass der Button über dem Menü liegt, jedoch das menü trotzdem an der Taskleiste anfängt?
 
Positionier das Element #navBg mit z-index in der Schichtposition über dem nachfolgenden Element:

Code: 
#navBg {
background-image:url(images/vista/navBg.png);
height:39px;
background-repeat:repeat-x;
font-family:Calibri;
font-size:14px;
color:#fff;
padding:0;
margin:0;
width:100%;
position:fixed;
z-index:100;
}
 
Hallo Liebe Community,

hab nochmal 3 Probleme mit der Webseite.
Also im Safari wird die Tastkleiste ganz oben nach Unten verschoben.
An was kann das liegen?

Im IE 7 wird die Schrift im Startmenü (klick auf den Startbutton) nicht angezeigt.

Und dann will ich noch dass die rechte Seite, dort wo das Logo wBB-Hackliste ist,
beim Scrollen nicht mitscrollt.
Wie mach ich das?

mfg Philipp
& schonmal Danke für eure Hilfe.
 
Hi.

  1. Da ich Safari (für Windows) auf meinem System nicht installiert habe, kann ich dazu leider nichts sagen.

  2. Scheinbar geht dem IE7 irgendwas verloren, wenn das versteckte Startmenü auf sichtbar umgeschaltet wird. Klickt man nun auf die Links und verlässt sie anschliessend, erscheint der Linktext. Wenn jedoch für die Box #sub der visibility-Wert hidden auf visible umgestellt wird, zeigt der IE7 die Links beim Seitenaufruf ganz normal an. Sehr mysteriös, das Ganze.

  3. Wie hast du denn das nicht-mitscrollen für die Taskleiste und das Startmenü umgesetzt?
 
1. Schau dir mal den Screenshot im Anhang an.

2.Was schlägst du vor wie ich das am besten lösen könnte?

3. hab das dort mit position:fixed; gelöst, jedoch geht das irgendwie dort nicht. Wenn ich das reinmache ist er ganze Rechte Teil auf einmal weg.

Hier mal dne Code zu 3.

Code: 
<td align="left" valign="top">
<!-- Rechte Seite --> 
 <table style="width:100%; margin-right: 5px;" border="0" cellspacing="0" cellpadding="0"> 
  <tr>
   <td align="center" valign="top" style="width:86%" > 
    <tr> 
     <td valign="top">
   <div style="width:160px; margin-left:40px;"> 
<p><if($style['logoimage']!="")><then><a href="index.php{$SID_ARG_1ST}"><img src="{$style['logoimage']}" border="0" alt="$master_board_name" title="$master_board_name" /></a></then></if></p>
	 $lastposts
  </td> 
 </table> 
<!-- Rechte Seite Ende -->
<tr> 
 <td align="center"> 
<br /> 
  <table cellpadding="{$style['tableincellpadding']}" cellspacing="{$style['tableincellspacing']}" border="{$style['tableinborder']}" align="center"> 
   <tr> 
    <td><span class="smallfont"><a href="http://www.woltlab.de" target="_blank" style="text-decoration: none">{$lang->items['LANG_GLOBAL_COPYRIGHT']}</a></span>
    </td> 
   </tr> 
  </table> 
 </td> 
</tr> 
</table>
<br /> 
</table>

Würd mich über deine Lösungsvorschläge freuen.
mfg Philipp
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück