webForumDet fria alternativet

Problem med "överlappande" div:ar

12 svar · 871 visningar · startad av haider

haiderMedlem sedan jan. 2003956 inlägg
#1

Hej!

Sen jag fick lära mig att man inte ska hålla på med tables så mycket utan försöka gå över till div:ar så har jag börjat använda mig mer av det.
Vad jag stötte på var att när jag skapade ett system som ungefär nedanstående:

<div>
<div style="float: left">lite text></div>
<div style="float: right">lite text></div>
</div>

<div> text</div>

.. så överlappade den nedre diven den övre (som innehåller två små divar i sig)

Jag wrappade de två övre divar med en div och det nedre text-stycket med en div i hopp om att det nedre textstycket inte skulle hamna överlappande på de två divvarna ovan.

Hur bör jag göra?

LedelMedlem sedan dec. 2004736 inlägg
#2
<div>
<div style="float: left">lite text></div>
<div style="float: right">lite text></div>
</div>

<div style="clear: both;"> text</div>

?

haiderMedlem sedan jan. 2003956 inlägg
#3

Hmm, det gav en oönskad effekt.
Måste man cleara?

Men om jag frågar så här då; om jag vill placera två div:ar bredvid varandra, en som är på vänster sida (default) och en som ska vara på höger sida.
Finns det alternativ till float?

silfverMedlem sedan apr. 200312 679 inlägg
#4

haider skrev:

Finns det alternativ till float?

position: relative;

haiderMedlem sedan jan. 2003956 inlägg
#5

Tack Silfver, men det alternativet kräver ju att man anger ett avstånd i pixlar.
Det finns då ingen align eller ännu ett alternativ?

TroxyMedlem sedan mars 20041 505 inlägg
#6

Det är möjligt att du kanske kan använda absolut positionering.
Tyvärr så försvinner elementen ur dokumentflödet då.
Jag är inte säker på om det går att lösa med clear.

<div style="position:relative;">
<div style="position:absolute; top:0; left:0;">lite text</div>
<div style="position:absolute; top:0; right:0;">lite text</div>
</div>
zcorpanMedlem sedan dec. 20042 245 inlägg
#7

haider skrev:

Tack Silfver, men det alternativet kräver ju att man anger ett avstånd i pixlar.

Nej. Du kan använda vilka enheter du vill.

haider skrev:

Det finns då ingen align eller ännu ett alternativ?

Du kan använda negativa marginaler, display:table &c, display:inline-block, absolut positionering eller floats.

Förmodligen vill du bara använda float på den vänstra diven, och låta den högra vara statisk.

Vilken oönskad effekt gav clear? Har du andra floats tidigare i dokumentet?

haiderMedlem sedan jan. 2003956 inlägg
#8

Jag tänkte blåsa liv i den här tråden på nytt, för när jag först skrev den så verkar det som om jag inte visste problemets vidd.

Det som jag alltså har haft problem med är att få div-blocken att placera sig bredvid varandra, ungefär som bilder. Hela tanken är att jag inte ska använda mig av tabeller för alla som ser att jag använder tabeller komenterar att det är gammalmodigt och att CSS är det som gäller nu.

Min fråga är:
Finns det något sätt att få div-blocken att hamna bredvid varandra (float är lite konstig) eller ska jag istället positionera dem exakt med hjälp av position?
Det sistnämnda verkar ändå lite omständigt.

Sen skulle jag vilja, precis som liknelsen ovan med bilder, kunna lägga <br> eller <p> för att skapa en ny rad. Arbetar man med float så flyter diven på allting. Jag vill inte att den ska göra det, och då kanske float är fel sätt o gå tillväga på?

voigtann1Medlem sedan juni 20019 519 inlägg
#9

Om det är data du ska presentera så får du ju använda dig av tabeller... om det är en ren layout fråga så är tabeller(sid design) så är det CSS som gäller.

<div style="float:left">bild1</div>
<div style="float:left">bild2</div>

Kommer lista brevid varandra.

<div style="clear:both"></div>

kan fungera ungefär som <br> i ditt fall. om jag har förstått det hela rätt..

TroxyMedlem sedan mars 20041 505 inlägg
#10

haider skrev:

