• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mehrere Layer zentriert anzeigen

  • Ersteller Ersteller Gelöschtes Mitglied 3007
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
G

Gelöschtes Mitglied 3007

Guest
Hallo, ich würde gerne insgesamt 6 Layer dir ich für meine Navigation benötige zentriert am top meiner seite anzeigen.

Wenn alle die gleiche bildschirmbreite hätten währe das ja kein problem aber ich möchte hier nicht auf JavaScript zurückgreifen müssen.

habe ich also irgendeine möglichkeit dieses in CSS zu realisieren?

Die Layer müssen übrigens auch solche sein da ich sie ein und ausblenden lasse. im anhang hab ich mein jetztiges script. :)

MFG Miah
 

Anhänge

wenn ich das richtig verstehe, möchtest du dieses div mit der liste zentrieren?

dann gib diesem div mit style oder im css margin:0 auto;


möchtest du mehrere dieser divs nebeneinander angeortnet zentrieren, dann mach ein div um diese divs und gib dem margin:0 auto;
 
Hier gehts um Layer und ich kann keine Layer aneinander ausrichten da diese sich gegenseitig ignorieren ;)

Zudem kann man einen Layer auch nicht mittels myrgin: 0px auto; zentrieren ^^

Wenn die lösung so einfach währe würde ich hier doch nicht fragen :P
 
lesen soll gelernt sein:smile:
von layer hab ich auch schon was gehört und jetzt ist mir gerade bewusst geworden, was man mit dem meint:lol:
also eine möglichkeit wäre wenn du eine tabelle nimmst(ich finde fürs layout tabellen schei...)dieser ein paar sachen sagst und dann klappts. zumindest in ff und ie6 und nur mit den 2menues und ohne content:?:

HTML: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/JavaScript">
<!--

var picheight = 20;
var men = new Array();
var h = new Array();

function hide(id)
{
    h[id] = true;
    x = document.getElementById("menue"+id);
    a = (x.offsetHeight + 2) * -1;
    a = a + picheight;
    if(x.offsetTop != a)
    {
        subs = 5;
        if((x.offsetTop - subs) < a)
        {
            x.style.top = a;
            h[id] = false;
        }
        else
        {
            x.style.top = x.offsetTop - subs;
            setTimeout("hide("+id+")", 10);
            if(x.offsetTop == a){ h[id] = false; }
        }
    }
}

function show(id, set)
{
    clearTimeout(men[id]);
    men[id] = setTimeout("hide("+id+", false)", 2000);
    
    x = document.getElementById("menue"+id);
    if(x.offsetTop != 0 && h[id] != true)
    {
        add = 5;
        if((x.offsetTop + add) > 0)
        {
            x.style.top = 0;
        }
        else
        {
            x.style.top = x.offsetTop + add;
            setTimeout("show("+id+", false)", 10);
        }
    }
}

function start(id)
{
    x = document.getElementById("menue"+id);
    a = (x.offsetHeight + 2) * -1;
    a = a + picheight;
    x.style.top = a;
}
//-->
</script>
<style type="text/css">
* {margin:0;padding:0;}
body {width:100%;}
</style>
</head>

<body>
<table style="table-layout:fixed;width:100%;position:relative;z-index:0;">
<tr>
<td style=""></td>
<td style="width:200px;"><div id="menue1" style="color: red; position:absolute; text-align:center; width:200px; z-index:1; background-color: #0033FF; border: 1px solid #000000;">
  <ul style="margin: 0px;">
    <li>Hallo</li>
    <li>Na</li>
    <li><a href="#" onmouseover="show(1)" style="color: red;">testlink</a></li>
  </ul>
</div>

</td>
<td style="width:200px;"><div id="menue2" style="color: red; position:absolute; text-align:center; width:200px; z-index:1; background-color: #0033FF; border: 1px solid #000000;">
  <ul style="margin: 0px;">
    <li>bello</li>
    <li>Na</li>
    <li><a href="#" onmouseover="show(2)" style="color: red;">testlink</a></li>
  </ul>
</div></td>
<td></td>
</tr></table>



<script type="text/JavaScript">
<!--
start(1);
start(2);
//-->
</script>
</body>
</html>

wenn du drei spalten nimmst, musst du der mittleren pos:relative geben die breite dem bedarf anpassen und mit left der abstand angeben
 
ich hab nun nach langem googeln eingesehen das ich es nur mit JS lösen kann und habe es mit volgender formel in der funktion start gelöst

Code: 
function start(id)
{
    b = document.body.offsetWidth;
    
    x = document.getElementById("menue"+id);
    
    a = (x.offsetHeight + 2) * -1;
    a = a + picheight;
    x.style.top = a;
    
    // <<
    w = b / 2 - boxen * boxwidth / 2 + id * boxwidth + id + 1
    x.style.left = w;
    // >>
}

dabei ist
b = innere breite des bildschirms
boxwidth = breite der boxen
boxen = anzahl der boxen

und ich habe die ids nun von 0 aufwähts anstadt von 1 aufwärts

trotsdem danke für deine mühen :) ^^
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben