2016-05-04 3 views
0

Ich habe es fast geschafft, alles einzustellen, aber habe ein paar seltsame Probleme, die ich nicht scheinen kann, herauszufinden, egal wie sehr ich es versuche. Die Probleme, denen ich laufe, sind:Auf der Suche nach Informationen, wie man Probleme mit dieser div Tabelle beheben kann

  1. Abstand ist zu groß auf der rechten Seite.
  2. Tabellen immer unter der anderen stapeln (ohne Abstand). Ich habe versucht, es so zu haben, dass es so viele Spalten von "Boxen" wie möglich (mit Zwischenräumen zwischen jedem von natürlich) passen kann, bevor ich eine neue Reihe mache, abhängig davon, wie weit jemandes Auflösung ist.
  3. Bizarr, aus irgendeinem Grund scheint das Bild für die rechte Seite falsch angezeigt/ist die linke Seite. Ich habe mehrere Dinge ausprobiert und kann es immer noch nicht beheben. Die Bilddatei ist korrekt, daher bin ich mir nicht sicher, warum sie immer die falsche zeigt. - Scheint, diese eine repariert zu haben!
  4. Im Moment muss ich den gesamten TR-Code im Wesentlichen repaste anstatt nur <div>*infohere*</div> oder die erste Box wird nur weiter gestreckt (wie im ersten Beispiel der jsfiddle gezeigt). Gibt es eine Möglichkeit, ich könnte es so haben, ich würde nur die div s tun müssen? Oder ist das unmöglich für das, was ich tun möchte?

CSS:

table#t_gallery, table#t_content{ 
    border-collapse:collapse; 
    border-spacing:0px; 
    margin:0px auto; 
    padding:0px; 
} 

table#t_gallery { 
    margin-top:12px; 
} 

table#t_gallery td { 
    padding:0px; 
} 

#t_gallery_top, #t_gallery_bottom { 
    background: url("/top.png") 0 0 no-repeat; 
    height:6px; 
    width:265px; 
} 

#t_gallery_bottom { 
    background-image:url("/bottom.png"); 
} 

#t_gallery_left, #t_gallery_right { 
    background: rgba(11, 14, 15, .5) url("/left.png") 0 0 repeat-y; 
    width:6px; 
} 

#t_gallery_right { 
    background-image:url("/right.png"); 
} 

#t_gallery_middle { 
    background-color: rgba(11, 14, 15, .65); 
    width:252px; 
} 

#t_gallery_middle div{ 
    display:inline-block; 
    text-align:center; 
    padding:5px 10px 5px; 
    vertical-align:top; 
} 

JSFiddle:https://jsfiddle.net/0waobznt/
Was ich versuche zu zielen:http://i.imgur.com/g44Kkl1.png

+0

Diese Layouts zu verwenden, darf nicht mit Tabellen tun. Sie werden in allen Bereichen Probleme bekommen. Wechseln zu einfach divs mit Inline-Block oder Float oder Flexbox und es funktioniert, perfekt und ohne Überraschungen –

+0

Ich werde versuchen, das dann zu untersuchen - ich habe leider nicht viel Erfahrung mit divs allein. CSS & Divs sind Dinge, mit denen ich noch nicht sehr vertraut bin. – Someone

+0

Werfen Sie einen Blick auf 'display: flex', sollten Sie tun, was Sie wollen, mit divs auch, die Ihren Code semantisch korrekt machen - nie Tabellen für das Layout verwenden, sollten sie nur für tabellarische Daten – Pete

Antwort

1

Hallo ich Ihren Code geändert haben, um das Ergebnis zu erhalten, wollte in das Bild. Versuchen Sie den folgenden Code

table#t_gallery, table#t_content{ 
 
\t border-collapse:separate; 
 
\t border-spacing:0px; 
 
\t margin:0px auto; 
 
\t padding:0px; 
 
    
 
} 
 
table#t_global{ 
 
\t border-collapse:separate; 
 
\t border-spacing:20px; 
 
\t margin:0px auto; 
 
\t padding:0px; 
 
    
 
} 
 
table#t_gallery { 
 
\t margin-top:12px; 
 
} 
 

 
table#t_gallery td { 
 
