19 svar · 1 056 visningar · startad av eddy1
Vad ska man använda sig av för att placera ut objekten på en websida korrekt..
Förr använde jag alltid tabeller som var nästlade m.m. Har börjat prova CSS nu och skapat boxar m.m men det verkar innehålla en del buggar och man får inte alltid samma resultat mellan dom olika versionerna av explorer och firefox??
Några tips?
Hur gör jag föresten om jag vill ha t.ex en tabell centrerad och låst till 800px bred??
Mvh
eddy1 skrev:
Hur gör jag föresten om jag vill ha t.ex en tabell centrerad och låst till 800px bred??
<center>
<table width="800">
INNEHÅLL
</table>
</center>
Eller på ett mer korrekt sätt.
<body style="text-align: center;">
<table style="width: 800px; margin:0 auto; text-align: left;">
innehåll
</table>
</body>
mv icaaq
eddy1 skrev:
...vet inte ens hur jag kunde ställa frågan?
...förmodligen genom att klicka på knappen "skapa ny tråd"?! ;)
eddy1 skrev:
att det kan vara så...
Men <center>, används det än?
Det beror på hur du infogar attributet i sammanhanget. Som icaaq tidigare skrev så ska du definiera värderna, att skriva ut <center> säger egentligen ingenting, korrekt kod är <div align="center">den centrerade boxen/tabellen</div>
Eller om det handlar om en text <p align="center">den centrerade texten</p>
Det bästa är dock att låta stilmallen sköta detta :)
mvh/Lena
<center> säger att dess innehåll ska centreras. <div align="center"> säger samma sak...
kaxigt skrev:
Det bästa är dock att låta stilmallen sköta detta :)
Dito! :bire
kaxigt skrev:
Det bästa är dock att låta stilmallen sköta detta :)
Hur styr man då en viss tabell, så den blir centrerad i webbläsaren?
Jag testade att ange class="tabell" i table-taggen, och i stilmallen .tabell {align: center;} men det gick inte. Även text-align: justify; finns inom klamrarna, kan det vara detta som "stör" eller har jag bara skrivit fel attribut?
Jag förstår inte riktigt vad det är du vill centrera? Klart är att det finns flera olika tillvägagångssätt att göra på...
text-align: center /* Fungerar korrekt i de flesta webbläsare */
margin: 0 auto; /* Här kan ibland IE få problem */
Testa att ta bort justify för att se om den krånglar till det...
Jag vill också poängtera att det inte är CSS som är buggigt! Det är det att olika webbläsare är olika bra på att följa standards... IE är tyvärr en riktig rövare när det gäller sånt här :( Safari som finns i MAC uppges vara den enda webbläsare som klarar alla test (eller var det mest bara png?). Annars klarar sig Mozilla Firefox och Opera väldigt bra.
Dock så hoppas många, inklusive jag, att IE skärper sig i sin kommande version och att de slänger in stöd för CSS2...
text-align:center centrerar, just det, texten. margin:0 auto gör att höger och vänster marginal blir "auto", vilket betyder att tabellen hamnar i mitten. IE6 klarar det om den får vara i Standards mode. :)
lilja skrev:
Safari som finns i MAC uppges vara den enda webbläsare som klarar alla test
"alla test"? Vilka "alla test"? :o
zcorpan skrev:
"alla test"? Vilka "alla test"? :o
http://www.idg.se/ArticlePages/200511/03/20051103165743_MW/20051103165743_MW.dbp.asp
Hmm, där var min källa. Jag korrigerar då till "enda webbläsaren som klarar Acid2-testet". Jag gjorde själv testet i FF och IE. Resultatet var slående, båda webbläsarna visade bilden helt skummt.
Jag undrar dock om det finns jämförande tester av vilka webbäsare som följer standarder som XHTML, CSS, CSS2, och så vidare? Klart är dock att IE suger rätt hårt...
fridan skrev:
Hur styr man då en viss tabell, så den blir centrerad i webbläsaren?
Jag testade att ange class="tabell" i table-taggen, och i stilmallen .tabell {align: center;} men det gick inte. Även text-align: justify; finns inom klamrarna, kan det vara detta som "stör" eller har jag bara skrivit fel attribut?
Jag vet inte om jag fattar dig helt fel nu, men jag tolkar att det är tabellen som sådan du vill centrera och inte texten inuti den?
Du vet ju när du arbetar med tabeller att för att få vissa tabeller och ligga på absoluta positioner så måste man trixa en hel del med nästlade tabeller, kanske flertalet nästlade tabeller i samma td till och med. Tabeller kan man alltså inte "lika lätt" positionera som div layers, såvida du inte enbart arbetar med enskilda tabellceller(en tabell med en ruta). Div layer kan du som namnet antyder positionera ovanpå varandra efter som dessa är lager, men det är inte tabeller.
Allmänt gäller ju att du skapar en class som du stoppar in i tabellkoden, men just tabeller och classer kan bli problem eftersom man just måste nästla dem och det verkar ofast vara så att vissa koder blir prio hur mycket du än anger andra. Varför inte gå över till divar helt?
jag vet inte om detta var det svar du sökte :p
<div style="margin: 0 auto; width: 100%;">
<table>
</table>
<tr>
<td>
</td>
</tr>
.
.
.
</table>
</div>
Annars tror jag det här ska fungera också, kanske till och med bättre än så man ska göra?
<div style="text-align: center; width: 100%;">
<table>
</table>
<tr>
<td>
</td>
</tr>
.
.
.
</table>
</div>
Med dessa två olika koder tror jag att tabellen kommer bli centrerad. Tänk dock på bredden på div-en. Om inte 100% fungerar kanske du vill ha ett absolut värde istället?
Det där fungerar nog om man har en enkel tabell, men ska man en viss tabell som frida skrev så kan man inte bara slänga in en absolut positionerad div mitt i alltihop, var tar den vägen tror du om optimeringen är annorlunda än den som den är skapad för? Jag tror inte på att slänga in tabeller i divar, eller tvärtom, för att styra utseendet, då är det nog bättre att helt använda div layers och css, iaf i detta fall. Ponera på att hon har en nästlad trekolumns tabell och vill att en specifik td(med en tabell i denna) ska hamna på ett specifikt ställe i tabellen som inte gör plats för denna absoluta positionering eftersom där ligger en annan td som används för att nästla in den förra. Då kommer diven att förskjuta hela nästlingen. Man kan inte tvinga in en tabell på ett ställe om det inte finns plats för den genom att använda div och få det hela att fungera tillfredställande, det vore som att försöka bygga in en rum som är större än sjäva bostadsytan och tro att den ska passa.
Drt är möjligt att jag har missuppfattat allt men nån annan kanske har en annan uppfattning? :)
Okej, nu kanske jag hamnar lite utanför ämnet här men i så fall ber jag om ursäkt. Jag har kollat en massa på nätet nu men det bara snurrar runt i huvet på mig så jag tänkte att jag kanske kan fråga nån vänlig själ här...
Vilket är det absolut lättaste sättet att dela upp sidan i 3 kolumner, med css? Nu har jag frames, men tänkte testa att använda css även till det (om jag orkar). Och inte tabeller heller, alltså.
Men som sagt, det är så mycket att läsa så jag blir helt virrig.
:l
Jag menar alltså, hur ska jag skriva i koden, och var ska jag skriva det? Försöker lära mig css ordentligt så snälla gör det inte för komplicerat och invecklat... :)
Och en sista fråga... är det så hemskt att använda frames?
blåjeans skrev:
Och en sista fråga... är det så hemskt att använda frames?
Ja det är det... :P
Hmm, tror det är bäst att försöka illustrera. Tar med en tabell också som jag centrerar...
Jag tror att jag hade gjort såhär:
<style type="text/css">
#bodywrap {
width:740px;
margin: 0 auto;
}
#left {
position:relative;
float:left;
width:140px;
background-color:#D3D3D3;
}
#right {
position:relative;
float:right;
width:140px;
background-color:#969696;
}
#main {
position:relative;
float:left;
width:460px;
background-color:#676767;
}
.testtabell {
margin: 0 auto;
background-color:#00CCCC;
}
</style>
<div id="bodywrap">
<div id="left">
Vänster
<p>En meny kanske</p>
<p>En meny kanske</p>
<p>En meny kanske</p>
</div>
<div id="main">
<h1>Mitten</h1>
<p>Ett stycke med lite text på sidan...</p>
<p>Ett stycke med lite text på sidan...</p>
<p>Ett stycke med lite text på sidan...</p>
<p>Ett stycke med lite text på sidan...</p>
<p>Ett stycke med lite text på sidan...</p>
<p>Ett stycke med lite text på sidan...</p>
<table class="testtabell">
<tr>
<td>
test
</td>
<td>
testar
</td>
</tr>
<tr>
<td colspan="2">
tesing
</td>
</tr>
</table>
</div>
<div id="right">
Höger
<p>Någon mer information</p>
<p>Någon mer information</p>
<p>Någon mer information</p>
<p>Någon mer information</p>
</div>
</div>
Bra eller dåligt? Jag är ingen expert men det verkar fungera i mina ögon :) Fast det käns ändå fel på något sätt, speciellt positioneringen av mitten-diven? :r Om man vill ha en bagrund likt den som finns fast att den skall gå ändå ner i alla tre kolumnerna så kan man lägga in en bagrund i #bodywrap som repeterar lodrät...
kaxigt skrev:
Jag vet inte om jag fattar dig helt fel nu, men jag tolkar att det är tabellen som sådan du vill centrera och inte texten inuti den?
Du vet ju när du arbetar med tabeller att för att få vissa tabeller och ligga på absoluta positioner så måste man trixa en hel del med nästlade tabeller, kanske flertalet nästlade tabeller i samma td till och med. Tabeller kan man alltså inte "lika lätt" positionera som div layers, såvida du inte enbart arbetar med enskilda tabellceller(en tabell med en ruta). Div layer kan du som namnet antyder positionera ovanpå varandra efter som dessa är lager, men det är inte tabeller.
Allmänt gäller ju att du skapar en class som du stoppar in i tabellkoden, men just tabeller och classer kan bli problem eftersom man just måste nästla dem och det verkar ofast vara så att vissa koder blir prio hur mycket du än anger andra. Varför inte gå över till divar helt?
jag vet inte om detta var det svar du sökte :p
Japp, Lena. Det är själva tabellen jag skulle vilja få centrerad i webbläsarfönstret! :) Texten ska vara vänsterjusterad.
Det är oftast bökigt att använda tabeller, tycker jag. Dessvärre har jag ingen koll alls på det där med div layers. :/ Jag förstår att det är ett bättre sätt för att få grejor att hamna där man vill.
Jag får ta och försöka läsa på om divar. Länktips emottages tacksamt. :)
lilja skrev:
Ja det är det...
Hmm, tror det är bäst att försöka illustrera. Tar med en tabell också som jag centrerar...
Jag tror att jag hade gjort såhär:
Tack!! Vad snällt. :) Det där såg ju lite enklare ut än de exempel jag har sett, då har det varit en massa kod som jag inte fattar vad det är till för.
Jag ska kolla lite närmare på det här och se om jag får till nåt. :)
blåjeans skrev:
Tack!! Vad snällt. :) Det där såg ju lite enklare ut än de exempel jag har sett, då har det varit en massa kod som jag inte fattar vad det är till för.
Jag ska kolla lite närmare på det här och se om jag får till nåt. :)
Haha, vad bra! Jag försökte med att enbart ta med det mest nödvändiga förutom tabellen... Du menar alltså att jag lyckades någorlunda? :D