Hilfe beim Design

[awardfan]

Das "hinter dem Inhaltsbereich" kannst du ändern, in dem du die z-index-Eigenschaft ergänzt

Code: Alles auswählen

#menu li {
    position: relative;
    z-index: 9999;
}

[moni]

Hier hab ich die leiste geholt
http://www.javarea.de/index.php3?openca ... ion&id=470

http://www.javarea.de/include/showspf.p ... emo&id=470

dann schnell eingebaut ohne den css zu verändern ,Nachhinein ist mir aufgefallen das ich den alten css ( von die erste leiste )nicht weggemacht habe, und als neben Effekt hat die neue leiste automatisch einen farblichen Gestalt bekommen

[moni]

Hallo Michael...
mich hat es nicht in die ruhe gelassen und einiges raus gefunden ..
erstens hab ich mit einen navi Generator eine leiste erstellt ..
http://www.hypergurl.com/generators/menutree.html
dann die leiste gestaltet ...und zum Schluss eingebaut ...
http://blicke.npage.de/untermenue/navi-leiste.html ...

leider bei deinen Lighbox Version hat die Galerie nicht funktioniert ,von da gesehen hab ich einfach an meins was ich an Blicke 1 mal installiert habe angebunden .. und auch ein bisschen an den css gefummelt ...wollte raus finden ob es möglich ist den farblich zu ändern ....

und das gute ist : es läuft das ganze ...

was man machen muss ist das Facebook Skript richtig einbauen das der nicht raus springt und die leiste nach Wunsch gestalten uns positionieren ... eben fein Arbeit ...

Falls du Interesse hast hier das Code für die leiste ...

Code: Alles auswählen

<!--Generated by SearchBliss.com : Free Scripts & Webmaster Resources-->
  <style type="text/css">
  .SubItemRow{
         background-color:#009800 ;  /* Untermenü */
     }

    .SubItem a{
      background-color: #FFFFFF;
      height: 30px;
      font-weight: bold;
      width: 100%;
      color: #009800;
      border: 1px solid #009800;
      text-decoration: none;
       padding-left: 8px;
        display: block;

    }
    .SubItem a:hover{
        background-color: #009800;
        color: #FFFFFF;
         width: 100%;
           border: 1px solid #009800;
    }
    /* Thema */
  .Item{
      background-color: #CCCC00;

  }
  .Item a{
      background-color: #009800;
      height: 30px;
      color: #FFFFFF;
      font-weight: bold;
      line-height: 28px;
      text-decoration: none;
      font-size: 16px;
 width: 100%;
      padding-left: 8px;
       display: block;
         border: 1px solid #009800;
  }
  .Item a:hover{
      background-color: #FFFFFF;
      color: #009800;
      border: 1px solid #009800;

  }

</style>


<script language=JavaScript>
<!--
content = new Array ();

content [0] = new Array (
false,
new Array('sub_0_1','sub_0_2','sub_0_3')
);
content [1] = new Array (
false,
new Array('sub_1_1','sub_1_2','sub_1_3')
);
content [2] = new Array (
false,
new Array('sub_2_1','sub_2_2','sub_2_3')
);
content [3] = new Array (
false,
new Array('sub_3_1','sub_3_2','sub_3_3')
);
isOPERA = (navigator.userAgent.indexOf('Opera') >= 0)? true : false;
isIE    = (document.all && !isOPERA)? true : false;
isDOM   = (document.getElementById && !isIE && !isOPERA)? true : false;

function processTree (id)
{
	if (content [id][0])
	{
		for (i = 0; i < content [id][1].length; i++)
			hide (content [id][1][i]);

		content [id][0] = false;
	}
	else
	{
		for (i = 0; i < content [id][1].length; i++)
			show (content [id][1][i], 'table-row');

		content [id][0] = true;
	}

	return false;
}

function show (id, displayValue)
{
	if (isDOM)
		document.getElementById(id).style.display = (displayValue)? displayValue : "block";
	else if (isIE)
		document.all[id].style.display = "block";
}

function hide (id)
{
	if (isDOM)
		document.getElementById(id).style.display = "none";
	else if (isIE)
		document.all[id].style.display = "none";
}
if (isDOM || isIE)
{
	document.writeln('<style type="text/css">');
	document.writeln('.SubItemRow \{ display: none; \}');
	document.writeln('</style>');
}

// -->
</script>

   <!--Paste code above inbetween your head tags-->
<!--Paste code below inbetween your body tags-->
<table width=150 height=40 border=0 cellpadding=0 cellspacing=1>
  <tr>
    <td width=1  class=Item>+</td>
    <td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (0); return false;">Thema1</a></td>
</tr>
<tr id='sub_0_1' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr id='sub_0_2' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr id='sub_0_3' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr>
    <td width=1 class=Item>+</td>
    <td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (1); return false;">Thema2</a></td>
</tr>
<tr id='sub_1_1' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr id='sub_1_2' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr id='sub_1_3' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr>
    <td width=1 class=Item>+</td>
    <td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (2); return false;">Thema 3</a></td>
</tr>
<tr id='sub_2_1' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">Link</a></td>
</tr>
<tr id='sub_2_2' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">link</a></td>
</tr>
<tr id='sub_2_3' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">Link</a></td>
</tr>
<tr>
    <td width=10 class=Item>+</td>
    <td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (3); return false;">Thema 4</a></td>
</tr>
<tr id='sub_3_1' class=SubItemRow>
    <td width=1>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">Link</a></td>
</tr>
<tr id='sub_3_2' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">Link</a></td>
</tr>
<tr id='sub_3_3' class=SubItemRow>
    <td width=10>&nbsp;</td>
    <td width=149 height=20 class=SubItem><a href="">Link</a></td>
</tr>
</table>

[npage-user]

Danke, Moni! Werde bei Zeit dann mal dran basteln. Die Lightbox muss ich dann halt umstellen, wenn die Prototype.js jede andere Javascript-Datei irgendwie blockiert (Wird zwar wahrscheinlich nicht leicht, weil ich die Datei bei jeder Galerie mit im Quellcode verlinkt hab und dann austauschen muss, aber es muss wohl gemacht werden).

[moni]

Bitte ...habe auch für mich selbst gemacht weil suchte auch eine Leiste was nach unten läuft .
Habe auch noch vor sie etwas zu optimieren ,und das html Teil ein wenig anders gestalten ,so das kein rot in den quelltest zu sehen ist ....dazu auch ein paar links einzufügen was keine unternenu haben

Ich abrufe mein Lighbox immer per <div class="Lighbox">ab.

[npage-user]

Im Moment stellt sich mir wieder mal eine Frage. Und zwar habe ich das Design diesmal ja für mobile Webseiten optimiert. Das klappt auch sowwit wunderbar, wenn ich das Browserfenster verkleinere oder online einen Smartphone-Simulator nutze, der mir anzeigt, wie die Seite auf dem Smartphone aussieht.

Aber sobald ich die Seite dann auf meinem Smartphone aufrufe, erscheint die Desktopversion? Warum denn das? Ich habe im Stylesheet doch angegeben, dass der Inhaltsbereich bei Auflösungen unter 800 Pixeln Breite 95 % annehmen soll und welche Elemente ganz verschwinden sollen usw.. Und warum funktioniert das bei den Online-Simulator, nicht aber auf dem Smartphone (Samsung Galaxy S2)???

Seite: http://weissmic.npage.de

[npage-user]

Ok, dann mal anders gefragt: Liegt das an einer Einstellung im Code oder am Smartphone?

[Jasko]

warscheinlich liegt es am code, bei mit funktioniert es auvh nicht am smartphone. reines html5 und css können leider noch nicht sicherstellen das es mit dem mobilen style klappt.

mfg

[thaileben]

Ich habe bei meinen Seiten den code drin vielleicht bringt der bei dir auch was denn so funzt es auch auf smartphon/Tablets

Code: Alles auswählen

<meta name="viewport" content="width=1024" />

Jürg

[npage-user]

Ich habe bei meinen Seiten den code drin vielleicht bringt der bei dir auch was denn so funzt es auch auf smartphon/Tablets

Code: Alles auswählen

<meta name="viewport" content="width=1024" />

Jürg

Danke Jürg, zumiondest werden jetzt die richtigen Elemente ausgeblendet. Die Schrift ist allerdings komischerweise immer noch so verhältnismäßig klein, dass das Lesen recht schwierig ist.

Es sei noch erwähnt, dass ich jetzt auf eine Testseite auf der Haupthomepage umgezogen bin und dort weiterarbeite: http://www.holidaypark-uptodate.de/expe ... -test.html.