Behöver akut hjälp med css-problem

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Dec 2004

Behöver akut hjälp med css-problem

Hej! Nu är det så här att jag har fått ett jobb att koda en psd-layout. Jag har börjat koda den men har nu stött på ett litet problem. Jag vet inte riktigt hur jag ska koda featured delen där man visar bilder på projekt. Problemet är att bilden börjar från mitten och sträcker sig ända till fönstrets högerkant och jag vet inte riktigt hur jag ska koda den delen.

Jag vet att min beskrivning är otydlig men förhoppningsvis så förstår ni vad jag menar när ni kollar på bilden.

Corsair 600W Gaming Edition | Intel Core i5 4670K | 8GB DDR3 RAM | Corsair Carbide 330R | Sapphire Radeon R9 290 | Arctic Accelero Xtreme 3

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av mrjasmin
Hej! Nu är det så här att jag har fått ett jobb att koda en psd-layout. Jag har börjat koda den men har nu stött på ett litet problem. Jag vet inte riktigt hur jag ska koda featured delen där man visar bilder på projekt. Problemet är att bilden börjar från mitten och sträcker sig ända till fönstrets högerkant och jag vet inte riktigt hur jag ska koda den delen.

Jag vet att min beskrivning är otydlig men förhoppningsvis så förstår ni vad jag menar när ni kollar på bilden.

http://img30.imageshack.us/img30/5804/72032742.th.jpg

Bilden förklarar inte så mycket. Om du menar bilden som föreställer en kvinna i lila så är det bara att du delar upp vänstermenyn och högersidan(bilden).

Bilden måste, eller bör, ha en speficik bredd annars kommer vänstermenyn vandra till höger och vänster eller så blir det för mycket "whitespace" som förstör layouten.

Har jag förstått detta fel får du förklara igen.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Dec 2004
Citat:

Ursprungligen inskrivet av Leedow
Bilden förklarar inte så mycket. Om du menar bilden som föreställer en kvinna i lila så är det bara att du delar upp vänstermenyn och högersidan(bilden).

Bilden måste, eller bör, ha en speficik bredd annars kommer vänstermenyn vandra till höger och vänster eller så blir det för mycket "whitespace" som förstör layouten.

Har jag förstått detta fel får du förklara igen.

Du har förstått det rätt, saken är den att jag använder en div runt hela innehållet som är 960 px bred och centrerar sidan. Jag vill att menyn till vänster ska vara centrerad och även texten under bilden, fast bilden ska vara längs ut till höger.

Hur fixar jag detta ?

Corsair 600W Gaming Edition | Intel Core i5 4670K | 8GB DDR3 RAM | Corsair Carbide 330R | Sapphire Radeon R9 290 | Arctic Accelero Xtreme 3

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Dec 2004

Pengar utlovas till den som löser problemet

Corsair 600W Gaming Edition | Intel Core i5 4670K | 8GB DDR3 RAM | Corsair Carbide 330R | Sapphire Radeon R9 290 | Arctic Accelero Xtreme 3

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av mrjasmin
Du har förstått det rätt, saken är den att jag använder en div runt hela innehållet som är 960 px bred och centrerar sidan. Jag vill att menyn till vänster ska vara centrerad och även texten under bilden, fast bilden ska vara längs ut till höger.

Hur fixar jag detta ?

Principen är css-taggen "float"

Ta detta exempel:

<div id="content"> <div style="background-color: #CCCCCC; width: 360px; float: left;">Meny </div> <div style="background-color: #666666; width: 600px; float: left;">Bild </div> </div>

Egentligen är det hela layouten du ber om, inte bara hur du ska lösa det, eller?

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Norrköping
Registrerad
Dec 2004

Leedow, det är verkligen inte hela layouten jag ber om. Jag har redan layouten klar.......

Jag vill även att menyn ska vara inom min wrapper(margin: 0 auto; ) medans bilden ska sträcka sig ända till slutet av webbläsaren..

Corsair 600W Gaming Edition | Intel Core i5 4670K | 8GB DDR3 RAM | Corsair Carbide 330R | Sapphire Radeon R9 290 | Arctic Accelero Xtreme 3

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Maj 2007

Jag vet inte riktigt hur du ska fixa en dynamiskt expanderbar bild men denna layout borde göra ungefär så som du vill ha det om jag har tolkat dig rätt. De "högra" div-arna expanderar efter fönstrets storlek.

<div id="placeholder" style="width: 20%; float: left;">   </div> <div id="wrappert" style="width:80%; height: 800px; background-color:red; float:right;"> <div id="header" style="width: 100%; height: 100px; float:left; background-color: green;"> <div id="logo" style="width: 300px; height: 100%;float: left; background-color: white;"> <h1>Logo</h1> </div> <h1>Header</h1> </div> <div id="menu" style="width: 300px; height: 400px; background-color:yellow; float: left">   </div> <!-- place for picture!--> <div id="textarea" style="width: 100%; height: 300px; float: left; background-color: purple;"> <div id="down_left" style="width: 300px; height: 100%; float: left; background-color: grey;">   </div> </div> </div>

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Du kommer ju aldrig kunna sträcka bilden hela vägen ut till högersidan om du har en fixerad sidbredd, iom att folk använder olika upplösningar.

Du kan exempelvis centrera designen med den utstickande bilden efter en bredd på 1024px, men om en användare med 1680px tittar på den så kommer ju bilden inte sträckas till kanten såvida du inte skalar om den alternativt högerjusterar hela designen vilket innebär att den inte längre är centrerad.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008

Vill bara påpeka att "proposal" är felstavat :). Hade gärna hjälpt dig men är CSS-efterbliven

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase