15 svar · 871 visningar · startad av Lasse H
Jag vill gå ifrån tabeller i html och använda css istället.
Har dock svårt för att läsa teknisk engelska så jag frågar här istället.
Hur ser till ex csskoden ut för en tabell tabell som är 100% bred
10 rader, 3 kolumner som var och en har fast bredd ca 33% oavsett innehåll,
bakgrundfärg celler #262626
cellmellanrum på 5px färg #353535
Tänkte ha thumbnails i tabellen och bildvisningen med lightbox men det är csskoden till tabellen som är intressant
Det är aningen svårt att svara på utan att veta hur du gjort layouten på övriga sidan eftersom det går att göra på rätt många olika sätt. Läser du inte bilderna dynamiskt eller ska du bara göra en html-kod som presenterar bilderna?
Den enklaste lösningen är nog att ha float:left; på bilderna i alla kolumner utom den längst till höger.
Tja, kanske detta duger då?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
TABLE {WIDTH:100%;BACKGROUND-COLOR:#353535;BORDER:1px SOLID BLACK;BORDER-COLLAPSE:collapse;}
TD {WIDTH:33%;HEIGHT:50px;BACKGROUND-COLOR:#262626; BORDER:1px SOLID BLACK;COLOR:white;PADDING:5px}
</STYLE>
</HEAD>
<BODY>
<table cellpadding=2 cellspacing=5 >
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<td>Rad 2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 4</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 5</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 6</td>
<td>Du får själv fylla på med innehåll</td>
<td></td>
</tr>
<tr>
<td>Rad 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 8</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 9</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Rad 10</td>
<td></td>
<td></td>
</tr>
</table>
</BODY>
</HTML>
Ja den funkade ju med lite modifiering.
Tack!
Du kan väl lägga ut din "modifiering" då tack!
Kanske kan va till hjälp för andra med liknande problem.
Lasse H skrev:
Ja den funkade ju med lite modifiering.
Tack!
Hmm... nu är det nog lite språkförbistring på gång....
Jag har personligen inget emot tabeller för layout alls i vissa fall. Men när man snackar om att göra layout med CSS så menar man att man skippar tables helt och hållet och jobbar med divvar som man formaterar och placerar ut med hjälp av CSS. Inte att fortsätta använda tabeller.
Du borde göra en bild/skiss i Photoshop och visa hur du vill ha sidan. Då är det lättare att visa hur du ska göra med CSS - på "riktigt".
Danne V skrev:
Hmm... nu är det nog lite språkförbistring på gång....
Jag har personligen inget emot tabeller för layout alls i vissa fall. Men när man snackar om att göra layout med CSS så menar man att man skippar tables helt och hållet och jobbar med divvar som man formaterar och placerar ut med hjälp av CSS. Inte att fortsätta använda tabeller.
Du borde göra en bild/skiss i Photoshop och visa hur du vill ha sidan. Då är det lättare att visa hur du ska göra med CSS - på "riktigt".
Bra där Danne!
Vill ju lära mig göra tabeller helt i css, återkommer med skiss under dagen.
Lasse H skrev:
Bra där Danne!
Vill ju lära mig göra tabeller helt i css, återkommer med skiss under dagen.
Öh...äh.....jag är absolut ingen guru, men visst kan jag litegrann och hjälper gärna till i mån av tid. Ganska säker på att andra, avsevärt mer begåvade och pålästa medlemmar också bidrar. Ser fram emot skissen.
Red: Då heter det alltså inte "göra tabeller i css" eftersom det kan vara förvirrande (menar han <tables> i koden eller en layout i tabellform?)
Danne V skrev:
Öh...äh.....jag är absolut ingen guru, men visst kan jag litegrann och hjälper gärna till i mån av tid. Ganska säker på att andra, avsevärt mer begåvade och pålästa medlemmar också bidrar. Ser fram emot skissen.
Red: Då heter det alltså inte "göra tabeller i css" eftersom det kan vara förvirrande (menar han <tables> i koden eller en layout i tabellform?)
Ja nog tror jag någon kommer att hjälpa mig med detta..:-)
Det var ju egentligen det jag var ute efter, att göra tabeller helt i css.
Annars funkar ju Bosses css-stylade html-tabell också...
skiss kommer
Skulle vara tacksam om någon kunde skriva denna tabell i css:
bakgrundfärg #262626, kantlinje #353535,
skall lägga thumbnails i cellerna med bredd 175 px
total bredd tabell 600 px,
bredden på cellerna 33%
höjden på cellerna ger sig väl själv beroende på innehåll?
Använder extern css mall
STOPP
nu blir jag sådär orolig igen ;)
Men när man snackar om att göra layout med CSS så menar man att man skippar tables helt och hållet
NEJ man "får" fortfarande använda tabeller till det de är till för, dvs visa tabelldata
en tabell med thumbnails är ett gränsfall, men i många lägen ÄR faktist en tabell det enklaste sättet att få till det. vill man lösa det med divs och css så blir det nånting i stil med:
Html:
<div id="thumbWrapper">
<div class="Thumb">Bild</div>
<div class="Thumb">Bild</div>
<div class="Thumb">Bild</div>
<div class="Thumb">Bild</div>
<div class="Thumb">Bild</div>
<div class="Thumb">Bild</div>
<div style="clear:both;"></div>
</div>
CSS
#thumbWrapper{
width:600px;
background-color:#353535;
padding:5px;
text-align:center;
}
.Thumb{
width:190px;
float:left;
background-color:#262626;
margin:5px;
}
Nånting åt det hållet iaf
det går ju att lösa med float: left men det finns ju display: table, td, tr och sånna roliga saker att leka med, då får man vad jag förstår samma egenskaper som en html-tabell fast den är helt driven av css =) *crazy* om ni frågar mig =D
Mvh
Tobias
EDIT! För att inte vara för snål så postar jag en länk till där man kan läsa om display table-cell, table-row, table-group osv
rhdf skrev:
STOPP
nu blir jag sådär orolig igen ;)NEJ man "får" fortfarande använda tabeller till det de är till för, dvs visa tabelldata
en tabell med thumbnails är ett gränsfall, men i många lägen ÄR faktist en tabell det enklaste sättet att få till det. vill man lösa det med divs och css så blir det nånting i stil med:
Html:<div id="thumbWrapper"> <div class="Thumb">Bild</div> <div class="Thumb">Bild</div> <div class="Thumb">Bild</div> <div class="Thumb">Bild</div> <div class="Thumb">Bild</div> <div class="Thumb">Bild</div> <div style="clear:both;"></div> </div>CSS
#thumbWrapper{ width:600px; background-color:#353535; padding:5px; text-align:center; } .Thumb{ width:190px; float:left; background-color:#262626; margin:5px; }Nånting åt det hållet iaf
Jepp, det där funkade när jag satte en fast höjd på 300px på tabellcellerna annars kom tummarna inte riktigt på rad.
Fast jag skulle vilja att tummarna åkte ner ca 5 px i överkant av cellen så det blir en grå "ram" runt bilden.
Är det margin eller padding det heter.... :OO ?
Sätt padding:5px; på .Thumb
rhdf skrev:
Sätt padding:5px; på .Thumb
Tack för hjälpen, rhdf...... :)
Nu med några smärre modifieringar ser det ut precis som jag vill.
Hoppas matematiken stämmer också?
.Thumb{
width:175px;
height: 300px;
float:left;
background-color:#262626;
margin:5px;
padding:7px;
}
Lasse H skrev:
Tack för hjälpen, rhdf...... :)
Nu med några smärre modifieringar ser det ut precis som jag vill.
Hoppas matematiken stämmer också?.Thumb{
width:175px;
height: 300px;
float:left;
background-color:#262626;
margin:5px;
padding:7px;
}
Testa i olika webbläsare. Lägg en länk här så testar folk åt dig eller gör det själv här: http://browsershots.org/
Har man räknat lite fel med marginaler, bredder, paddings och annat så kan nämligen en del webbläsare acceptera felen, medan andra reagerar direkt och i såna kan dina bilder hamna t.ex. under varandra.