Jag blir galen! Hjälp!

Reactorman · 2006-10-18, 19: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, 20:17

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

jlg · 2006-10-18, 20:58

Lite hjälpande läsning:

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

Reactorman · 2006-10-18, 20: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, 21: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, 19:07

Supertack Herkules!

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

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Jag blir galen! Hjälp!