Kom ihåg mig?
Home Menu

Menu


Responsiv css problem

Ämnesverktyg Visningsalternativ
Oläst 2014-03-28, 16:55 #1
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
Standard Responsiv css problem

Hello fellow ninjas!

Har funderat på detta problem ett tag, men själv aldrig riktigt behövt brottas med problemet (än).

Vi nog de flesta av oss vad som menas med "följsam" design, och vad jag tänker mest på är just "följsam", inte "hoppande" som man även kan välja att skriva sin css som. Med hoppande menar jag att man skriver ett fast antal pixlar istället för att gå på %.

Problemet jag funderar på uppstår när man vill att ett element skall alltid vara ett visst antal pixlar medans resten skall vara inom %.

Låt oss ta ett exempel:

Jag har en sida där jag har en sidpanel till vänster och all resterande content till höger. [sidpanel] [ content ]

Säg nu att jag vill att sidpanelen alltid skall vara 200px bred, men att content skall förminskas i led med webbläsaren när den förminskas.
Jag hade gärna velat gjort något sånthär:
Kod:
#sidpanel {width:200px;}
#content {width:80%}
Som ni kanske förstår så går inte detta, eftersom att content-delen någon gång kommer att vara mindre än just 80%..

Hur skulle ni lösa detta problemet?
jonssondesign är inte uppkopplad   Svara med citatSvara med citat
Oläst 2014-03-28, 17:00 #2
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
http://jsfiddle.net/L8yA5/

Här kan ni experimentera om ni vill
jonssondesign är inte uppkopplad   Svara med citatSvara med citat
Oläst 2014-03-28, 17:15 #3
naak2803 naak2803 är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Jun 2011
Inlägg: 767
naak2803 naak2803 är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Jun 2011
Inlägg: 767
Citat:
Ursprungligen postat av jonssondesign Visa inlägg
Hello fellow ninjas!

Har funderat på detta problem ett tag, men själv aldrig riktigt behövt brottas med problemet (än).

Vi nog de flesta av oss vad som menas med "följsam" design, och vad jag tänker mest på är just "följsam", inte "hoppande" som man även kan välja att skriva sin css som. Med hoppande menar jag att man skriver ett fast antal pixlar istället för att gå på %.

Problemet jag funderar på uppstår när man vill att ett element skall alltid vara ett visst antal pixlar medans resten skall vara inom %.

Låt oss ta ett exempel:

Jag har en sida där jag har en sidpanel till vänster och all resterande content till höger. [sidpanel] [ content ]

Säg nu att jag vill att sidpanelen alltid skall vara 200px bred, men att content skall förminskas i led med webbläsaren när den förminskas.
Jag hade gärna velat gjort något sånthär:
Kod:
#sidpanel {width:200px;}
#content {width:80%}
Som ni kanske förstår så går inte detta, eftersom att content-delen någon gång kommer att vara mindre än just 80%..

Hur skulle ni lösa detta problemet?
jag skulle ha gjort så här:
Kod:
<div class="sidpanel pull-left">Sidpanel</div>
<div class="content">Content</div>
Kod:
.pull-left {float:left}
.clear {clear:both}
.sidpanel {width:200px; background-color:hotpink}
.content {width:auto; margin-left:200px;  background-color:aqua}
http://jsfiddle.net/Z6BCj/

hoppas det var det du sökte.
naak2803 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2014-03-28, 18:37 #4
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
Citat:
Ursprungligen postat av naak2803 Visa inlägg
jag skulle ha gjort så här:
Kod:
<div class="sidpanel pull-left">Sidpanel</div>
<div class="content">Content</div>
Kod:
.pull-left {float:left}
.clear {clear:both}
.sidpanel {width:200px; background-color:hotpink}
.content {width:auto; margin-left:200px;  background-color:aqua}
http://jsfiddle.net/Z6BCj/

hoppas det var det du sökte.
Oh, smart! Detta är definitivt en lösning! Tack

Någon annan som sitter på en annan lösning?
jonssondesign ä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 03:23.

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