WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Jag blir galen! Hjälp! (https://www.wn.se/forum/showthread.php?t=16963)

Reactorman 2006-10-18 18:16

Kan någon snäll människa hjälpa en nybörjare inom CSS med en enkel sak?

Jag skall göra en sida som skall ha en container centrerad på skärmen i y-led som skall vara 640px bred och 100% hög.

Till höger och vänster om denna skall jag ha skuggor (gradient-bitar som är 1px höga och 25px breda och som skall repeteras i y-led). Dessa skuggor placeras väl i separata DIVar som sedan positioneras på något smart sätt så de hamnar på sidorna om huvudcontainer-divven?

Detta skall givetvis vara en lösning som funkar både i IE <7 och Mozilla.

sxe2570 2006-10-18 19:17

Bakgrundsbild är troligen det bästa sättet?

jlg 2006-10-18 19:58

Lite hjälpande läsning:

http://www.alistapart.com/articles/fauxcolumns/

Reactorman 2006-10-18 19:59

Jo det är ju uppenbart att det skall vara ngt med bakgrundsbilder, men hur skall DIVarna positioneras i förhållande till varandra?

Thats the question...

herkules 2006-10-18 20:09

HTML:
Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 <link rel="stylesheet" href="css.css" />
        </head>

        <body>
 <div id="main">
        <div id="leftshadow"></div>
        <div id="container">
  CONTENT
        </div>
        <div id="rightshadow"></div>
 </div>
        </body>
</html>

CSS (döp filen till css.css)
Kod:

body, html{
        height:100%;
        margin:0;
}
#main{
        margin:0 auto;
        height:100%;
        width:690px;
}
#container{
        width: 640px;
        height:100%;
        background-color:blue;
        float:left;
}
#leftshadow{
        width:25px;
        height:100%;
        background:url(leftshadow.gif) right repeat-y;
        background-color:green;
        float:left;
}
#rightshadow{
        width:25px;
        height:100%;
        background:url(rightshadow.gif) left repeat-y;
        background-color:green;
        float:left;
}

Skapa sen två gif bilder, leftshadow.gif(vänsterskugga) och rightshadow.gif (högerskugga).

Reactorman 2006-10-19 18:07

Supertack Herkules!

Du är inte bara bra på att spöa minotaurer, du kan CSS med! ;-)


Alla tider är GMT +2. Klockan är nu 21:52.

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