HTML & CSS hjälp med div boxar

Permalänk
Medlem

HTML & CSS hjälp med div boxar

Hejsan, det är så att jag fastnat på ett ställe som jag inte riktigt lyckas lösa.
Jag har 3 boxar brevid varandra med hjälp av float.

Men problemet är att jag inte riktigt vet hur jag ska få mitten boxen att hamna centrerat.
Om ni kollar på bilden så ser ni hur jag vill ha det. jag vill att den ska vara centrerad genom att de två boxarna på kanterna anpassar sig efter dataskärmen.
Min sida är 1024bred och om då skärmen är 1920 i upplösning så ska kanterna vara 1920-1024/2 = 448px breda vardera så min sida fortfarande är centrerad.

Jag har även 2 olika bakgrundsbilder i kantboxarna som jag vill skall anpassa sig i "width" efter hur stor skärmen är. Det är en smalbild som upprepar sig i width hela tiden. Jag testade width:auto; men det ville inte funka. Några tips?

Väldigt dåligt formulerat men vet inte riktigt hur jag skulle beskriva det. Men hoppas att någon av er förstår.

Koden i kortfattat är väll så här:

HTML

<div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div class="clear></div>

CSS

#box1 { background-image:url(images/background1.png); background-repeat:repeat-x; width:auto; heigth:768px; float:left } #box2 { width:1024px; heigth:768px; float:left } #box3 { background-image:url(images/background2.png); background-repeat:repeat-x; width:auto; heigth:768px; float:left } .clear { clear:both; }

Permalänk
Medlem

Detta är det närmsta jag kunde komma med ditt problem: http://jsfiddle.net/edgren/cYrfS/

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop

Permalänk
Medlem
Permalänk
Inaktiv

Ska du bara ha en bakgrundsbild runt "main content"-rutan i mitten av skärmen? Eller ska det finnas text och innehåll i lådorna runt omkring också?

Permalänk
Medlem

Ska kolla på det.

Skrivet av legenda:

Ska du bara ha en bakgrundsbild runt "main content"-rutan i mitten av skärmen? Eller ska det finnas text och innehåll i lådorna runt omkring också?

Det kommer endast finnas innehåll i den bruna rutan. dom två på sidorna skall vara en bild som justeras efter hur bred skärm man har. Alltså inget innehåll där.

Permalänk
Inaktiv
Skrivet av Girighet:

Det kommer endast finnas innehåll i den bruna rutan. dom två på sidorna skall vara en bild som justeras efter hur bred skärm man har. Alltså inget innehåll där.

Då borde du komma undan med någonting i den här stilen;

HTML

<div id="wrapper"> <div id="content"> <p>...</p> </div> </div>

CSS

#wrapper { background: #eeeeee url('bild.png'); overflow: hidden; width: 100%; } #wrapper #content { background: #ffffff; margin: 0 auto; width: 1024px; }

Permalänk
Medlem
Skrivet av anon181280:

Då borde du komma undan med någonting i den här stilen;

HTML

<div id="wrapper"> <div id="content"> <p>...</p> </div> </div>

CSS

#wrapper { background: #eeeeee url('bild.png'); overflow: hidden; width: 100%; } #wrapper #content { background: #ffffff; margin: 0 auto; width: 1024px; }

Fast problemet blir att jag behöver ha olika bilder i de två boxarna på sidorna. Som skall anpassa sig efter hur stor skärmen är. Alltså att dom skall anpassa width.

Permalänk
Medlem

Det funka till viss del. Men lite jobb kan jag nog få det att funka.

Permalänk
Medlem

Själv har jag löst det genom att lägga in bilderna i en. På vänster sida den ena, sedan 1024px vitt område och sedan höger om detta den högra bilden. Sedan la jag in det som background-image i css.

Visa signatur

Citera för svar

Permalänk
Medlem

Det beror på hur du vill att sidopanelerna ska fungera. Om du nöjer dig med att bara kunna fylla dem med CSS backgrounds så kan du använda dig av pseudo-element på din wrapper.

http://jsfiddle.net/MYpq3/

Visa signatur