Ergebnis 1 bis 3 von 3

Thema: Div Container CSS Positionierungs Prob

  1. #1
    Youngster
    Registriert seit
    08.09.2006
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div Container CSS Positionierungs Prob

    Hmm hab nun meinen ganzen hover/mouseover keam gemeistert nun hab ich aber ein anderes problen und zwar... ich hab nen div-container und der schaut im ff anders als im Ie auf hmm wie kann ich das denn mal einheitlich machen?

    Dankööö


    Greetz @Storm
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    12.09.2006
    Beiträge
    27
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    mit sogenannten browser-hacks... --> de.wikipedia.org

    am besten ist es, in solch einer anfrage das konkrete beispiel zu inkludieren, dh gib mir den quelltext, oder den link zu der seite, auf der das problem auftritt

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    08.09.2006
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Link gibts leider noch nicht....

    ****=namen die ned gezeigt werden dürfen......

    Schaut so aus und das Hover pic odben ist bei FF halt verschoben // oder bei IE je nachdem wo ich es optimire.....



    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 &#123;
    height&#58; 100px;/* Original 353px */
    list-style&#58; none;
    position&#58; relative ;/* Original relative */  
    width&#58; 450px;/* Original 623px */
    top&#58; 100px;
    left&#58; 0px;
    &#125;
    
    div#**** li#bild-1 a &#123;
    background&#58; url&#40;images/****/bild-1-klein.png&#41;;
    &#125;
    
    div#**** li#bild-2 a &#123;
    background&#58; url&#40;images/****/bild-2-klein.png&#41;;
    &#125;
    
    div#**** li#bild-3, div#**** li#bild-6 &#123;
    margin-right&#58; 300px;
    &#125;
    
    div#**** li#bild-3 a &#123;
    background&#58; url&#40;images/****/bild-3-klein.png&#41;;
    &#125;
    
    div#**** li#bild-4, div#**** li#bild-4 &#123;
    clear&#58; left;
    &#125;
    
    div#**** li#bild-4 a &#123;
    background&#58; url&#40;images/****/bild-4-klein.png&#41;;
    &#125;
    
    div#**** li#bild-5 a &#123;
    background&#58; url&#40;images/****/bild-5-klein.png&#41;;
    &#125;
    
    div#**** li#bild-6 a &#123;
    background&#58; url&#40;images/****/bild-6-klein.png&#41;;
    &#125;
    
    </style>    
    </head>
    <body>
    <div id="maincontent">
    
    <table class="tabelle" border="0" summary="content">
    
      <tr>
        <td rowspan="3">[img]images/****/bild-1-gross.png[/img]</td>
        <td></td>
        <td width="50"></td>
      </tr>
      <tr>
        <td class="tabelleheadline" colspan="2" height="30">[img]images/****/wuerfel.gif[/img]<span class="headline">*****************</span></td>
      </tr>
      <tr>
        <td colspan="2" class="contright">
    
    ****************************************************************************************************************************************************************************************************************************************************************************************************</p></td>
      </tr>
        <tr>
        <td colspan="3"></td>
      </tr>
    
    
          <tr>
        <td class="contleft">[img]images/****/Impression.png[/img]
    
    [img]images/****/bild-3-gross.png[/img]
        <td colspan="2" class="contright">
    
    **************************************************************************************************************************************************</p>
        
    
    ************************************************************************************************************************************************************************************************************************************************************</p>
        
    
    ******************************************************************************************************************************</p> </td>
      </tr>
          <tr><td></td>
              <td></td>
              <td>
    
    
    
              
              
              [img]images/****/Download.png[/img]</td></tr>
    
    
    </table>
    
    
    <hr color="#CC0033">
    
    <div id="****">
        <ul>
            <li id="bild-1"><span>[img]images/****/bild-1-gross.png[/img]</span>
            <li id="bild-2"><span>[img]images/****/bild-2-gross.png[/img]</span>
            <li id="bild-3"><span>[img]images/****/bild-3-gross.png[/img]</span>
            <li id="bild-4"><span>[img]images/****/bild-4-gross.png[/img]</span>
            <li id="bild-5"><span>[img]images/****/bild-5-gross.png[/img]</span>
            <li id="bild-6"><span>[img]images/****/bild-6-gross.png[/img]</span>[/list]
    </div>
            
    </div>
    </body>
    </html>

Ähnliche Themen

  1. div container
    Von 00eraser00 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 11.08.2007, 13:11
  2. div container positionieren!
    Von CroweHammer im Forum HTML & CSS Forum
    Antworten: 31
    Letzter Beitrag: 22.06.2007, 12:16
  3. div-container
    Von N0b0dy im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.03.2007, 21:40
  4. div container
    Von ich halt im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 16.09.2006, 20:21
  5. <div>container
    Von malawi im Forum HTML & CSS Forum
    Antworten: 15
    Letzter Beitrag: 23.02.2006, 19:27

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •