Install the app
How to install the app on iOS
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
✔ Padding Problem in CSS Menü nur im IE
- Themenstarter akdesign
- Beginndatum
M
Maik
Sorry, wenn dir die Browser dein bestehendes Layout mit der (X)HTML-Variante "Strict" im standardkonformen Modus auseinanderreißen, hast du nicht "standardkonform" entwickelt, und beispielsweise nicht das Box-Modell beachtet.
mfg Maik
mfg Maik
M
Maik
Fakt ist, dass mit der in der Schichtposition darunterliegenden Tabelle etwas nicht koscher ist, und in dieser Art der Verwendung (die Seiteninhalte liegen in der Schichtposition über ihr) wohl dem IE im Wege ist.
Mal abgesehen davon, dass Tabellen semantisch überhaupt nicht als "Gestaltungselement" einer Website dienen, sondern um Daten in tabellarischer Form auszuzeichnen / auszugeben, wieso notierst du eigentlich die Seitenbereiche im Markup vor der Tabelle, anstatt sie darin einzubetten?
Im Falle deines Menüs wäre es diese "angedachte" Tabellenzelle:
Das <img>-Element gibst du dann stattdessen als Hintergrundbild für diese Zelle an.
mfg Maik
Mal abgesehen davon, dass Tabellen semantisch überhaupt nicht als "Gestaltungselement" einer Website dienen, sondern um Daten in tabellarischer Form auszuzeichnen / auszugeben, wieso notierst du eigentlich die Seitenbereiche im Markup vor der Tabelle, anstatt sie darin einzubetten?
Im Falle deines Menüs wäre es diese "angedachte" Tabellenzelle:
HTML:
<td><img src="./images/menueleiste.gif" name="menueleiste" width="920" height="27" id="menueleiste" /></td>mfg Maik
So, jetzt hab ich das Menü soweit hinbekommen und schon taucht das nächste Problem auf.
Wie bekomme ich es hin, dass das Untermenü aller Hauptmenüpunkte immer ganz links ausgerichtet ist?
Also so:
Menü 1 | Menü 2 | Menü 3
Untermenü 2 | Untermenü 2 etc.
und nicht so wie aktuell:
Menü 1 | Menü 2 | Menü 3
Hier das CSS:
und das html:
Wie bekomme ich es hin, dass das Untermenü aller Hauptmenüpunkte immer ganz links ausgerichtet ist?
Also so:
Menü 1 | Menü 2 | Menü 3
Untermenü 2 | Untermenü 2 etc.
und nicht so wie aktuell:
Menü 1 | Menü 2 | Menü 3
Untermenü 2 | Untermenü 2 etc.
Hier das CSS:
Code:
/* CSS Document */
ul#Navigation {
margin: 0; padding: 0;
}
ul#Navigation li {
list-style: none;
float: left;
margin: 0; padding: 0;
}
ul#Navigation li ul {
margin: 0; padding-left: 0;
position: absolute;
display: none; /* Unternavigation ausblenden */
border-top: solid;
border-top-width: 15px;
border-top-color: transparent;
height: 50px;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
width: auto;
margin: 0; padding: 0;
}
ul#Navigation a{
font-family:Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
display: block;
width: auto; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0px;
text-decoration: none;
color: #ffffff;
}
ul#Navigation li ul a{
font-family:Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
display: block;
width: auto; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0px;
text-decoration: none;
color: #ffffff;
}
ul#Navigation a:hover{
color: #990000;
}und das html:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Andrea Keßler - freie Grafikdesignerin/Freelancer in Freiburg. Keßler.CreativDesign entwickelt und konzipiert Ihnen anspruchsvolles Design für alle klassischen Printmedien sowie für Webdesign.">
<meta name="Keywords" content="Andrea Keßler, Kessler, Kessler Design, Kessler Grafik Design, Grafik, Design, Designer, Grafikdesigner, Grafik-Design, Webdesign, Print, Layout, gestalten, Broschüren, Flyer, Poster, Verpackungen, Packaging, Verpackungsgestaltung, Werbung, Komposings, Kommunikation, Visitenkarten, Newsletter, Art Director, Freiburg, international, grenznah">
<meta name="revisit-after" content="7 days" >
<meta http-equiv="reply-to" content="a.kessler@kessler-creativdesign.de">
<meta name="author" content="Keßler.CreativDesign" >
<meta name="language" content="de">
<meta name="publisher" content="Keßler.CreativDesign">
<meta name="copyright" content="Keßler.CreativDesign">
<meta name="audience" content="Alle">
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="false">
<meta name="author" content="Keßler.CreativDesign - Andrea Keßler">
<title>Keßler.CreativDesign – Grafik- und Webdesign</title>
<link href="lacanche.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function P7_Snap() { //v2.67 by PVII
var g,x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,tw,q0,xx,yy,w1,pa='px',args=P7_Snap.arguments;a=parseInt(a);
if(document.layers||window.opera){pa='';}for(k=0;k<(args.length);k+=4){
if((g=MM_findObj(args[k]))!=null){if((el=MM_findObj(args[k+1]))!=null){
a=parseInt(args[k+2]);b=parseInt(args[k+3]);x=0;y=0;ox=0;oy=0;p="";tx=1;
da="document.all['"+args[k]+"']";if(document.getElementById){
d="document.getElementsByName('"+args[k]+"')[0]";if(!eval(d)){
d="document.getElementById('"+args[k]+"')";if(!eval(d)){d=da;}}
}else if(document.all){d=da;}if(document.all||document.getElementById){while(tx==1){
p+=".offsetParent";if(eval(d+p)){x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
}else{tx=0;}}ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);tw=x+ox+y+oy;
if(tw==0||(navigator.appVersion.indexOf("MSIE 4")>-1&&navigator.appVersion.indexOf("Mac")>-1)){
ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);}else{
w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
x=document.body.scrollLeft+event.clientX+bx;y=document.body.scrollTop+event.clientY;}}
}else if(document.layers){x=g.x;y=g.y;q0=document.layers,dd="";for(var s=0;s<q0.length;s++){
dd='document.'+q0[s].name;if(eval(dd+'.document.'+args[k])){x+=eval(dd+'.left');y+=eval(dd+'.top');
break;}}}e=(document.layers)?el:el.style;xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);}
e.left=xx+pa;e.top=yy+pa;}}}
}
//-->
</script>
</head>
<body bgcolor="#62768b" onLoad="MM_showHideLayers('impressum','','show');
P7_Snap('menueleiste','menu',15,6);P7_Snap('menueleiste','impressum',770,0)"
onResize="P7_Snap('menueleiste','menu',15,6);P7_Snap('menueleiste','impressum',770,0)">
<div id="menu">
<ul id="Navigation">
<li><a href="#Beispiel">Broschüren</a>
<ul>
<li><a href="#Beispiel">Zander </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Lacanche </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Sto </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Werkhaus </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Frischemärkte Baur </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Peschot</a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Rietho </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Wurth </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> EDEKA Schmidt's Märkte </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Maschinenbau von Briel </a></li>
</ul>
</li>
<li class="linie"> | </li>
<li><a href="#Beispiel">Webdesign</a>
<ul>
<li><a href="#Beispiel">HOPE </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Kuhrt </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Groupama </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Maschinenbau von Briel </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> SMZ Maschinenbau </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> epoMed</a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Wasserfallgemeinde Krimml </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Alina Kerste Immobilien </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Zahnarztpraxis Bad Krozingen </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> XXL Restaurant Zapfwerk </a></li>
<li class="linie"> | </li>
<li><a href="#Beispiel"> Praxis Kleimann </a></li>
</ul>
</li>
<li class="linie"> | </li>
<li><a href="#Beispiel">Packaging</a></li>
<li class="linie"> | </li>
<li><a id="aktuell" href="#Beispiel">Anzeigen</a>
<ul>
<li><a href="#Beispiel">Seite 4a </a></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
</ul>
</div>
<div id="impressum">
<a href="mailto: a.kessler@kessler-creativdesign.de" class="menupunkt">Kontakt</a> <span class="linie">|</span> <a href="impressum.html" class="menupunkt">Impressum</a></span></div>
<tr>
<td align="center" valign="middle">
<tr>
<table width="900" style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
<tr>
<td align="center" valign="middle"><table width="920" height="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.tutorials.de/forum/images/logo.gif" width="920" height="70" /></td>
</tr>
<tr>
<td><img src="http://www.tutorials.de/forum/images/leiste_oben.gif" width="920" height="24"></td>
</tr>
<tr>
<td><img src="http://www.tutorials.de/forum/images/content.jpg" name="content" width="920" height="451" id="content"></td>
</tr>
<tr>
<td><img src="http://www.tutorials.de/forum/images/menueleiste.gif" name="menueleiste" width="920" height="27" id="menueleiste" /></td>
</tr>
<tr>
<td><img src="http://www.tutorials.de/forum/images/unten.gif" width="920" height="28" border="0" usemap="#Map" /></td>
</tr>
</table>
</td></tr></table>
<map name="Map"><area shape="rect" coords="2,3,912,25" href="#"></map></body>
</html>
Zuletzt bearbeitet:
M
Maik
Hi.
mfg Maik
Indem für das <ul>-Element der zweiten Menüebene mit der left-Eigenschaft die gewünschte Startposition festgelegt wird.Wie bekomme ich es hin, dass das Untermenü aller Hauptmenüpunkte immer ganz links ausgerichtet ist?
mfg Maik
Ja schon, so dachte ich mir das auch, aber dann tuts mir ja das Untermenü des 1. Hauptmenüpunktes genauso verschieben. Und der ist ja richtig linksbündig.
Habs grade mal noch online gestellt:
http://kessler-creativdesign.de/neu/lacanche.html
Habs grade mal noch online gestellt:
http://kessler-creativdesign.de/neu/lacanche.html
M
Maik
Wohin soll denn deiner Meinung nach das Untermenü des ersten Menüpunktes verschoben werden, wenn left:0 gilt?
mfg Maik
mfg Maik
Wenn ich left z.B. -90 eingebe, ist dann zwar das Untermenü vom 2 Hauptmenüpunkt ok, aber dann eben das des 1. Hauptmenüpunktes falsch. Und die anderen sind ja auch nur um die 90 ausgerichtet, aber nicht links am Rand.
Siehe hier:
http://kessler-creativdesign.de/neu/lacanche.html
Siehe hier:
http://kessler-creativdesign.de/neu/lacanche.html
