✔ Probleme die "Hoverbox Image Gallery" einzubinden.

Status
Nicht offen für weitere Antworten.
M

Mel_P

Grünschnabel
Zu erst einmal:

Hallo,

ich bin Mel und "neu" hier.
Habe diese Hilfe-Seiten schön öfter Besucht und eigentlich (fast) immer gefunden wonach ich suchte.

Nun bin ich hier weil ich ein Problem damit habe die
"Hoverbox Image Gallery"
in eine HP ein zu binden.
Mom. sieht es so aus das die Bilder in Originalgröße erscheinen und nicht den Mouseover effekt vorweisen.

Denke mal, es liegt daran das ich schon einen CSS-Tab-Designer drinn habe.
(kann aber nur raten, da ich mich nicht wirklich mit der Matterie bzw. den Umgang auskenne)

Meine Frage:
Wie binde ich die Hoverbox zusätzlich ein ?
Was muß ich beachten damit auch beide funktionieren ?
(mom. funtioniert nur der Tab-Reiter)


Sonnige Grüße Mel


P.s. Sorry, das ich zu allem Übel keine korrekte Grammatik und Rechtschreibung vorweisen kann, bemühe mich aber ...
 
Hallo Mel und willkommen auf tutorials.de!

Kann man den aktuellen Stand der Seite irgendwo begutachten? Ohne Quelltext werden wir dir vermutlich kaum helfen können, da die Problembeschreibung etwas zu vage ist.

Grüße,
Matthias
 
Hallo Matthias
und
Guten Morgen @ all

Sorry, habe wohl nicht daran gedacht das Ihr genauso wenig mit einer Glaskugel umgehen könnt wie ich *ggg*

Hier der Link: http://www.buswelt.info/html/fahrzeugeneu.html

(Der Quelltext wird vermutlich die reinste Katastrophe sein.)

Mom. sieht es so aus, das die Box im IE, den obeneren Bereich nicht mittig sondern links erscheinen läßt.
Im Firefox dagegen, ist der obere Bereich so wie es sein soll, allerdings sieht es so aus als habe ich die Bilder doppelt, und mit Listenpunkte versehen, untereinandergestellt.

