Computerhilfen.de Logo
Forum
Tipps
News
Frage stellen
search
search

website komplett mit DIV Containern! und Javascript Switch! Bei opera Probleme!

Hi, ich habe ein problem und zwar ahbe ich eine seite mit mehreren div containern, wenn man auf die seite geht sieht mann noch keinen und mann aknn dann links in einem menü per linkd die versch. divs aufrufen! funzt per javascript!

das prblem ist das opera das net richtig drastellt, mann hat das gefühl das opera alle zeilen die durch <br> getrennt sind doppelt nimmer und das alles runterrutsch... im ie und ff gehts top!

woran kann das liegen?

mfg

Moderator informieren  

Antworten zu website komplett mit DIV Containern! und Javascript Switch! Bei opera Probleme!:

Poste doch mal ´nen Link....

Moderator informieren  

geht leider nicht sind vertrauliche infos! hab gerade etwas stress, poste nachher mal den code....

mfg

Moderator informieren  

also in der html sieht das ganze so aus:

im head bereich:

Code: [Auswählen]
<link href="standardfinal.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--

var activeLayer = null;

function switchTo(x)

{  if (activeLayer != null) {activeLayer.visibility = 'hidden'};

 if(document.all || document.layers || document.getElementById)

 { activeLayer=document.all ?

document.all[x].style :
document.layers ? document[x] :    document.getElementById(x).style;

activeLayer.visibility = 'visible'  }
}

//-->
  </script>

im body bereich dann:

Code: [Auswählen]
<body>
<div id="page">
  <div id="navi"></div>
  <div id="news">
    <p>fülltext.</p>
    <p>fülltext<br>
      <a href="link.html">&raquo;more...</a></p>
    <p>fülltext<br>
      <a href="link.html">&raquo;more...</a></p>
    <p>fülltext.<br>
      <a href="link.html">&raquo;more...</a></p>
  </div>
  <div id="newstop">News::News::News::News::</div>
  <div id="navitop">&nbsp;<a href="index.html">&raquo;fülltext</a>| <a href="link.html">
    &raquo;fülltext</a> | <a href="link.html">&raquo;fülltext</a> | <a href="link.html">&raquo;fülltext</a>
    | <a
 href="kontakt.php">&raquo;Kontakt</a> | <a href="link.html">&raquo;fülltext</a></div>
  <div id="login">
    <p><a href="link.html">&raquo;fülltext</a></p>
    <p><a href="kontakt.php">&raquo;fülltext</a></p>
    <p><a href="link.html">&raquo;fülltext</a></p>
    <p>&copy; fülltext</p>
  </div>
  <div id="picture"><img style="width: 570px; height: 100px;"
 alt="fülltext" src="img/Test.jpg"></div>
  <div id="mainleft">
    <h1>fülltext</h1>
    <br>
    <p>fülltext </p>
    <br>
    <p><a href="javascript:void(switchTo('switch4'))">&raquo;fülltext</a></p>
    <br>
    <p><a href="javascript:void(switchTo('switch1'))">&raquo;fülltext</a></p>
    <br>
    <p><a href="javascript:void(switchTo('switch2'))">&raquo;fülltext</a> </p>
    <br>
    <p><a href="javascript:void(switchTo('switch3'))">&raquo;fülltext</a></p>
  </div>
  <div id="mainright1"></div>
  <div id="switch1" class="switch1">
    <h1>&nbsp;</h1>
    <br>
    <p>inhalte des containers</p>
        </p>
    <p><img alt="fülltext" src="img/test.GIF"></p>
    <p><a href="http://www.link.de" target="_blank">&raquo;www.link.de</a><br>
    </p>
  </div>
  <div id="switch2" class="switch2">
    <h1>&nbsp;</h1>
    <br>
    <p>inhalte des containers</p>
        </p>
    <p><img alt="fülltext." src="img/test.GIF"><br>
    </p>
    <p><a href="http://www.link.de" target="_blank">&raquo;www.link.de</a><br>
    </p>
  </div>
  <div id="switch3" class="switch3">
    <h1>&nbsp;</h1>
    <br>
    <p>inhalte des containers</p>
        <p> <img alt="fülltext" src="img/test.GIF"> <img alt="fülltext" src="img/test.GIF">
    <p> <img alt="fülltext" src="img/test.GIF"> <img alt="fülltext" src="img/test.GIF">
  </div>
  <div id="switch4" class="switch4">
    <h1>&nbsp;</h1>
    <br>
    <p>inhalte des containers</p>
        </p>
    <p><img alt="fülltext" src="img/test.GIF"><br>
    </p>
    <p><a href="http://www.link.com" target="_blank">&raquo;www.link.com</a><br>
    </p>
  </div>
</div>
</body>
css passt wegen zeichenbegrenzung net mehr hin, kommt in den nächsten beitrag!
Moderator informieren  

und in der css siehts so aus:

