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

Div Container CSS Positionierungs Prob

Status
Für weitere Antworten geschlossen.
@

@Storm

Neues Mitglied
Hi Leutz hätt da mal ein Prob...... und zwar:

ch hab nen div-container (mit mousover/oder hover grad Ka...) und der schaut im ff anders als im Ie auf hmm wie kann ich das denn mal einheitlich machen?
--> also es ist verschoben

Dankööö
 
Gar ned so leicht ... is noch ned online existiert nur in der asp datenbank zurzeit aber ich versuchs mal ****= Text den ich ned Posten darf Wegens Firmgeheisnis bla bla bla^^ wär coll wenn ihr nen plan davon hättet

Ty


Die CCS
Code: 
#maincontent {
   width: 600px;
   margin: 0px;
   padding: 0px;
   text-align: center;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   border-collapse: collapse;
}
.tabelle {
   width: 580px;
   border: none;
   border-collapse: collapse;
   vertical-align: top;
}
td {
   text-align: left;
   vertical-align: top;
   border-collapse: collapse;
}
.headline {
   font-size: 20px;
   font-weight: bold;
   color: #CC0033;
   padding-left: 10px;
}
.subheadline {
   font-size: 14px;
   font-weight: bold;
   color: #CC0033;
   padding-left: 10px;
}
.contleft {
   font-size: 9px;
}
.contmiddle {
   text-align: left;
   margin: 0px;
   padding: 0px;
}
.contright {
   font-size: 10px;
   padding-left: 10px;
}
hr {
    color: #CC0033;
    width: 100%;
    height: 1px;
    margin-top: 200px;
}

/****** ------ Beginn **** ------ ******/
/* ------ **** - ****-Darstellung global ------ */
div#**** {  /* Gibt Position der Gesamten Galarie an */
   width: auto; /* 623px; */
   position: absolute; /* AF geändert von relative auf absolute */
   left: -26px; /* AF neu */
   margin: 0px auto 0; /* Original 41px Abstand */
   padding-left: 0px; /* Abstand nach links, Original 65px */
   top: 175px;
}
div#**** p {  /* Schrift Position "Fahren sie bitte mit maus über bilder....." */
   left: 5px;
   padding-left: 5px;
   position: absolute;
   text-align: left;
   top: 190px;
   width: 140px; /* nur IE 5.x */
   width/**/:/**/ 140px;
}
div#**** li { /* gibt Breite der Bilder an */
   float: left;
   margin: 0px; /* vorher 0 0 0 0; AF */
   width: 47px;
}
div#**** li a { /* gibt Höhe der Bilder an */
   display: block;
   height: 33.3px;
}
div#**** li span { /* vergrößert bilder und Verschiebt alles.... */
   display: none;
}
div#**** a { /* Rahmen der Kleinen Bilder (Mouseout) */
   border: 1px solid #999;
}
div#**** a:focus, div#**** a:hover { /* Rahmen der Kleinen Bilder (Mouseover) */
   border: 1px solid #000;
}
div#**** a:focus span, div#**** a:hover span { /* Position des Mouseover erzeugten Bildes */
   display: block;
   height: 100px;
   position: absolute;
   right: 0; /* Original 0 */
   top: -127px; /* Original 0 */
   left: 38px; /* AF neu */
   width: 140px; /* Original 264px */
   padding-top: 3px; /* auf 3px geaendert - Original kein Eintrag, AF */
}
div#**** a img {
   border: none;
}

/* **** der Bilder-Darstellung, jede Seite hat eigenen Bilderordner */

div#**** ul {
height: 100px;/* Original 353px */
list-style: none;
position: relative ;/* Original relative */  
width: 450px;/* Original 623px */
top: 100px;
left: 0px;
}

div#**** li#bild-1 a {
background: url(images/****/bild-1-klein.png);
}

div#**** li#bild-2 a {
background: url(images/****/bild-2-klein.png);
}

div#**** li#bild-3, div#**** li#bild-6 {
margin-right: 300px;
}

div#**** li#bild-3 a {
background: url(images/****/bild-3-klein.png);
}

div#**** li#bild-4, div#**** li#bild-4 {
clear: left;
}

div#**** li#bild-4 a {
background: url(images/****/bild-4-klein.png);
}

div#**** li#bild-5 a {
background: url(images/****/bild-5-klein.png);
}

div#**** li#bild-6 a {
background: url(images/****/bild-6-klein.png);
}
}
/****** ------ Ende **** ------ ******/

& html
Code: 
<html>
<head>

<title>**********************</title>
<link rel="stylesheet" type="text/css" href="../contentstyle.css" />
<style type="text/css" href="../contentstyle.css" />
/* Style für die **** der Bilder-Darstellung, jede Seite hat eigenen Bilderordner */

div#**** ul {
height: 100px;/* Original 353px */
list-style: none;
position: relative ;/* Original relative */  
width: 450px;/* Original 623px */
top: 100px;
left: 0px;
}