Normalerweise google ich und kann meine Probleme somit lösen, aber diesmal schaffe ich es einfach nicht alleine und würde mich riesig über Hilfe freuen, da ich mich jetzt schon seit Tagen damit rumärger ;o(((

Vielen Dank, einen schönen Tag und sonnige Grüße
Mel
 
Hi,

im "hoverbox"-Stylesheet fehlt dem body-Selektor die schliessende } -Klammer, was im Firefox zu den Darstellungsfehlern führt:

Code: 
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
<style type="text/css">
<!--
body { }

 *
{
	border: 0px none;
	margin: 0;
	padding: 0
}

Ansonsten solltest du das HTML-Dokument unbedingt validieren, denn 300 (!) Validator-Fehlermeldungen birgen ein hohes Potential für Fehldarstellungen in den unterschiedlichen Browsermodellen.

Siehe hierzu [Invalid] Markup Validation of http://www.buswelt.info/html/fahrzeugeneu.html - W3C Markup Validator
 
Hallo Maik
&
Hallo @ all,

Danke für Hilfe, habe den Fehler ausgebessert, nun ist der Mousover Effekt da *freu*

Leider ist das ganze immer noch nach links gerichtet ;o(((


Von den 300 Fehlern habe ich inzwischen 53 beheben können, leider sind viele Fehler angegeben die ich so nicht nachvollziehen kann.
Eckige Klammern schließen z.B.
oder dieser hier:

Line 186, column 2: XML Parsing Error: Comment not terminated
----------------------------------------------------------------------*/

damit kann ich nun gar nichts Anfangen ;o(((
zumal ich an diesem Stück Qt nun definiv nicht gefuscht habe *ggg*

Vielen Danke
&
Sonnige Grüße Mel
 
So, ich hab mal ein wenig am Quellcode geschraubt, damit das Layout in der horizontalen Fenstermitte zentriert ist:

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" />
<meta name="description" content="www.buswelt.info - Unser Leistungsspektrum umfasst den Import und dem Verkauf von Bussen und Kleinbussen">
<title>www.buswelt.info - Unser Leistungsspektrum umfasst den Import und dem Verkauf von Bussen und Kleinbussen </title>
<meta name="keywords" content="Unser Leistungsspektrum umfasst den Import und dem Verkauf von Bussen und Kleinbussen, Bednara,bednara cms,Sprinter, mercedes,Autozentrum,Transporter,Automarkt,Automobile,Autohandel,Fabrikate,Nutzfahrzeuge,Kleintransporter,Spezialisiert,Verkauf,Dortmund,Dortmund-Lütgendortmund,Bochum,Essen,Witten,Castrop,Castrop-Rauxel,Herne,">
<meta name="robots" content="follow">
<meta name="revisit-after" content="5 days">

<style type="text/css">
<!--
body {
        background-color: #ffcc11;
}

.style1 {
        font-family: "Arial Rounded MT Bold";
        font-size: 42px;
}
.style2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 26px;
        font-weight: bold;
}
.style7 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
}
.style8 {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 14px;
         font-weight: bold;
}
.style15 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #FFFFFF;
        font-weight: bold;
}
a:link {
        text-decoration: none;
        color: #FFFFFF;
}
a:visited {
        text-decoration: none;
        color: #FFFFFF;
}
a:hover {
        text-decoration: underline;
        color: #ffcc11;
}
a:active {
        text-decoration: none;
        color: #FFFFFF;
-->
</style>

<link rel="STYLESHEET" href="melCss.css" type="text/css">

<style type="text/css">
<!--


*
{

        margin: 0;
        padding: 0
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
        text-decoration: none;
}

body
{
        background: #ffcc11;
        color: #777;
        padding: 50px;
}

p
{
        clear: both;

        padding: 10px 0;
        text-align: center;
}

p a
{
        background: inherit;
        color: #777;
}

p a:hover
{
        background: inherit;
        color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
        cursor: default;
        list-style: none;
}

.hoverbox a
{
        cursor: default;
}

.hoverbox a .preview
{
        display: none;
}

.hoverbox a:hover .preview
{
        display: block;
        position: absolute;
        top: -33px;
        left: -45px;
        z-index: 1;
}

.hoverbox img
{
        background: #fff;
        border-color: #aaa #ccc #ddd #bbb;
        border-style: solid;
        border-width: 0px;
        color: inherit;
        padding: 2px;
        vertical-align: top;
        width: 150px;
        height: 113px;
}


.hoverbox li
{
        border-color: #ddd #bbb #aaa #ccc;
        border-style: solid;
        border-width: 0px;
        color: inherit;
        display: inline;
        float: left;
        margin: 3px;
        position: relative;
}

.hoverbox .preview
{
        border-color: #0;
        width: 300px;
        height: 225px;
}

 /* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
        position: relative;
}

.hoverbox a:hover
{
        display: block;
        font-size: 100%;
        z-index: 1;
}

.hoverbox a:hover .preview
{
        top: -38px;
        left: -50px;
}

.hoverbox li
{
        position: static;
}
-->
</style>
</head>

<body>




  <table width="600" border="0" style="margin:0 auto;">
    <tr>
      <td colspan="2"><div align="center"><img src="http://www.buswelt.info/assets/images/cmslogo.gif" alt=""/></div></td>
    </tr>

    <tr>
      <td width="400"><div align="left"><span class="style7">Am Hackenbeck 4   -   44388 Dortmund   -   Tel: 0231-9632797 </span></div></td>

      <td width="200"><div align="right" class="style7">www.Busswelt.info</div></td>
    </tr>
    </table>

<table border=0 width="750" cellspacing=0 cellpadding=0 style="margin:0 auto;">
<tr><td colspan=2><center>

<p><br></p>

<center>
<p class=ar2><b>

</b></p><p>

</td></tr>

<tr><td colspan=2>

<ul id="tab">
                <li >   <a href="http://www.buswelt.info/html/zentrum.html">Über uns<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/umbauten.html">Umbauten<br>&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/anfahrt.html">Anfahrt<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/dialog.html">Dialog<br>&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/fahrzeuge.html">&nbsp;Gallerie&nbsp;<br>&nbsp;Fahrzeuge&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/ausstattung.html">&nbsp;Gallerie&nbsp;<br>Austattung</a> </li>
         <li >   <a href="http://www.buswelt.info/html/iaa.html">&nbsp;Gallerie&nbsp;<br>IAA</a> </li>
         <li >   <a href="http://www.buswelt.info/html/kontakt.html">Kontakt/<br>Impressum</a> </li>
         <li >   <a href="http://www.buswelt.info/html/finanzierung.html">Finanzierung<br>&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/agb.html">AGB<br>&nbsp;&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/html/links.html">Links<br>&nbsp;</a> </li>
         <li >   <a href="http://www.buswelt.info/index.html">Home<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </li>

</ul>
</td></tr>


<tr><td height=10 colspan=2><div align="left"><img src="http://www.autoleihhaus-dortmund.de/bilder/bottomstrip1.jpg" width="748"></div></td></tr>


    </tr>
  </table>
</div>

<table width="750" border="0" style="margin:0 auto;">
  <tr>
    <td width="100" align="center" valign="top" bgcolor="#1B1B8D"><table width="95%" border="0">
      <tr>
        <td class="style15"><div align="center">
          <p><br><br><br><p class="style15">Home</p>
          <p>&nbsp;</p>
        </div></td>
      </tr>
      <tr>
        <td><div align="center"><img src="http://www.autoleihhaus-dortmund.de/bilder/logo1.gif"  border="0" /></a></div></td>
      </tr>
    </table>
    <td width="95%" height="2" valign="top">
              <br><br><br>



  <!-- ********************************************* Anfang *********************************************************** -->



<div align="center"> <table width="600">
<tr>
 <td>

<ul class="hoverbox">
</li>
 <li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu1.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu1.jpg" title="Mercedes Benz, ATEGO APOLLO1, Reisebus" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu2.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu2.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu3.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu3.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu4.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu4.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu5.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu5.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu6.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu6.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu7.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu7.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu8.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu8.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/neu9.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/neu9.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah01.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah01.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah02.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah03.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah03.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah04.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah04.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah05.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah05.jpg" alt="description" class="preview" /></a>
</li>
 <li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah06.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah06.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah07.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah07.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah09.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah09.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah10.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah10.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah11.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah11.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah12.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah12.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah13.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah13.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah14.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah14.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah15.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah15.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah16.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah16.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah17.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah17.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah18.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah18.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah19.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah19.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah20.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah20.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah21.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah21.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah22.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah22.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah23.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah23.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah24.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah24.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah25.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah25.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah26.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah26.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah27.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah27.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah28.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah28.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah29.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah29.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah30.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah30.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah31.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah31.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah32.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah32.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah33.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah33.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah34.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah34.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah35.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah35.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah36.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah36.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="http://www.buswelt.info/assets/images/fah37.jpg" alt="description" /><img src="http://www.buswelt.info/assets/images/fah37.jpg" alt="description" class="preview" /></a>
</li>
</ul>

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

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

</body>
</html>
 
Vielen, vielen Dank, Maik *riesigfreu*

Hab mich ja schon gefreut das ich nur noch 104 Fehler vorzuweisen habe, aber das ist einfach riesig
Hoffe es war nicht allzu schwer ...

*testengehe*

Danke

Sonnige Grüße
Mel
 
Hallo,

so, da Maik (vielen, lieben Dank nochmal) mein Problem wohl zu meiner vollsten Zufriedenheit gelöst hat kann ich diesen Threat wohl schießen ...

Sonnige Grüße Mel ;o)))
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück