Gå till innehåll
Just nu i M3-nätverket

lite html-hjälp med flöde i div kontra tables


tjorven

Rekommendera Poster

Hejsan. Jag kodar inte seriöst längre och lärde mig html på den tiden man använde tables för att layouta sina sidor…nu sitter jag dock med ett projekt där jag måste köra div (inkluderat tables).

 

Jag skulle behöva lite hjälp med hur man får divarna att automagiskt skala om sig efter om storleken på innehållet i dem förändras extremt mycket.

 

skickar med en exempelbild..(kolla inte på färger och layout eftersom jag just nu bara försöker få överblick över alla containers och det generella flödet)

post-146-0-10068900-1384437591_thumb.png

 

Gridet med röd outline är en table som så småningom kommer få databasgenererad information (den kan alltså variera i längd utan att jag kommer kunna påverka det), det gråa fältet med lila headline och blå ram i bakgrunden är divar. Om jag hade kodat hela sidan med tables (som back in the days) hade den jättelånga texten automagiskt tryckt ut även bakgrundsrutan så layouten hade sett längre men ändå ok ut. Som det är nu är diven (som har en fast bred i pixlar) helt opåverkad av tablen och informationen som ligger i den. Hela upplägget med div känns väldigt svårarbetat och ologiskt i förhållande till tables måste jag säga. Går det att få ordning på detta?

 

Plan B - går det att på något sätt tvångsradbryta den långa texten efter en viss längd trots att den inte innehåller några mellanslag?

 

 

Tack för tips. Tänk på att det behövs enkla förklaringar för att jag ska greppa detta med divvar :P

 

Länk till kommentar
Dela på andra webbplatser

Du verkar ha en fast bredd på diven som omsluter allt. Det är förmodligen därför som den inte följer med omkring ditt innehåll. Sätt en float: left; overflow: auto; på den så borde den omsluta innehållet, annars blir den 100% bred. Du kan också sätta en min-width på den om du vill att den ska vara minst en viss bredd.

 

Det finns färdiga ramverk för att bygga med grids, exempelvis Pure, Zurb eller Bootstrap. Jag tror att du borde använda dig av något sådant. Pure är exempelvis väldigt enkelt att komma igång med.

 

Du kan också undersöka display: table-cell etc. om du vill att divarna ska bete sig mer som en tabell och känner för att göra jobbet själv.

 

I övrigt tycker jag att det låter konstigt att även tabeller måste vara uppbyggda med divar. En tabell är en tabell, och borde också använda sig av det elementet. Att bygga layouten med tabeller är väldigt tabu, men det känns märkligt att presentera tabeller med divar.

 

/G

Länk till kommentar
Dela på andra webbplatser

tack för tipset. jag ska kolla lite på min-width tror jag.

 

helst hade jag ju byggt hela sidan i tables även om det är tabu och mossigt nuförtiden men då hade jag fått det snyggt o prydligt och snabbt hade det gått ;)

själva sidan är egentligen redan byggd och jag försöker mest strukturera om den och snygga till den lite med några css-klasser. det är därför det är kombinerat div och tables skulle jag gissa.

Länk till kommentar
Dela på andra webbplatser

Sätt en float: left; overflow: auto; på den så borde den omsluta innehållet, annars blir den 100% bred.

 

 

finns det något sätt att ha en min-width och float:center på grafiken utan att innehållet går ut 100% bredd i fönstret? jag lyckas bara få grafiken centrerad i fönstret om jag kör den fasta bredden, men då får jag tillbaka problemet med att texten sticker iväg utanför bakgrundsgrafiken.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.



×
×
  • Skapa nytt...