✔ DIV-Overlay verschiebt Layout

Status
Nicht offen für weitere Antworten.
Ich krame den Thread mal wieder aus, ich hoffe das ist okay. :)

Ich habe nochmal ein kleines Problem. Ich hätte gerne das untherhalb des/eines Linkhoovers ein schwarzer Balken dargestellt wird. Das geht auch soweit, allerdings hätte ich gern das dieser Balken sich über die komplette Breite des DIV-Containers streckt.

Das allerdings ist mir bisher nur mit display:block; gelungen. Allerdings ist dieser Block einfach zu hoch, so das er jedesmal alles von sich schiebt. Gibt es eine andere Möglichkeit? Ich habe mich bei selfHTML gerkundigt, aber so wirklich habe ich auch dort nicht das Richtige gefunden, oder ich hab es nicht verstanden. :) Kann ich den Block irgendwie formatieren?

Das ist der momentane Code:

Code: 
/* Topbar link */
.mainlevel {
}
/* Hauptmenu */
a:link.mainlevel, a:visited.mainlevel {
    line-height : 15px;
    color : #FFFFFF; 
    text-decoration    : none;
    text-indent    : font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Arial;
    padding-left:10px;
}
/* Hauptmenu Hoover */
a:hover.mainlevel {
    display:block;
    font-weight    : normal;
    color : #FFFFFF;
    background-color:#000000; 
    line-height:15px;    
    text-decoration    : none;
    padding-left:20px;
}

Vielen Dank für eure Hilfe!

Grüße vom,

Genesyst
 
Auch das bekommen wir in den Griff, indem die Links mit der display:block-Eigenschaft ausgezeichnet werden ;)

Code: 
a.mainlevel:link, a.mainlevel:visited {
        line-height : 15px;
        color : #FFFFFF;
        text-decoration        : none;
        text-indent        : font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Arial;
        padding-left:10px;
        display:block;
}
/* Hauptmenu Hoover */
a.mainlevel:hover {
        display:block;
        font-weight        : normal;
        color : #FFFFFF;
        background-color:#000000;
        line-height:15px;
        text-decoration        : none;
        padding-left:20px;
}
Im Markup entfällt dann das <br>-Tag
Code: 
<div>
     <a href="#" target="_self" class="mainlevel">Testlink</a>
     <a href="#" target="_self" class="mainlevel">Testlink2</a>
     <a href="#" target="_self" class="mainlevel">Testlink3</a>
</div>
Anmerkung: Bei den Links wird zunächst die Klasse (oder ID) und anschliessend die Pseudoklasse genannt:

Code: 
a.Klassenname:link, a.Klassenname:visited { }
a.Klassenname:hover { }
 
Ich kann dir gar nicht genug danken! Fühl dich zumindest virtuell zu einem Bier, oder einem Getränk deiner Wahl eingeladen. Man sollte dich wirklich zum Mod machen... ach halt...

Anyway, bei sowas merke ich immer recht fix wie beschränkt doch meine fachliche Kompetenz ist. Andersrum, nur so kann man lernen. :)

Also hab nochmals vielen Dank.

Grüße vom,

Genesyst
 
Kein Problem, ich hab gerne weitergeholfen. :)

Das virtuelle Bier kannst du mir auch durch eine positive Bewertung einer meiner Beiträge kredenzen, indem du auf das zweite Icon von links mit der Waage klickst. ;)

P.S. Zum Mod wurde ich schon zu Jahresbeginn 2006 befördert - siehe mein Benutzertitel :-)
 
Ich muss euch/dich mal wieder belästigen, aber ich bin da leider vollkommen überfordert, und da ich hier bisher so unglaublich gute Hilfe bekommen habe.

Der ganze "Kram" funktioniert mittlerweile wunderbar. Die Links sind provisiorisch eingefügt, und das Ausrichten, etc hat wunderbar geklappt. Allerdings musste ich fest stellen das die Leiste im IE 6 und 7 nicht reagiert. Ich bin mir auch nicht sicher woran es liegen könnte. Zwei Ideen hätte ich: irgendwas im Head beim DOCTYPE, etc ist falsch, oder der IE kommt mit dem Script nicht klar.

Hier nochmal der Link: Link

Vielen dank mal wieder, so langsam bekomme ich n schlechtes Gewissen...

Grüße, und einen schönen Abend,

Genesysthttp://www.sternengarde.de/star/test.php
 
Hi,

das Problem im IE ist die mangelnde Unterstützung der Tabellenwerte für die display-Eigenschaft.

