DropdownMenu für fertiges Design?!

Status
Nicht offen für weitere Antworten.
Also klappt noch nicht so ganz^^

Aber danke für deine Hilfe schonmal :)

Also problem sieht man im angehängten Bild...die Navigation ist nach rechts verzogen..

So und dann musste mir das mit dem if IE nochmal erklären...das kann ich einfach in die CSS-Datei so schreiben oder wie....?! habe die style-tags und dies if IE mal weggelassen weil kp wie das funktioniert... :(

Und noch zur Info die verzogene Nav ist nur im IE nicht im FF^^

MFG Nilson
 

Anhänge

  • NavVerzogen.jpg
    NavVerzogen.jpg
    19 KB · Aufrufe: 15
Das Stylesheet innerhalb des "Conditional Comments" <!--[if IE]> <![endif]--> wird im HTML-Dokument nach dem "normalen" Stylesheet aufgerufen:

Code:
<link rel="stylesheet" href="_files/css/styles.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="_files/css/styles_ie.css" type="text/css" />
<![endif]-->
  • CSS-Code styles.css:
Code:
.submenu ul li ul {
  visibility:hidden;
}

.submenu ul, .submenu ul li ul {
  list-style:none;
  padding:0;
  margin:0;
  position:absolute;
  width:138px;
}

.submenu ul li ul li {
  text-align:left;
  text-indent:5px;
}

.submenu a:hover ul, .submenu li:hover ul {
  visibility:visible;
}

.submenu a:link, .submenu a:visited {
  display:block;
  font-size:10px;
  color:#000;
  background:#999999;
  text-decoration:none;
  width:100%;
}

.submenu a:hover {
  background:#D3D3D3;
  color:#000;
}
  • CSS-Code styles_ie.css:
Code:
.submenu ul li ul {
  top:41px;
}

.submenu ul li ul li {
  display:inline;
}

.submenu a:link, .submenu a:visited {
  height:1%;
}
 
Ah ok dann hab ich das nun ja auch verstanden^^

Aber das ändert nix daran, dass es im IE noch wie im Bild verzogen ist :(

MFG Nilson
 
Ok hmm eig hatte ich nix mehr geändert....

Hmm also das nochma mein ganzer html-code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base href="http://<?php echo $this->escape($_SERVER['HTTP_HOST']) . $this->escape($this->baseurl); ?>/">
<link rel="stylesheet" href="_files/css/styles.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="_files/css/styles_ie.css" type="text/css" />
<![endif]-->
<script language="javascript" type="text/javascript" src="_files/js/switchpics.js"></script>
<script language="javascript" type="text/javascript" src="_files/js/dropdownnav.js"></script>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<div id="gruppenangebote">
</div>
<div id="content" align="center">
<table id="Tabelle_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="10">
			<img src="_files/images/design/A-23_01.gif" width="800" height="161" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
		    <a href="veranstaltungen/" onMouseOver="Over('1', '_files/images/design/A-23_02_active.gif');" onMouseOut="Out('1', '_files/images/design/A-23_02.gif');">
			<img id="1" src="_files/images/design/A-23_02.gif" width="140" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="#" onMouseOver="Over('2', '_files/images/design/A-23_03_active.gif');" onMouseOut="Out('2', '_files/images/design/A-23_03.gif');">
			<img id="2" src="_files/images/design/A-23_03.gif" width="102" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="about/" onMouseOver="Over('3', '_files/images/design/A-23_04_active.gif');" onMouseOut="Out('3', '_files/images/design/A-23_04.gif');">
			<img id="3" src="_files/images/design/A-23_04.gif" width="115" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="bands/" onMouseOver="Over('4', '_files/images/design/A-23_05_active.gif');" onMouseOut="Out('4', '_files/images/design/A-23_05.gif');">
			<img id="4" src="_files/images/design/A-23_05.gif" width="94" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="guestbook/" onMouseOver="Over('5', '_files/images/design/A-23_06_active.gif');" onMouseOut="Out('5', '_files/images/design/A-23_06.gif');">
			<img id="5" src="_files/images/design/A-23_06.gif" width="118" height="41" alt="">
			</a>
		</td>
		<td class="submenu">
		  <ul>
		   <li>
		    <a href="#" onMouseOver="Over('6', '_files/images/design/A-23_07_active.gif');" onMouseOut="Out('6', '_files/images/design/A-23_07.gif');">
			<img id="6" src="_files/images/design/A-23_07.gif" width="93" height="41" alt="">
			</a>
			  <ul>
			    <li><a href="newsletter/">Newsletter</a></li>
			  </ul>
		   </li>
		  </ul>
		</td>
		<td colspan="2" class="submenu">
		  <ul>
		   <li>
		     <a href="#" onMouseOver="Over('7', '_files/images/design/A-23_08_active.gif'); showNav('gruppenangebote');" onMouseOut="Out('7', '_files/images/design/A-23_08.gif'); hideNav();">
			<img id="7" src="_files/images/design/A-23_08.gif" width="138" height="41" alt="">
			</a>
			  <ul>
			    <?php foreach ($this->groupang as $ang) : ?>
				<li><a href="angebote/show/<?php echo $this->escape($ang['ang_id']); ?>"><?php echo $this->escape($ang['ang_name']); ?></li>
				<?php endforeach; ?>
			  </ul>
		   </li>
		  </ul>
		</td>
	</tr>
	<tr>
		<td colspan="2" background="_files/images/design/A-23_12.gif">
			<img src="_files/images/design/A-23_09.gif" width="4" height="277" alt=""></td>
		<td colspan="7" rowspan="3" background="_files/images/design/A-23_10.gif" width="792" height="391">
		  <?php echo $this->render($this->subtemplate); ?>
		</td>
		<td background="_files/images/design/A-23_13.gif">
			<img src="_files/images/design/A-23_11.gif" width="4" height="277" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="_files/images/design/A-23_14.gif">
			<img src="_files/images/design/A-23_12.gif" width="4" height="64" alt=""></td>
		<td background="_files/images/design/A-23_15.gif">
			<img src="_files/images/design/A-23_13.gif" width="4" height="64" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="_files/images/design/A-23_12.gif">
			<img src="_files/images/design/A-23_14.gif" width="4" height="50" alt=""></td>
		<td background="_files/images/design/A-23_13.gif">
			<img src="_files/images/design/A-23_15.gif" width="4" height="50" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="_files/images/design/A-23_16.gif" width="1" height="7" alt=""></td>
		<td colspan="9">
			<img src="_files/images/design/A-23_17.gif" width="799" height="7" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="136" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="102" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="115" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="94" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="118" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="134" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="4" height="1" alt=""></td>
	</tr>
</table>
<div>
<table>
 <tr>
  <td>
    <a href="#" class="footer">Kontakt</a> | <a href="#" class="footer">Impressum</a>
  </td>
 </tr>
 <tr>
  <td>
    Last Update: <?php echo $this->Time(); ?>
  </td>
 </tr>
</table>
</div>
</div>
</body>
</html>

so und hier die styles.css die styles_ie.css brauchste ja net die kennste ja selber :)^^:
Code:
/* NilsonCMS Standard Style */

html,input,textarea {
  font-family: Arial, Helvetica, sans-serif; font-size: 100.01%;
}
hr {
  border: none; border-top: 1px dotted; border-color:#CCCCCC;
}
h1 {
  font-size: 1.3em; margin: 0em; padding: 0em;
}
h2 {
  font-size: 1.1em; margin: 0em; padding: 0.2em;
  background-color: rgb(223, 237, 215);
}
legend {
  font-weight: bold;
  padding: 0.2em 0.4em;
}
input,textarea {
  width: 100%;
}

table {
  display:block;
}

th,td {
  vertical-align: top;
}

a {
  border:0;
  text-decoration:none;
}

img {
  border:0;
  display:block;
}

a img {
  display:block;
}

.button {
  width: auto;
}
.error {
  background-color: rgb(244, 225, 225); border: 1px solid rgb(204, 0, 0);
  padding: 0.2em; color: rgb(204, 0, 0);
}

body {
			  background-image:url(../images/design/background.gif);
}

a.footer {
  text-decoration:none;
  color:#000000;
  font-weight:bold;
  font-size:14px;
}

table.contenttable {
  width:90%;
  text-align:left;
}

div.pagnitation {
  text-align:left;
}

/* ### Tabelle 01 ### */
#Tabelle_01 {
  min-height:601px;
  height:auto !important;
  height:601px;
}

/* ### Naviagtion ### */

.submenu ul li ul {
  visibility:hidden;
  width:120px;
}

.submenu ul, .submenu ul li ul {
  list-style:none;
  padding:0;
  margin:0;
  position:absolute;
}

.submenu ul li ul li {
  text-align:left;
  text-indent:5px;
}

.submenu a:hover ul, .submenu li:hover ul {
  visibility:visible;
}

.submenu a:link, .submenu a:visited {
  display:block;
  font-size:10px;
  color:#000;
  background:#999999;
  text-decoration:none;
  width:100%;
}

.submenu a:hover {
  background:#D3D3D3;
  color:#000;
}

/* ### Guestbook ### */
div.gb_entry_head {
  background-color:#00CCFF;
  margin-top:10px;
  width:100%;
  font-size:14px;
  color:#000000;
  font-weight:bold;
  text-align:left;
}

div.gb_entry_head a img {
  display:inline;
}

div.gb_entry_text {
  background-color:#88DCF4;
  width:100%;
  font-size:10px;
  color:#000000;
  text-align:left;
}

/* ### Impressum ### */

table.im_head {
  text-align:left;
}

/* ### Veranstaltungen ### */
div.veranstaltungen_head {
background-color:#00CCFF;
  margin-top:10px;
  width:100%;
  font-size:16px;
  color:#000000;
  font-weight:bold;
  text-align:left;
}

div.veranstaltungen_main {
background-color:#88DCF4;
  width:100%;
  font-size:12px;
  color:#000000;
  text-align:left;
}

/* ### Bands ### */

div.Bands_Head {
  text-align:left;
  background-color:#00CCFF;
  margin-top:10px;
  font-size:14px;
  font-weight:bold;
}

div.Bands_Text {
  text-align:left;
  background-color:#88DCF4;
}

Hmm... das muss an der positionierung der links( images ) liegen weil wenn ich die breiten des submenus änder hat das auch keine Auswirkung :confused:

MFG Nilson
 
Ich hatte heute Morgen im td-Tag das Attribut align=left gesetzt, und beim Code-Posting ganz vergessen, es ins Stylesheet zu "exportieren".

Sorry ;)
 
Status
Nicht offen für weitere Antworten.
Zurück