Grafiskt Forum
Grafiskt Forum > Webbdesign & -utveckling
Registrera Vanliga frågor Medlemslista Sök Dagens inlägg Markera forum som lästa
Webbdesign & -utveckling Form, funktion, navigation m.m.



Svara på ämnet
 
Ämnesverktyg
2012-02-20, 20:06
  No. 1
LAMF
Hymanoid
Ort: Björbo

Inlägg: 231
Lika höga kolumner med css
Jag håller på att pilla lite med kolumner som har olika mycket innehåll och därför blir olika höga.
Det är tre kolumner som dessutom ska ha rundade hörn.
Har hittills löst detta med css genom att ha följande stil på kolumnerna/boxarna:
Kod:
element.style {
    float:left;
    margin-right:10px;
    padding:10px;
    width:28%;
    border-radius: 4x;
    border:1px solid #373632;
}
Att använda faux columns funkar inte så bra med rundade hörn om jag hajat rätt.
Finns nån metod som löser detta utan att man behöver skriva en uppsats av kod?

Född naken blöt och hungrig.
gagneffiske.se - Sportfiske i Gagnefs kommun.
LAMF är inte uppkopplad  
Svara med citat
2012-02-20, 20:12
  No. 2
foag
B'artist
 
foags avatar
Papa Daniel, 27
Ort: Skåne

Inlägg: 7 107

Om du sållar dig till CSS3 så har du ju färdiga funktioner för det, men om javascript och faux-kolumner inte är alternativ så är jag rädd att alternativen är slut..

Kreativ b'artist @ Kippers
foag är inte uppkopplad  
Svara med citat
2012-02-20, 20:47
  No. 3
kevva
Topside bro
 
kevvas avatar
Kevin Mårtensson, 24
Ort: Borås

Inlägg: 347

Förstår inte varför border-radius inte skulle fungera?
kevva är inte uppkopplad  
Svara med citat
2012-02-20, 21:02
  No. 4
rhedman
Biker
 
rhedmans avatar
Rob, 36
Ort: Sjöstaden, Sthlm

Inlägg: 8 389

Citat:
Förstår inte varför border-radius inte skulle fungera?
Beror ju på hur man gör det men om border radius ligger i toppen av divarna och bakgrunden i dina faux columns innehåller den nedra rundade delen och har positioneringen bottom left borde det fungera finfint.

Almost Famous
BLOGG: rendezvouspoint.se
rhedman är inte uppkopplad  
Svara med citat
2012-02-20, 21:10
  No. 5
LAMF
Hymanoid
Ort: Björbo

Inlägg: 231

Citat:
Om du sållar dig till CSS3 så har du ju färdiga funktioner för det, men om javascript och faux-kolumner inte är alternativ så är jag rädd att alternativen är slut..
Det skulle jag lätt kunna tänka mig att göra. Får söka på det då....

Född naken blöt och hungrig.
gagneffiske.se - Sportfiske i Gagnefs kommun.
LAMF är inte uppkopplad  
Svara med citat
2012-02-20, 21:13
  No. 6
kevva
Topside bro
 
kevvas avatar
Kevin Mårtensson, 24
Ort: Borås

Inlägg: 347

Citat:
Beror ju på hur man gör det men om border radius ligger i toppen av divarna och bakgrunden i dina faux columns innehåller den nedra rundade delen och har positioneringen bottom left borde det fungera finfint.
Jo, tänkte på om han körde endast-CSS-varianten.
kevva är inte uppkopplad  
Svara med citat
2012-02-20, 21:41
  No. 7
foag
B'artist
 
foags avatar
Papa Daniel, 27
Ort: Skåne

Inlägg: 7 107

Kunde ju varit sjysst av mig att länka också

http://www.quirksmode.org/css/multicolumn.html

Kreativ b'artist @ Kippers
foag är inte uppkopplad  
Svara med citat
2012-02-20, 22:11
  No. 8
rhedman
Biker
 
rhedmans avatar
Rob, 36
Ort: Sjöstaden, Sthlm

Inlägg: 8 389

Citat:
Jo, tänkte på om han körde endast-CSS-varianten.
Jo precis men per default skulle inte enbart faux columns eller border radius i sig fungera då kolumnerna skall ha rundade hörn nertill också men med en kombination av border-radius och faux-columns så går det att lösa på det sätt jag skrev

Utan krav på CSS3 stöd ocks btw (IE)...

Senast redigerad av rhedman den 2012-02-20 klockan 22:13.

Almost Famous
BLOGG: rendezvouspoint.se
rhedman är inte uppkopplad  
Svara med citat
2012-02-21, 09:04
  No. 9
LAMF
Hymanoid
Ort: Björbo

Inlägg: 231

Tack för alla svar men det känns så krångligt att lösa så jag kör en snikvariant med fast höjd i pixlar istället.

Produktionssidan ligger här om nån orkar titta:
http://nowire.nymodigt.com/index.php...t-produktutbud

Född naken blöt och hungrig.
gagneffiske.se - Sportfiske i Gagnefs kommun.
LAMF är inte uppkopplad  
Svara med citat
2012-02-21, 09:43
  No. 10
rhedman
Biker
 
rhedmans avatar
Rob, 36
Ort: Sjöstaden, Sthlm

Inlägg: 8 389

Jag tror du krånglar till lösningen mer än nödvändigt. Det är egentligen ganska enkelt. Slängde ihop ett exempel med kombinationen faux columns och border-radius.

http://www.rendezvouspoint.se/lab/faux-columns.html

Almost Famous
BLOGG: rendezvouspoint.se
rhedman är inte uppkopplad  
Svara med citat
2012-02-21, 12:38
  No. 11
LAMF
Hymanoid
Ort: Björbo

Inlägg: 231

Citat:
Jag tror du krånglar till lösningen mer än nödvändigt. Det är egentligen ganska enkelt. Slängde ihop ett exempel med kombinationen faux columns och border-radius.

http://www.rendezvouspoint.se/lab/faux-columns.html
OK men om man som jag vill ha en border med färg så skiner ju faux kolumnen igenom och man ser att höjden är ojämn.

Född naken blöt och hungrig.
gagneffiske.se - Sportfiske i Gagnefs kommun.
LAMF är inte uppkopplad  
Svara med citat
2012-02-21, 14:17
  No. 12
powerbuoy
Användare
Ort: Stockholm

Inlägg: 806

Citat:
Tack för alla svar men det känns så krångligt att lösa så jag kör en snikvariant med fast höjd i pixlar istället.

Produktionssidan ligger här om nån orkar titta:
http://nowire.nymodigt.com/index.php...t-produktutbud
Kör iaf min-height så att aldrig innehållet flyter utanför (om användaren resizar texten tex).
powerbuoy är inte uppkopplad  
Svara med citat
2012-02-21, 14:30
  No. 13
rhedman
Biker
 
rhedmans avatar
Rob, 36
Ort: Sjöstaden, Sthlm

Inlägg: 8 389

Citat:
OK men om man som jag vill ha en border med färg så skiner ju faux kolumnen igenom och man ser att höjden är ojämn.
Ja är det borders och toningar och sådant inblandat så blir det knepigare.

Almost Famous
BLOGG: rendezvouspoint.se
rhedman är inte uppkopplad  
Svara med citat
Svara på ämnet

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



Alla tider är GMT +2. Klockan är nu 13:03.




Grafiskt Forum sponsras av Loopia Webbhotell:




Powered by vBulletin®
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.