Kom ihåg mig?
Home Menu

Menu


Klurig CSS-fråga, kan du klara den?

Ämnesverktyg Visningsalternativ
Oläst 2017-07-22, 13:05 #1
Thomas E Thomas E är inte uppkopplad
Medlem
 
Reg.datum: Jul 2006
Inlägg: 85
Thomas E Thomas E är inte uppkopplad
Medlem
 
Reg.datum: Jul 2006
Inlägg: 85
Standard Klurig CSS-fråga, kan du klara den?

Jag sitter och kodar css på hemsidan, alltid bökigt.

http://www.nordicposters.se/filmaffi...+Disney+(1985))

Det finns två sorters <div>, en stor till vänster och flera ex av en liten.

Texten "Andra posters du kanske gillar:" är en <h3>. Jag skulle vilja att den kom själv på egen rad bland de små, som om den inleddes med ett radbyte, och alla små divs efter den kom sedan under den. Fast <h3> ska fortfarande vara till höger om den stora <div>. Så det går inte med "h3 display:block;clear:left;" för då kommer den under den stora. Och "clear:right" på den lilla <div> precis till vänster om <h3> gör ingenting, jag vet inte varför.

Jag kan inte heller göra en egen container runt de små till höger om den stora, för då blir det inget flow av den sista lilla <div> ner under den stora <div>.

Något bra tips?

Senast redigerad av Thomas E den 2017-07-22 klockan 13:07
Thomas E är inte uppkopplad   Svara med citatSvara med citat
Oläst 2017-07-22, 22:15 #2
Syke Syke är inte uppkopplad
Medlem
 
Reg.datum: Mar 2008
Inlägg: 297
Syke Syke är inte uppkopplad
Medlem
 
Reg.datum: Mar 2008
Inlägg: 297
Citat:
Ursprungligen postat av Thomas E Visa inlägg
Jag sitter och kodar css på hemsidan, alltid bökigt.

http://www.nordicposters.se/filmaffi...+Disney+(1985))

Det finns två sorters <div>, en stor till vänster och flera ex av en liten.

Texten "Andra posters du kanske gillar:" är en <h3>. Jag skulle vilja att den kom själv på egen rad bland de små, som om den inleddes med ett radbyte, och alla små divs efter den kom sedan under den. Fast <h3> ska fortfarande vara till höger om den stora <div>. Så det går inte med "h3 display:block;clear:left;" för då kommer den under den stora. Och "clear:right" på den lilla <div> precis till vänster om <h3> gör ingenting, jag vet inte varför.

Jag kan inte heller göra en egen container runt de små till höger om den stora, för då blir det inget flow av den sista lilla <div> ner under den stora <div>.

Något bra tips?
Wrappa alla inposter och h3:an i en egen div?
Syke är inte uppkopplad   Svara med citatSvara med citat
Oläst 2017-07-23, 04:19 #3
jonssondesign jonssondesign är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Oct 2010
Inlägg: 709
jonssondesign jonssondesign är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Oct 2010
Inlägg: 709
Precis som Syke skrev ska du göra.

Såhär blev resultatet när jag gjorde som Syke skrev: https://gyazo.com/b1b6f4158ff5c1a5a87b2111614bbc79
jonssondesign är inte uppkopplad   Svara med citatSvara med citat
Oläst 2017-07-24, 01:43 #4
Thomas E Thomas E är inte uppkopplad
Medlem
 
Reg.datum: Jul 2006
Inlägg: 85
Thomas E Thomas E är inte uppkopplad
Medlem
 
Reg.datum: Jul 2006
Inlägg: 85
Ser bra ut. Men vad händer om du minskar bredden på browsern så att minst en liten <div> hamnar efter/under den stora? Jag vill ha den rakt under den stora, inte till höger-under den.

På andra sidor kan det vara minst 25 små divs, så de måste ha en flow ner under den stora.
Thomas E är inte uppkopplad   Svara med citatSvara med citat
Oläst 2017-07-25, 21:51 #5
Thomas E Thomas E är inte uppkopplad
Medlem
 
Reg.datum: Jul 2006
Inlägg: 85
Thomas E Thomas E är inte uppkopplad
Medlem
 
Reg.datum: Jul 2006
Inlägg: 85
Jag laborerade lite vidare. Jag löste problemet (?) genom att lägga till en tom div, göra float:right på den så den la sig längst till höger. Sedan göra ytterligare en tom div som gör clear:right, som puttar ner sig ett snäpp tack vare den tomma diven till höger. Det ger radbytet jag vill ha.

<div class="inposter" style="float:right;width:0px;"></div><div style="clear:right;"></div>

Någon som ser ett läge när detta inte fungerar? Eller har en bättre lösning, utan dummy-divs?
Thomas E är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 08:58.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017