Behöver akut hjälp med css-problem

Permalänk
Medlem

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.

Visa signatur

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

Permalänk
Medlem
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.

Visa signatur

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

Permalänk
Medlem
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 ?

Visa signatur

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

Permalänk
Medlem

Pengar utlovas till den som löser problemet

Visa signatur

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

Permalänk
Medlem
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?

Visa signatur

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

Permalänk
Medlem

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..

Visa signatur

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

Permalänk
Medlem

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>

Permalänk
Medlem

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.

Visa signatur

Kom-pa-TI-bilitet

Permalänk

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

Visa signatur

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