Posizionare elementi dentro layout
Ciao a tutti!
Ho creato un layout in senso obliquo antiorario tramite photoshop. Per intenderci volevo fare per prova la struttura di un layout obliquo come ho visto su qualche template in giro e vedere come viene.
Ora non so come strutturare la cosa, è tutta la sera che do le varie misure per allineare per bene i vari elementi ma nulla. Se ci riesco alla fine in un browser risulta tutto ok e nell'altro no.
Per intenderci dentro questo layout che ho creato devo inserire:
- Logo
- Foto Gallery
- Menu orizzontale
- Menu verticale
Allego cmq l'html e il css così mi potete dire dove sbaglio e magari darmi qualche suggerimento.
HTML
Codice:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="FreeUser" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Rainbow</title>
</head>
<body>
<div id="container">
<img src="images/sfondo.gif"/>
<img id="logo" src="images/logo.gif"/>
<div id="gallery"></div>
</div>
</body>
</html>
CSS
Codice:
* {
margin: 0;
padding: 0;
}
body {
background-color:
}
#container {
width: 1024px;
height: 768px;
margin: 0 auto;
margin-top: 100px;
}
#logo {
position: relative;
bottom: 750px;
}
#gallery {
width: 600px;
height: 380px;
background-color: black;
margin-top: -820px;
margin-left: 300px;
}
In genere il layout me lo sono sempre fatto io tramite i div, ma volevo provare a fare questo semplice effetto con photoshop.
Solo che ora sono un pò incasinato a posizionare i singoli elementi
Allego cmq il layout per rendere l'idea:
http://img577.imageshack.us/img577/6151/sfondog.gif
Come potrei fare?