Ich hab daher mal die Klasse .td mit float:left ausgezeichnet, um die DIVs nebeneinander anzuordnen, womit die beiden DIVs .table und .tr in der NavBar wegfallen, und die Breite der beiden umschliessenden DIVs von 974 auf 980px erhöht, sowie im zweiten DIV noch background-repeat:no-repeat hinzugefügt, damit das Hintergrundbild nicht um 6px wiederholt wird.

Nun läuft's auch im IE 6 und 7. ;)

Hier der überarbeitete Quellcode:

Code: 
<!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" />
<title>Ver 2 Sternengarde - NavBar-Test</title>
<style type="text/css">
div.td { float:left; }
.tooltip {
position:absolute;
z-index:10;
display:none;
}
.tooltipbg{
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
border-left:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #ff7800;
width:150px;
height:170px;
background-color:#4b1515;
}
.tooltipbg2{
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
border-right:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
width:150px;
height:170px;
background-color:#4b1515;
}
.tooltipbg3{
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
border-left:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #ff7800;
width:150px;
height:300px;
background-color:#4b1515;
}
.tooltipbg4{
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
border-right:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
width:150px;
height:300px;
background-color:#4b1515;
}
.tooltipbg5{
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
border-left:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
width:150px;
height:300px;
background-color:#4b1515;
}
.padding{
padding:5px;
}
.padding2{
padding-top: 5px;
padding-left:5px;
}
.padding3{
padding-left:5px;
}
.headline{
font-family:Arial;
color:#ff7800;
font-size:12px;
padding-left:10px;
font-weight:normal;
font-style:normal;
font-variant:normal;
padding-bottom:5px;
}
body {
        background-color: #5C4C3D;
}
/* Topbar link */
.mainlevel {
}
/* Hauptmenu */
a.mainlevel:link, a.mainlevel:visited {
        line-height : 13px;
        color : #FFFFFF;
        text-decoration : none;
        text-indent : font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Arial;
        padding-left : 10px;
        display : block;
}
/* Hauptmenu Hoover */
a.mainlevel:hover {
        display : block;
        font-weight : normal;
        color : #FFFFFF;
        background-color : #000000;
        line-height : 13px;
        text-decoration : none;
        padding-left : 20px;
}
.statistik {
        line-height : 13px;
        color : #97e11b;
        text-indent : font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Arial;
        padding-left : 10px;
}
</style>
<script language="javascript" type="text/javascript">
  <!--
var hTimer;
tip = null;

function showTip(e, id) {
  if(hTimer) window.clearTimeout(hTimer);

  if(tip == null || (tip != document.getElementById(id))){
    if(tip != null) tip.style.display = "none";

    tip = document.getElementById(id);
    tip.style.display = "block";
  }
}

function hideTip() {
  hTimer = window.setTimeout("tip.style.display = 'none'; tip=null;", 500);
}
//-->
</script>
</head>
<body style="margin:0px;">
<!-- Rahmendiv Start -->
<div style="width:980px; overflow:hidden; margin: 0 auto 0 auto;">
<!-- Rahmendiv Start -->
<!-- Navbar BG Start -->
<div style="background-image:url(orig/topbar.jpg); background-repeat:no-repeat; width:980px; height:28px;">
<!-- Navbar BG Start -->
<div class="td"><img src="orig/left.jpg" width="14" height="28"></div>
<!-- Sternengardemenu Start -->
<div class="td"><div onmouseout="hideTip();" onmouseover="showTip(event, 'id_1');"><img src="orig/sg.jpg" width="96" height="28"></div></div>
<!-- Sternengardemenu Ende -->
<div class="td"><img src="orig/projekte.jpg"></div>
<!-- Vanguardmenu Start -->
<div class="td"><div onmouseout="hideTip();" onmouseover="showTip(event, 'id_2');"><img src="orig/vg.jpg" width="96" height="28"></div></div>
<!-- Vanguardmenu Ende -->
<div class="td"><img src="orig/mid1.jpg"></div>
<!-- Warhammermenu Start -->
<div class="td"><div onmouseout="hideTip();" onmouseover="showTip(event, 'id_3');"><img src="orig/war.jpg" width="96" height="28"></div></div>
<!-- Warhammermenu Ende -->
<div class="td"><img src="orig/mid2.jpg"></div>
<!-- Midgardmenu Start -->
<div class="td"><div onmouseout="hideTip();" onmouseover="showTip(event, 'id_4');"><img src="orig/mo.jpg" width="96" height="28"></div></div>
<!-- Midgardmenu Ende -->
<div class="td"><img src="orig/mid3.jpg"></div>
<!-- Forenmenu Start -->
<div class="td"><div onmouseout="hideTip();" onmouseover="showTip(event, 'id_5');"><img src="orig/forum.jpg" width="96" height="28"></div></div>
<!-- Forenmenu Ende -->
<div class="td"><img src="orig/mid4.jpg"></div>
<!-- Mediamenu Start -->
<div class="td"><div onmouseout="hideTip();" onmouseover="showTip(event, 'id_6');"><img src="orig/mt.jpg" width="96" height="28"></div></div>
<!-- Mediamenu Ende -->
<div class="td"><img src="orig/right.jpg"></div>
</div>
<!-- Infobox Sternengardemenu ID1 Start -->
<div id="id_1" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_1');" style="margin-top:0px; margin-left:10px;">
<div class="table">
<div class="tr">
<div class="td">
<div class="tooltipbg"><div class="headline"><br /><u>Hauptmenu</u></div><div class="padding"><a href="#" target="_self" class="mainlevel">Gildenregeln</a><a href="#" target="_self" class="mainlevel">Organisation</a><a href="#" target="_self" class="mainlevel">Konzept</a><br /><a href="#" target="_self" class="mainlevel">Mitglieder</a><a href="#" target="_self" class="mainlevel">Interviews</a><a href="#" target="_self" class="mainlevel">Bewerben</a></div></div>
</div>
<div class="td">
<div class="tooltipbg2"><div class="headline"><br /><u>Kommunikation</u></div><div class="padding"><a href="#" target="_self" class="mainlevel">IR-Chat (IRC)</a><a href="#" target="_self" class="mainlevel">Teamspeak</a><a href="#" target="_self" class="mainlevel">Forum</a><div class="headline"><br /><u>Information</u></div><a href="#" target="_self" class="mainlevel">Kontakt</a><a href="#" target="_self" class="mainlevel">Impressum</a></div></div>
</div>
</div>
</div>
</div>
<!-- Infobox Sternengardemenu Ende -->
<!-- Infobox Vanguardmenu ID2 Start -->
<div id="id_2" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_2');" style="margin-top:0px; margin-left:140px;">
<div class="table">
<div class="tr">
<div class="td">
<div class="tooltipbg3"><div class="headline"><br /><u>Projektinfos</u></div><div class="padding"><a href="#" target="_self" class="mainlevel">Einleitung</a><a href="#" target="_self" class="mainlevel">Mitglieder</a><a href="#" target="_self" class="mainlevel">Bewerben</a><div class="headline"><br /><u>Söldnersystem</u></div><a href="#" target="_self" class="mainlevel">Erklärung</a><a href="#" target="_self" class="mainlevel">Söldner anheuern</a><div class="headline"><u><br />Sonstiges</u></div><a href="#" target="_self" class="mainlevel">Struktur</a><a href="#" target="_self" class="mainlevel">Geschichte</a><a href="#" target="_self" class="mainlevel">Handwerker</a></div></div>
</div>
<div class="td">
<div class="tooltipbg4"><div class="headline"><br /><u>Statistik</u></div><div class="padding2"><span class="statistik">Mitglieder: 7</span></div><div class="padding3"><span class="statistik">Anwärter: 0</span></div><br /><div class="padding3"><span class="statistik">Söldner: 3</span></div><br /><div class="padding3"><span class="statistik">Aufnahmestop: <strong>Nein</strong></span></div></div>
</div>
</div>
</div>
</div>
<!-- Infobox Vanguardmenu Ende -->
<!-- Infobox Warhammermenu ID3 Start -->
<div id="id_3" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_3');" style="margin-top:0px; margin-left:245px;">
<div class="table">
<div class="tr">
<div class="td">
<div class="tooltipbg3"><div class="headline"><br /><u>Projektinfos</u></div><div class="padding"><a href="#" target="_self" class="mainlevel">Einleitung</a><a href="#" target="_self" class="mainlevel">Mitglieder</a><a href="#" target="_self" class="mainlevel">Bewerben</a><div class="headline"><br /><u>Klansystem</u></div><a href="#" target="_self" class="mainlevel">Klanübersicht</a><a href="#" target="_self" class="mainlevel">Klanerklärung</a><div class="headline"><u><br />Organisation</u></div><a href="#" target="_self" class="mainlevel">Orden</a><a href="#" target="_self" class="mainlevel">Struktur</a><a href="#" target="_self" class="mainlevel">Zusatzregeln</a><div class="headline"><u><br />Sonstiges</u></div><a href="#" target="_self" class="mainlevel">Geschichte</a><a href="#" target="_self" class="mainlevel">Charaktergeschichten</a><a href="#" target="_self" class="mainlevel">Guides/Artikel</a></div></div>
</div>
<div class="td">
<div class="tooltipbg4"><div class="headline"><br /><u>Statistik</u></div><div class="padding2"><span class="statistik">Mitglieder: 15</span></div><div class="padding3"><span class="statistik">Anwärter: 2</span></div><br /><div class="padding3"><span class="statistik">Neuester Anwärter: Alrik</span></div><br /><div class="padding3"><span class="statistik">Zwerge: 0</span></div><div class="padding3"><span class="statistik">Menschen: 0</span></div><div class="padding3"><span class="statistik">Hochelfen: 0</span></div><br /><div class="padding3"><span class="statistik">Aufnahmestop: <strong>Nein</strong></span></div></div>
</div>
</div>
</div>
</div>
<!-- Infobox Warhammermenu Ende -->
<!-- Infobox Midardmenu ID4 Start -->
<div id="id_4" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_4');" style="margin-top:0px; margin-left:347px;">
<div class="table">
<div class="tr">
<div class="td">
<div class="tooltipbg3"><div class="headline"><br /><u>Projektinfos</u></div></div>
</div>
<div class="td">
<div class="tooltipbg4"><div class="headline"><br /><u>Statistik</u></div></div>
</div>
</div>
</div>
</div>
<!-- Infobox Midgardmenu Ende -->
<!-- Infobox Forenmenu ID5 Start -->
<div id="id_5" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_5');" style="margin-top:0px; margin-left:655px;">
<div class="table">
<div class="tr">
<div class="td">
<div class="tooltipbg3"><div class="headline"><br /><u>Allgemeines</u></div><div class="padding"><a href="#" target="_self" class="mainlevel">Neuigkeiten</a><div class="headline"><br /><u>Klansystem</u></div><a href="#" target="_self" class="mainlevel">Projektforen</a><a href="#" target="_self" class="mainlevel">Vanguard</a><a href="#" target="_self" class="mainlevel">Warhammer Online</a><a href="#" target="_self" class="mainlevel">Midgard Online</a><a href="#" target="_self" class="mainlevel">Guild Wars</a><div class="headline"><u><br />Sonstige</u></div><a href="#" target="_self" class="mainlevel">Bewerberforen</a><a href="#" target="_self" class="mainlevel">Events</a><a href="#" target="_self" class="mainlevel">Rollenspiel</a></div></div>
</div>
<div class="td">
<div class="tooltipbg4"><div class="headline"><br /><u>Statistik</u></div></div>
</div>
</div>
</div>
</div>
<!-- Infobox Forenmenu Ende -->
<!-- Infobox Meniamenu ID6 Start -->
<div id="id_6" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_6');" style="margin-top:0px; margin-left:810px;">
<div class="table">
<div class="tr">
<div class="td">
<div class="tooltipbg5"><div class="headline"><br /><u>Galerie</u></div><div class="padding"><a href="#" target="_self" class="mainlevel">Vanguard</a><a href="#" target="_self" class="mainlevel">Warhammer</a><a href="#" target="_self" class="mainlevel">Midgard Online</a><a href="#" target="_self" class="mainlevel">Guild Wars</a><a href="#" target="_self" class="mainlevel">Sonstige</a><div class="headline"><br /><u>Downloads</u></div><a href="#" target="_self" class="mainlevel">Musik</a><a href="#" target="_self" class="mainlevel">Videos</a><a href="#" target="_self" class="mainlevel">Wallpaper</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- Infobox Meniamenu Ende -->
<!-- Rahmendiv Ende -->
</div>
<!-- Rahmendiv Ende -->
<div align="center">
<div><img src="orig/testbreite.jpg" /></div>
</div>
</body>
</html>
 
Was soll ich sagen? Ausser das ich mittlerweile ein wirklich schlechtes Gewissen habe, weil es letztendlich du warst der mir diese Leite erstellt hat, fällt mir nicht mehr viel ein. Das Ganze hat 100%ig funktioniert. Vllt hilft es dir wenn ich sage das ich wirklich eine Menge durch dich gelernt habe. :)

Ansonsten wenn ich dir einen Gefallen tue indem wir dich vllt verlinken, so du eine HP hast, lass es mich wissen. Derzeit haben wir knappe 500 Besucher täglich, nicht viel, aber für ein wenig Werbung. :) Nur ein Angebot, um meine Schuld wenigstens ein wenig zu begleichen.

Hab nochmals vielen Dank, und vor allem hab ein schönes Wochenende!

Grüße vom,

Genesyst
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück