MyBB.de Forum
CSS-Dateien überschneiden sich? - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Sonstiges (https://www.mybb.de/forum/forum-1.html)
+--- Forum: Programmierung (https://www.mybb.de/forum/forum-32.html)
+--- Thema: CSS-Dateien überschneiden sich? (/thread-13583.html)

CSS-Dateien überschneiden sich? - aTCWiki - 23.06.2009

Hallo,

nachdem ich gut zwei Monate an einem einzigen Problem festhänge schildere ich dieses mal hier. Mak tut mir schon etwas leid, er versucht mir schon die ganze Zeit zu helfen aber wir kommen einfach nicht weiter. :undecided:


Ich habe es mit iframes versucht, mit vom Rand abhängigen Div-Containern...

Das eigentlich Problem ist, sobald ich in irgendeiner Weise versuche die Navigationsleiste einzubinden wird der Rest der Seite nicht mehr richtig, oder gar nicht dargestellt, ich vermute dass dies an der eigenen CSS-Datei für die Leiste liegt.


Also...
Hier diese Navigationsleiste: http://atcwiki.kilu.de/Frame3.html
soll jene blaue Navigationsleiste unter dem Logo ablösen: http://www.internet-tagebuch.org/Forum/index.php

Hier ist einer, von vielen fehlgeschlagenen versuchen die Leiste einzufügen: http://www.internet-tagebuch.org/Forum/Test.html

Mir fallen einfach keine Lösungen mehr ein, mit einem iframe habe ich versucht die Leiste einfach an der Stelle einzufügen wo sie hin soll. leider missglückte dies , genauso wie der versuch das ganze mit einem div-container der sich auf die Seitenränder bezieht auszurichten.

Also wie muss ich meine Codes verändern damit ich mein Ziel erreiche?

Für Hilfe bin ich wie immer, sehr dankbar.

Mit freundlichen Grüßen,

aTCWiki Wink

(Quelltexte der Dateien konnte ich leider nicht posten da beim Erstellen von zu langen Beiträgen man einfach auf solch eine Seite weitergeleitet und der Beitrag nicht erstellt wird. Im Anhang befindet sich der komplette Beitrag. Smile)

RE: CSS-Dateien überschneiden sich? - Jockl - 23.06.2009

Eine Lösung kann ich Dir leider nicht bieten. Aber zumindest kann ich von meinen (leidlichen) Erfahrungen mit den Menüleisten von Stu Nichols berichten.

Bislang gab es bei den StuNichols Menüs immer Probleme, wenn jquery-Javascript Dateien im Spiel waren. Ob diese Probleme schlussendlich lösbar wären, kann ich nicht beurteilen; mir war dann einfach meine spärliche Zeit zu schade und ich habe nicht weiter nach einer Lösung gesucht. Wink

Aber auch die reinen CSS Versionen sind nicht ohne. Ein Beispiel: in der Menüleiste habe ich im header-Template Links über die global.php eingebunden. Und zwar auf diese Art und Weise:
Code:
<li>{$meinLink}</li>
Dieser Code hat mir auch immer das Design zerschossen oder in unterschiedlichen Browsern lustige Varianten gezeigt. Die Lösung war dann:
Code:
{$meinLink}
wobei ich die <li>-Tags bereits in der global.php eingebunden habe. Auch ein nicht ordentlich geschlossenes HTML-Tag zeigte plötzliche enorme Auswirkungen, die vorher nicht sichtbar waren.

Das wird Dir u.U. nicht weiter helfen, aber Du hast zumindest schonmal einen Leidensgenossen. Wink

RE: CSS-Dateien überschneiden sich? - aTCWiki - 24.06.2009

OK, habe mir jetzt etwas anderes gesucht was auch eigentlich ganz gut funktioniert...

Allerdings uneigentlich..., sind alle Links direkt unter der Navigationsleiste bis zu den foren tot und können nicht angeklickt werden. Sad (Mit Firefox zumindes)

http://www.internet-tagebuch.org/Forum/index.php

Code:
<DIV ID="Floating"  style="position: absolute; top:  0px; left: 0px; z-index:1;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="875" height="421" >
<param name="movie" value="Untitled-menu.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<embed src="Untitled-menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="875" height="421" allowScriptAccess="always" wmode="transparent">
</embed></object>
</DIV>


<div style="position : absolute; width : 89px; height : 35px; top : -1px; left : 872px; background-color: #000099; border: none"><img src="http://www.internet-tagebuch.org/Leist.png"></div>






<!-- Created with FLASH MENU FACTORY. http://www.FlashMenuFactory.com -->



<script language="JavaScript">
<!--
// Dauerstress - Alles kostenlos für die eigene Homepage
// http://www.dauerstress.de

aus1 = new Image();
aus1.src = "http://www.internet-tagebuch.org/schildpremium.png";
an1 = new Image();
an1.src = "http://www.internet-tagebuch.org/schildpremiumaktiv.png";
aus2 = new Image();
aus2.src = "http://www.internet-tagebuch.org/schildspende.png";
an2 = new Image();
an2.src = "http://www.internet-tagebuch.org/schildspendeaktiv.png";
aus3 = new Image();
aus3.src = "http://www.internet-tagebuch.org/schilderstelle.png";
an3 = new Image();
an3.src = "http://www.internet-tagebuch.org/schilderstelleaktiv.png";
aus4 = new Image();
aus4.src = "http://www.internet-tagebuch.org/schildertut.png";
an4 = new Image();
an4.src = "http://www.internet-tagebuch.org/schildertutaktiv.png";
//-->
</script>



<script language="javascript" type="text/javascript">
<!--
var win=null;

onerror = stopError;
function stopError(){
    return true;
}


function f1242839681(){
    myleft=20;
    mytop=20;
    settings="width=640,height=480,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
    win=window.open("http://www.internet-tagebuch.org/Chat/chat/flashchat.php","Chat",settings);
    win.focus();

}
// -->
</script>



</script>

<link rel="shortcut icon" href="http://onlinetagebuch.kilu.de/icon.ico">    
<a href="http://www.internet-tagebuch.org/Forum/"><img src="http://www.internet-tagebuch.org/logo.png"></a>
<div id="container">
        <a name="top" id="top"></a>
                      <div id="header">
            
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional series drop#2</title>
<style type="text/css">

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/pro_drop3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(drop3/blank_over.gif);}
.preload2 {background: url(drop3/blank_overa.gif);}

.menu2 {padding:0; margin:0; list-style:none; height:36px;
position:relative; z-index:500; font-family:arial, verdana, sans-serif;
width:100%; background:url(drop3/blank.gif) right top; }
.menu2 li.top {display:block; float:left;}
.menu2 li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(drop3/blank.gif);}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(drop3/blank.gif) right top;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(drop3/blanka.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(drop3/blank_over.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(drop3/blank_over.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(drop3/blank_overa.gif) no-repeat right top;}

.menu2 li:hover > a.top_link {color:#fff; background: url(drop3/blank_over.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(drop3/blank_over.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(drop3/blank_overa.gif) no-repeat right top;}

.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible; position:relative; z-index:200;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(drop3/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#3a93d2; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#3a93d2 url(drop3/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#3a93d2 url(drop3/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
</style>

</head>





<span class="preload1"></span>
<span class="preload2"></span>


<br>








<hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        </div>




<table Width="100%">
<tr>
  <td>

<a href="http://www.internet-tagebuch.org/Forum/premium.php"
onmouseover="a1.src='http://www.internet-tagebuch.org/schildpremiumaktiv.png';"
onmouseout="a1.src='http://www.internet-tagebuch.org/schildpremium.png';"
name="a1"><img
src="http://www.internet-tagebuch.org/schildpremium.png" border="0"
alt="" name="a1"></a>

</td>
  <td><a href="http://www.internet-tagebuch.org/Forum/spenden.php"
onmouseover="a2.src='http://www.internet-tagebuch.org/schildspendeaktiv.png';"
onmouseout="a2.src='http://www.internet-tagebuch.org/schildspende.png';"
name="a2"><img
src="http://www.internet-tagebuch.org/schildspende.png" border="0"
alt="" name="a2"></a>

</td>
  <td><a
href="http://www.internet-tagebuch.org/Forum/showthread.php?tid=93"
onmouseover="a3.src='http://www.internet-tagebuch.org/schilderstelleaktiv.png';"
onmouseout="a3.src='http://www.internet-tagebuch.org/schilderstelle.png';"
name="a3"><img
src="http://www.internet-tagebuch.org/schilderstelle.png" border="0"
alt="" name="a3"></a>

</td>
  <td><a
href="http://www.internet-tagebuch.org/Forum/showthread.php?tid=142&pid=200#pid200"
onmouseover="a4.src='http://www.internet-tagebuch.org/schildertutaktiv.png';"
onmouseout="a4.src='http://www.internet-tagebuch.org/schildertut.png';"
name="a4"><img
src="http://www.internet-tagebuch.org/schildertut.png" border="0"
alt="" name="a4"></a>


</td>
</tr>
</table>


<hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            





<navigation>

<!-- Notification Bar -->

<style type="text/css">
#notificationbar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 7132;
    width: 100%;
    height: 32px;
    background: transparent url(http://pivotforum.de/images/kachel.png) repeat-x;
    color: #fff;
    text-align: center;
    padding: 18px 0 2px 0;
    font-size: 14px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

* html #notificationbar {
    position: absolute;
}

#notificationloading {
    vertical-align: middle;
}

.notificationmessage,
.notificationmessage a {
    color: #00a513;
    text-decoration: none;
}

.ntf_arrow {
    vertical-align: middle;
    margin-bottom: 2px;
}

.okbtn {
    cursor: pointer;
    vertical-align: bottom;
}









</style>

<div id="notificationbar">



<div id="notificationtext"><img id='notificationloading'
src='http://pivotforum.de/images/spacer.gif' width='21' height='20'
alt='' style='visibility:hidden;' /><a href="http://www.internet-tagebuch.org/Forum/gewinnspiel.php"><font color="#FFFFFF">Gewinne bei Internet-Tagebuch.org einen Acer Aspire 5315 im Wert von 375 EUR, viel Glück!</font>
</a></div>

<!--[if lte IE 6]>

<a
href="http://www.microsoft.com/germany/windows/internet-explorer/default.aspx"
target="_blank"><img
src="http://static4.gigagfx.de/2008/grafik/notification/ie-icon.gif"
width="34" height="34" alt="Im Internet Explorer 6 kann die PSI-Leiste
leider nicht optimal dargestellt werden - jetzt Internet Explorer 7
herunterladen!" title="Im Internet Explorer 6 kann die PSI-Leiste
leider nicht optimal dargestellt werden - jetzt Internet Explorer 7
herunterladen!"
style="position:absolute;bottom:7px;right:5px;border:none;"></a>

<![endif]-->



</div>

Warum sind die ganzen Links tot!? Sad


Mit freundlichen Grüßen,

Mathias Wink

---

edit:

ich weis nun woran es liegt, unter dem Reiter "Forum" sieht man wie groß die Flash-Datei ist, der Hintergrund ist transparent, d.h. man kann logischweise die Dinge hinter der Flash-Datei nicht anklicken... Was kann ich nun tun damit man die Dinge trotzdem anklicken kann aber die Datei nicht kleiner gemacht werden muss?