Hela tanken är att jag inte ska använda mig av tabeller för alla som ser att jag använder tabeller komenterar att det är gammalmodigt och att CSS är det som gäller nu.

Om vi bortser från vad alla andra säger, så undrar jag i vilket sammanhang du ska använda detta och vad det är för typ av innehåll? :)

Allt snack om div och css de senaste åren har enligt mig eskalerat i en överdriven häxjakt på tabeller. :bla
Det är inte fel att använda tabeller om syftet är att bygga just en tabell. Vad som är och inte är en tabell råder det delade meningar om och här handlar det helt enkelt om personliga åsikter och bedömningar utifrån enskilda fall.

Låt mig gissa att du bygger ett fotogalleri där bilderna ska presenteras i ett rutnät?
I detta fall är det enligt mig rätt att använda tabeller, eftersom det är en tabell som innehåller bilder. x(

God natt.

Danne VMedlem sedan aug. 20068 090 inlägg
#11

Troxy skrev:

Om vi bortser från vad alla andra säger, så undrar jag i vilket sammanhang du ska använda detta och vad det är för typ av innehåll? :)

Allt snack om div och css de senaste åren har enligt mig eskalerat i en överdriven häxjakt på tabeller. :bla
Det är inte fel att använda tabeller om syftet är att bygga just en tabell. Vad som är och inte är en tabell råder det delade meningar om och här handlar det helt enkelt om personliga åsikter och bedömningar utifrån enskilda fall.

Låt mig gissa att du bygger ett fotogalleri där bilderna ska presenteras i ett rutnät?
I detta fall är det enligt mig rätt att använda tabeller, eftersom det är en tabell som innehåller bilder. x(

God natt.

Bra skrivet! (y)
Håller fullständigt med.
divvar/css är jättebra - tills dom inte är jättebra längre. Då är det bara att använda tabeller (sjävklart formaterade med css).

haiderMedlem sedan jan. 2003956 inlägg
#12

voigtann1 skrev:

Om det är data du ska presentera så får du ju använda dig av tabeller... om det är en ren layout fråga så är tabeller(sid design) så är det CSS som gäller.

<div style="float:left">bild1</div>
<div style="float:left">bild2</div>

Kommer lista brevid varandra.

<div style="clear:both"></div>

kan fungera ungefär som <br> i ditt fall. om jag har förstått det hela rätt..

Du har förstått det hela alldeles rätt, men det är jag som inte förstod ditt svar (även om jag känt till clear sen innan, dock utan framgång då heller) förrän jag av en slump såg den här exempel/tutorialsidan:
http://css.maxdesign.com.au/floatutorial/clear.htm

Jag trodde hela tiden att den div som ska hindra att texten wrappas runt sig ska ha clear-taggen, typ att den clearar ut vänster/höger/båda sidorna om sig.
Men istället visade sig att den text som ska förhindras att wrappas runt någon annan div ska ha denna tag.
GRR! Alltså html kan verkligen göra en gråhårig! Saken är att vissa saker inte kan dokumenteras utan att ge åtskilliga exempel eller åtminstone visuella exempel.
Jag läser bara dokumentation i ren text och tydligen räcker de inte till.

Som tur var har man er på webforum :D

haiderMedlem sedan jan. 2003956 inlägg
#13

Danne V skrev:

Bra skrivet! (y)
Håller fullständigt med.
divvar/css är jättebra - tills dom inte är jättebra längre. Då är det bara att använda tabeller (sjävklart formaterade med css).

Jo, jag måste också tacka speciellt för svaret och som Danne säger så är det bra tills de inte längre är det.

På något sätt kände jag det på mig men eftersom jag inte är nån rackare i webdesign så lät jag mig köras över av websnobbarna. :bla
Tabeller är ju så otroligt tydliga när man behöver skapa just tabeller att sortera innehåll i.
div:ar kan fungera om man typ behöver rama in vissa saker men ändå vara något flexibla så att text flyter/inte flyter runt dem osv. Tabeller saknar denna flexibilitet.

Puh, nu känns det plötsligt bättre än på flera år (okej, jag överdramatiserar lite :stud ) men nog lär man sig alltid nåt här på webforum

139 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)