\t padding:0px; 
 
} 
 
table#t_gallery tr { 
 

 
    margin:20px !important; 
 
} 
 
#t_gallery_top, #t_gallery_bottom { 
 
\t background: url("http://seac.crystal-dreams.us/top.png") 0 0 no-repeat; 
 
\t height:6px; 
 
\t width:265px; 
 
} 
 

 
#t_gallery_bottom { 
 
\t background-image:url("http://seac.crystal-dreams.us/bottom.png"); 
 
} 
 

 
#t_gallery_left, #t_gallery_right { 
 
\t background: rgba(11, 14, 15, .5) url("http://seac.crystal-dreams.us/left.png") 0 0 repeat-y; 
 
\t width:6px; 
 
} 
 

 
#t_gallery_right { 
 
\t background-image:url("http://seac.crystal-dreams.us/right.png"); 
 
} 
 

 
#t_gallery_middle { 
 
\t background-color: rgba(11, 14, 15, .65); 
 
\t width:252px; 
 
    text-align:center; 
 
\t border-spacing:100px; 
 
} 
 

 
#t_gallery_middle div{ 
 
\t display:inline-block; 
 
\t text-align:center; 
 
\t padding:5px 10px 5px; 
 

 
}
<table id="t_global"> 
 
<tr><td><table id="t_gallery"> 
 
    <tr> 
 
\t <td id="t_gallery_top" colspan="3"></td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_left"> </td> 
 
\t <td id="t_gallery_middle"> 
 

 
\t <!-- Do not edit above //--> 
 
\t 
 
<div > 
 
\t \t \t \t <a href="http://angelears.crystal-dreams.us/blanksc.png" rel="gallery-mcplush" title="Blankness"><img src="http://seac.crystal-dreams.us/blanksc.png" width="200" height="200" border="0"></a> <br> 
 
\t \t \t \t Unknown item<br> 
 
     Gotten from: Unknown<br> 
 
     Still Available: Unknown</div>  
 
\t \t \t \t 
 
\t \t \t 
 
\t <!-- Do not edit below //--> 
 
\t </td> 
 
\t <td id="t_gallery_right"> </td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_bottom" colspan="3"></td> 
 
    </tr> 
 
    
 

 
</table></td><td><table id="t_gallery"> 
 
    <tr> 
 
\t <td id="t_gallery_top" colspan="3"></td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_left"> </td> 
 
\t <td id="t_gallery_middle"> 
 

 
\t <!-- Do not edit above //--> 
 
\t 
 
<div > 
 
\t \t \t \t <a href="http://angelears.crystal-dreams.us/blanksc.png" rel="gallery-mcplush" title="Blankness"><img src="http://seac.crystal-dreams.us/blanksc.png" width="200" height="200" border="0"></a> <br> 
 
\t \t \t \t Unknown item<br> 
 
     Gotten from: Unknown<br> 
 
     Still Available: Unknown</div>  
 
\t \t \t \t 
 
\t \t \t 
 
\t <!-- Do not edit below //--> 
 
\t </td> 
 
\t <td id="t_gallery_right"> </td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_bottom" colspan="3"></td> 
 
    </tr> 
 
    
 

 
</table></td><td><table id="t_gallery"> 
 
    <tr> 
 
\t <td id="t_gallery_top" colspan="3"></td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_left"> </td> 
 
\t <td id="t_gallery_middle"> 
 

 
\t <!-- Do not edit above //--> 
 
\t 
 
<div > 
 
\t \t \t \t <a href="http://angelears.crystal-dreams.us/blanksc.png" rel="gallery-mcplush" title="Blankness"><img src="http://seac.crystal-dreams.us/blanksc.png" width="200" height="200" border="0"></a> <br> 
 
\t \t \t \t Unknown item<br> 
 
     Gotten from: Unknown<br> 
 
     Still Available: Unknown</div>  
 
\t \t \t \t 
 
\t \t \t 
 
\t <!-- Do not edit below //--> 
 
\t </td> 
 
\t <td id="t_gallery_right"> </td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_bottom" colspan="3"></td> 
 
    </tr> 
 
    
 

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

+0

Vielen Dank! – Someone

Verwandte Themen