Code: [Auswählen]
html, body, div, p, h1, h2, h3, ul, ol,
span, a, table, td, form, img, li ,page
{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

html, body
{
margin: 0px; padding:0px;
text-align:center;
background: #ECE9E9 ;
    font-size: 101%;
scrollbar-shadow-color: #ece9e9;
scrollbar-face-color: #ECE9e9;
scrollbar-base-color: #ECE9E9;
scrollbar-highlight-color: #ece9e9;
scrollbar-3dlight-color: #ece9e9;
scrollbar-darkshadow-color: #ece9e9;
scrollbar-track-color: #ece9e9;
scrollbar-arrow-color: #000000
}


#page
{
visibility: visible;
border: solid #CCCCCC 1px;
background-color: #FFFFFF;
position: relative;
height: 600px;
width: 720px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #6E6E6E;
text-align:left;
margin: 0px auto;
padding:0px;
}

/* Links */
a:link {
   color: #6E6E6E;
   text-decoration: none;
}

a:visited {
   color: #6E6E6E;
   text-decoration: none;
}

a:hover {
   color: #FDC502;
   text-decoration: none;
}

a:active {
   color: #FDC502;
   text-decoration: none;
}
/* Navi */
#navi
{
visibility: visible;
background-color: #FFFFFF;
visibility: visible;
height: 30px;
width: 720px;
border-top: 1px none #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
left: auto;
top: auto;


}
#news
{
visibility: visible;
background-color: #FFFFFF;
visibility: visible;
height: 400px;
width: 129px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
right: 0px;
top: 45px;
position: absolute;
z-index: 8;
left: 570px;
white-space: normal;
padding: 10px;
margin 0px;
overflow: visible;

}
#newstop
{
visibility: visible;
background-color: #FFFFFF;
visibility: visible;
height: 12px;
width: 149px;
border-top: 1px none #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px none #CCCCCC;
border-left: 1px solid #CCCCCC;
right: 0px;
top: 32px;
position: absolute;
z-index: 8;
left: 570px;
}
#login
{
visibility: visible;
background-color: #FFFFFF;
visibility: visible;
height: 113px;
width: 129px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
top: 466px;
left: 570px;
position: absolute;
z-index: 8;
white-space: normal;
padding: 10px;
margin: 0px;
overflow: hidden;
text-align: justify;
}
#picture
{
visibility: visible;
background-color: #FFFFFF;
visibility: visible;
height: 100px;
width: 570px;
border-top: 1px none #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px none #CCCCCC;
border-left: 1px none #CCCCCC;
top: 47px;
left: 0px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 0px;
margin: 0px;
overflow: hidden;
text-align: justify;
}
#navitop
{
visibility: visible;
background-color: #FFFFFF;
visibility: visible;
height: 13px;
width: 568px;
border-top: 1px none #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
left: 0px;
top: 32px;
position: absolute;
z-index: 8;

}
#mainleft
{
visibility: visible;
background-color: #FFFFFF;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 0px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;
}
h1{

text-decoration: none;
font-size: 22px;
color: #CCCCCC;
font-weight: lighter;

}
#mainright
{
visibility: hidden;
background-color: #FFFFFF;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 285px;
position: absolute;
z-index: 6;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;
}
#mainright1
{

background-color: #FFFFFF;
visibility: visible;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 285px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;
}


div.bild8 {
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
visibility: hidden;
z-index: 10;
}

div.bild10 {
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
visibility: hidden;
z-index: 10;
}

div.bild11 {
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
visibility: hidden;
z-index: 11;
}
div.bild12 {
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
visibility: hidden;
}

div.switch1 {
visibility: hidden;
background-color: #FFFFFF;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 285px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;
font-style: normal;


}
div.switch2 {
visibility: hidden;
background-color: #FFFFFF;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 285px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;

}
div.switch3 {
visibility: hidden;
background-color: #FFFFFF;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 285px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;

}
div.switch4 {
visibility: hidden;
background-color: #FFFFFF;
height: 370px;
width: 245px;
border-top: 1px solid #CCCCCC;
border-right: 1px none #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px none #CCCCCC;
top: 149px;
left: 285px;
position: absolute;
z-index: 7;
white-space: normal;
padding: 25px;
margin: 0px;
overflow: hidden;
text-align: justify;
}

wie gesagt, ie, Firefox, netscape zeigens an, opera zwar auch aber da sind die abstände zwischen dem text zu gro und aus diesm grund sieht man die letzten zeilen des rechten div containers nicht der aufgerufen wird!

mfg
Moderator informieren  

Seiten: [1]
« domainLogin Script auch per ENTER, nicht nur mit Button! »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

reflo Gast

Datum: 12.07.05, 00:49:21

1683x gelesen, 4 Antworten.

Seiten: [1]

0 und 1 Gast betrachten dieses Thema.
Fremdwörter? Erklärungen im Lexikon!
Dead Link
Als Dead Link, also einen toten Link, bezeichnet man eine Verlinkung oder Verknüpfung, die ins Leere führt. Der Link bezieht sich auf einen Zielpunkt, der nicht...

Deep Link
Die Begriffe Surface Link und Deep Link (in Deutsch: Oberflächenverknüpfung und tiefe Verknüpfung) sind Begriffe aus dem Webmaster-Bereich und bezeichnen v...

Hyperlink
Ein Hyperlink, kurz Link, ist eine Verknüpfung oder ein elektronischer Verweis in Hypertext-Systemen, die es ermöglicht innerhalb eines Hypertextes einen Verwei...


Mehr zu website komplett mit DIV Containern! und Javascript Switch! Bei opera Probleme!

Yahoo messengerMSN Live Messenger komplett löschen und deinstallieren

Der MSN Messenger oder Windows Live Messenger ist standardmäßig auf jedem Windows PC installiert....

Windows 7 2Windows XP: switch probleme

Moin ich hoffe ihr könnt mir hier helfen..ich hab schon seit einiger zeit ein problem das ich einfa...

Stadtplan suche[LAN] Router + Switch + Switch, letzer Switch switcht Router nicht

Also ich hatte ein kleines Heimnetwerk mit 4 Computern.Diese 4 Computer teilten sich die Internetver...

Ähnliche Fragen: