22 svar · 746 visningar · startad av bassebhu
Hej alla vakna!
Jag förstår hyfsat hur man använnder float och clear, men ibland så tokar allt upp sig om det blir för mycket material i en div. Gränsen är ju så knapp. En pixel fel och hela sidan går åt skogen.
Det känns som att jag har missat något värdefullt med dessa två funktioner.
Kan något förklara dem eller länka till en sida som går igenom det?
Tack!
Hej ;)
De tutorials som finns på den här sidan http://css.maxdesign.com.au/floatutorial/ fick mig att börja fatta hur float och clear funkar. Hoppas de kan hjälpa för dig också.
OK, taxi! Ska kolla.
En jättebra artikel:
http://www.autisticcuckoo.net/arkiv.php?id=2004/12/10/flytande
ok. tack.
om jag vill ha två divar bredvid varandra och en ska vara 100px och den andra ska gå 100% då?
sätter jag den högra till 100% så vill den ha en egen rad och ta 100%. auto verkar inte funka heller. nu blir den så stor som innehållet i den är.
detta måste väl gå att lösa? går ju ypperligt med tabeller!
ok. jag förstår nu att man antingen sätter fast vidd på float-objekt eller så låter man dem bli lika stora som innehållet.
Jag löste mina "celler" så att jag hade en float: left och sedan en till höger utan float som jag satte en margin-left på så att den gick över floaten. Funkade bra och blir automatiskt 100%.
Sätt float:left på bara den vänstra diven.
Ex:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;}
#left {
float:left;
width:100px;
background:#eee;
}
#right {
background:#eda;
}
</style>
</head>
<body>
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
hehe, nån sekund sen :)
fast jag satte en stor margin-left på min högra div i stället och det funkade.
om man inte har något marginvärde så klossades de ihop och jag vill ha en liten lucka. det gick inte att sätta en margin-right på float-diven konstigt nog.
jag kanske glömde nåt värde. kör på min som funkade hur som helst. tack!
Ja, skillnaden blir att den högra divven kapslar in den vänstra med sitt innehåll under, om den högra diven blir högre.
Men du vill antagligen inte att den ska göra det. Med margin-left som du kör med blir det mer som kolumner.
Ok, men om vi säger att jag vill ha en tabelliknande struktur med 4 rader och 4 kolumner som alla ska vara expansiva i sidled beroende på innehåll. Hela "tabellen" ska täcka upp 100% bredd av den "tabellen" den är inkapslad i. Hur gör jag det med divar?
Med tabell är det ju enkelt:
<table width="100%">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
Där kan det vara hur mycket information som helst och cellerna anpassar sig själva som det behövs.
Jag kan inte komma på något smart sätt att lösa det med divar (som alla här säger är så bra). Och nu har jag börjat diva allt på sidorna så då vill jag ju göra det fullt ut!
Använder jag float så säger ni ju att man alltid ska ha fast bredd på dem och då är de inte särkilt expansiva. Använder jag inte float så lägger sig alla divar under varann.
Vad är det jag har missat? Tack!
Ja då kan du använda lite väl vald CSS2 (display:table, display:table-row och display:table-cell) - fast det är klart, det funkar ju inte i MSIE eftersom den slutade utvecklas förra seklet eller så och bara har uttalat stöd för CSS1 :P
Se http://www.w3.org/TR/CSS2/tables.html#q2
"Flytande layouter" (dvs layouter med många "icke-fasta" mått) är - ehm- krångliga ( :e ) att få till med CSS, bl.a. pga uselt webbläsarstöd och jag är osöker på om det du vill uppnå ens går att göra utan att ta till en massa "friser-skript" som trixar om positioner och mått så att det blir rätt trots bristen på CSS2-stöd i majoriteten av webbläsarna...
Så kör du med tabeller här (men glöm inte summary, caption, th, scope och headers om din "div-ambition" är att göra din sida tillgänglig (se t.ex. http://www.456bereastreet.com/archive/200410/bring_on_the_tables/ ) :) )
<table width="100%" summary="Min hemsida har en grafisk layout som delar upp sidan i fyra rader och fyra kolumner">
<caption>Min hemsida</caption>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
Som jag brukar säga - När det gäller layout finns det saker man inte kan göra med CSS och det finns saker man inte kan göra med tabeller... Det gäller IMHO att välja "rätt" layoutmetod för varje ändamål och inte stirra sig alltför blind på principer :bire
Tack för svaret. Jag får bara mer och mer den uppfattningen att tables fortfarande är mer bakåtkompitabelt att använda än stylade div:ar, så det verkar som att jag får haka på er om 5 år eller nåt grabbar :P
Jag får hellre min sida precis som jag vill i många webbläsare och använder tables, än ett plus i kanten för att den validerar i någon maskin.
Så kör du med tabeller här (men glöm inte summary, caption, th, scope och headers om din "div-ambition" är att göra din sida tillgänglig (se t.ex. http://www.456bereastreet.com/archi..._on_the_tables/ :)) )
Läs under "For data tables only" på sidan du länkade till...
Om man använder tabeller för saker som inte är tabulär data, använd då bara TR och TD. Använder du TH och CAPTION kommer skärmläsare (och andra assisterande teknologier) att tro att det faktiskt är tabulär data, och kommer därför att läsa upp det som tabulär data vilket förvirrar användaren ännu mer...
Om jag har två divar bredvid varandra som jag sätter float: left och float: right på och båda får värdet 50% i vidd. vad exakt i 50% + 50% = 100% är det internet explorer på en pc inte förstår? det funkar klockrent i 5(!) webbläsare på mac.
Jag har enbart två divar inlagda mellan body och body har ingen margin eller padding och ändå vill det inte!!
Sjukt frustrerande. Alltid IE på pc som sätter sig emot allt annat. Och IE på pc är väl den läsare som de flesta använder x(
Förslag eller alternativa lösningar emottages varmt!
Jo, har själv märkt det där. Kanske räknar IE fel på fönstrets bredd och avrundar fel.
Kör så här:
#left {
float:left;
width:49.9%;
}
#right {
float:left;
width:50%;
}
Med float:left på båda så uppstår det pyttelilla glappet längst till höger och syns inte lika väl.
zcorpan skrev:
[...] och kommer därför att läsa upp det som tabulär data vilket förvirrar användaren ännu mer...
Hmm... Det där är lite väl hårddraget... Tillgänglighet har inget med huruvida en skärmuppläsare läser på ena eller andra sättet - utan hur det som faktiskt läses upp förstås av lyssnaren (och jag hävdar att man inte automatiskt blir förvirrad bara för att skärmläsaren talar om att det är en tabell man lyssnar på - särskilt inte om man med en summary talar om varför man har en tabell just där på sidan :) ).
... och jo - det *är* tillåtet enligt WCAG 1.0 att använda tabeller även för layout "om inget annat funkar" - som i basses exempel :P
Ibland kan man, som sagt, inte undvika det...
Eftersom TABLE har missbrukats för sånt som inte är tabulär så försöker skärmläsare som JAWS lista ut om den tabell du använt är tabulär data eller inte, genom att kolla efter element som THEAD, TH, och CAPTION. Om man använder dessa element för en tabell som är tänkt för layout så kommer JAWS att tro att du har tabellen för tabulär data.
Jag säger inte att man inte "får" använda tabeller för layout, men om man gör det så är det bättre att låta bli elementtyper som TH och CAPTION (och även summary i min mening) för att inte skärmläsare ska få allt om bakfoten. ;)
Anser fortfarande att du hårddrar lite väl mycket här...
Det är långt från
456bereastreet.com skrev:
Otherwise you will risk confusing users of non-visual user agents even more.
till att hävda att skärmläsare skulle "få allt om bakfoten" bara för att manslänger in en ledtext i en summary - särskilt som det inte finns några garantier att det skulle påverka mer åt det ena eller andra hållet för alla tabellbaserade layouter :P
Min punkt är fortfarande att man under vissa förhållanden kan förenkla förståelsen av sin tabellbaserade sida genom att använda de tillgänglighetsattribut och "extrataggar" för tabeller som finns att tillgå på mer eller mindre "lämpliga" eller "fiffiga" sätt och att det inte garanterat blir fel om man väljer att utnyttja dem...
... och man har hursomhelst ingen aning om hur det egentligen kan upplavs om man inte provlyssnar sidan själv... Precis som man egentligen aldrig kan vara säker på hur en webbsida ser ut på en Mac om man inte har en Mac osv.
That's all.
:bire
... och man har hursomhelst ingen aning om hur det egentligen kan upplavs om man inte provlyssnar sidan själv...
Det har du rätt i. :) Jag laddade därför ner en demoversion av JAWS. Så här låter koden du postade tidigare:
Page has no links. Table caption colon Min hemsida. Summary colon Min hemsida har en grafisk layout som delar upp sidan i fyra rader och fyra kolumner. Table with four columns and four rows. One two three four one two three four one two three four one two three four table end.
Här på webforum används också tabeller för layout, men JAWS talar inte om att det är en tabell eftersom den "vet" att det inte är tabulär data.
:bire
:birp