div#**** li#bild-1 a {
background: url(images/****/bild-1-klein.png);
}

div#**** li#bild-2 a {
background: url(images/****/bild-2-klein.png);
}

div#**** li#bild-3, div#**** li#bild-6 {
margin-right: 300px;
}

div#**** li#bild-3 a {
background: url(images/****/bild-3-klein.png);
}

div#**** li#bild-4, div#**** li#bild-4 {
clear: left;
}

div#**** li#bild-4 a {
background: url(images/****/bild-4-klein.png);
}

div#**** li#bild-5 a {
background: url(images/****/bild-5-klein.png);
}

div#**** li#bild-6 a {
background: url(images/****/bild-6-klein.png);
}

</style>    
</head>
<body>
<div id="maincontent">

<table class="tabelle" border="0" summary="content">
<!-- Beginn Kopf -->
  <tr>
    <td rowspan="3"><img src="images/****/bild-1-gross.png" alt="Accord" /></td>
    <td>&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
  <tr>
    <td class="tabelleheadline" colspan="2" height="30">&nbsp;<img src="images/****/wuerfel.gif" alt="Würfel" />&nbsp;&nbsp;<span class="headline">*****************</span></td>
  </tr>
  <tr>
    <td colspan="2" class="contright"><p>****************************************************************************************************************************************************************************************************************************************************************************************************</p></td>
  </tr>
    <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
<!-- Ende Kopf -->
<!-- Beginn Inhalt-->
      <tr>
    <td class="contleft">&nbsp;<img src="images/****/Impression.png" alt="Impression" /><br /><br />&nbsp;<img src="images/****/bild-3-gross.png" alt="Bild 3" />
    <td colspan="2" class="contright"><p>**************************************************************************************************************************************************</p>
    <p>************************************************************************************************************************************************************************************************************************************************************</p>
    <p>******************************************************************************************************************************</p> </td> 
  </tr>
      <tr><td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><br /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/****/Download.png" alt="Bild 1" /></td></tr>


</table>
<br />
<hr color="#CC0033">

<div id="****">
    <ul>
        <li id="bild-1"><a href="#"><span><img src="images/****/bild-1-gross.png" alt="Bild 1" /></span></a></li>
        <li id="bild-2"><a href="#"><span><img src="images/****/bild-2-gross.png" alt="Bild 2" /></span></a></li>
        <li id="bild-3"><a href="#"><span><img src="images/****/bild-3-gross.png" alt="Bild 3" /></span></a></li>
        <li id="bild-4"><a href="#"><span><img src="images/****/bild-4-gross.png" alt="Bild 4" /></span></a></li>
        <li id="bild-5"><a href="#"><span><img src="images/****/bild-5-gross.png" alt="Bild 5" /></span></a></li>
        <li id="bild-6"><a href="#"><span><img src="images/****/bild-6-gross.png" alt="Bild 6" /></span></a></li>
    </ul>
</div>
        
</div>
</body>
</html>
 
@Storm schrieb:
ch hab nen div-container (mit mousover/oder hover grad Ka...)
Zum Vergrößern anklicken....
Mouseover per :hover funktionieren im IE generell nur auf Links (a)

@Storm schrieb:
und der schaut im ff anders als im Ie auf
Zum Vergrößern anklicken....
Sehr präzise. Webseiten sehen im FF (fast) immer anders aus als im IE.
@Storm schrieb:
hmm wie kann ich das denn mal einheitlich machen?
--> also es ist verschoben
Zum Vergrößern anklicken....

Wie gesagt, ohne Link ist da nicht viel zu machen.
 
naja was würdet ihr denn chacken // überprüfen // ändern um einen solchen fehler zu beheben kann nu mal kein link geb :( hmm reicht nen screen?
falls ja hier sobald ich da mit maus drüber geh ändert sich halt das bild oben :)

vllt reicht das ja schon für jemanden....


 
Das is ja mien prob ... kann nich einfach sachen von ner firma uploaden aber ich schau mal was ich machen kann....

Greetz Storm

EDIT:

http://people.freenet.de/Problem/index.html


so hoffe das reicht erstmal (ihr seht ja wie sich positionen verändern)

Mod-Edit/Doppelpost zusammengeführt. Das nächste mal die Editierfunktion nutzen, danke. (Plankton)
 
Zuletzt bearbeitet von einem Moderator:
also du willst Hilfe haben, wenn du keinen Code posten darfst wegen Firmengeheimnissen.. Warum fragst du dann nicht einfach deine Firma? Wenn du eine Internetseite machst wird sowieso jeder deine ***** sehen können.. wenn das jetzt php-Code wäre könnt ichs grad noch verstehen.. aber warum postest du in nem Forum.. verlangst Hilfe, wenn du nicht mal einen Code hast, in dem der Fehler liegt?
Gruß, Fredmonster!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben