Help con css

[+Benito+]

Ho un sito che ho elaborato partendo da un template, lo potete vedere QUI (http://www.retorto.it), in buona sostanza vorrei, se possibile, aggiungere al corpo della pagina due "colonne" trasparenti a destra ed a sinistra, centrate verticalmente nel bordo che rimane tra il corpo (a larghezza fissa) e la risoluzione del monitor.
In queste colonne vorrei inserire qualche foto cliccabile, flottanti sopra lo sfondo generale.

Il sito è sviluppato con css, di cui riporto qui sotto style.css che credo sia il responsabile della formattazione delle pagine.

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:url(../images/Sfondo.jpg);
font-family:Calibri, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#DDDDDD;
}
html, .body-bg {
min-width:1400px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:1000px;
font-size:.875em;
}
header .container {
position:relative;
min-height:324px;
height:auto!important;
height:324px;
}
section#content {
position:relative;
z-index:20;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
min-height:100%;
height:auto!important;
height:100%;
}
.body-bg {
background-image:url(../images/main-bg.png);
background-repeat:no-repeat;
background-position:center top;
}
#page1 .body-bg {
background-image:url(../images/1page-main-bg.png);
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
color:#481a00;
margin:0;
padding:0;
}
fieldset {
border:0;
}
.box-list li {
padding-top:10px;
}
.box-list li:first-child {
padding:0;
}
.box-list li .box .inner {
padding-top:0;
padding-bottom:0;
}
ul#sitemap {
padding-bottom:15px;
}
ul#sitemap li {
padding:0 0 6px 10px;
background:url(../images/marker.gif) no-repeat left 5px;
}
ul#sitemap li a {
color:#ce4400;
}
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
position:relative;
top:-5px;
padding-top:8px;
}
.img-box.alt {
padding-bottom:16px;
}
.img-box img {
float:left;
margin:-3px 9px 0 0;
}
.img-box img.fright {
float:right;
margin-right:0;
margin-left:9px;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.571em;
}
.p0 {
margin:0;
}
.p1 {
margin-bottom:40px;
}
address {
font-style:normal;
}
address b {
width:90px;
float:left;
}
address .fleft {
line-height:1.857em;
padding-right:41px;
}
address .extra-wrap {
line-height:1.571em;
}
address .extra-wrap strong {
display:block;
padding-bottom:14px;
}
address span.extra-wrap {
display:block;
}
a {
color:#ef4f00;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
position:absolute;
left:44px;
top:40px;
width:350px;
height:136px;
background:url(../images/logo.png) no-repeat left top;
}
h2 {
font-size:30px;
line-height:1.2em;
padding-left:9px;
margin-bottom:15px;
}
h5 {
font-size:1em;
line-height:1.2em;
margin-bottom:13px;
}
h5, h5 a {
color:#ef4f00;
}
.box {
width:100%;
}
.box .left-top-corner {
background:url(../images/left-top-corner.png) no-repeat left top;
height:17px;
padding-left:151px;
}
.box .right-top-corner {
background:url(../images/right-top-corner.png) no-repeat right top;
height:17px;
padding-right:151px;
}
.box .border-top {
background:url(../images/border-top.gif) center top repeat-x;
height:17px;
font-size:0;
line-height:0;
width:100%;
}
.box .left-bot-corner {
background:url(../images/left-bot-corner.png) no-repeat left bottom;
height:17px;
padding-left:151px;
}
.box .right-bot-corner {
background:url(../images/right-bot-corner.png) no-repeat right bottom;
height:17px;
padding-right:151px;
}
.box .border-bot {
background:url(../images/border-bot.gif) left bottom repeat-x;
height:17px;
font-size:0;
line-height:0;
width:100%;
position:relative;
}
.box .border-left {
background:url(../images/border-left.jpg) left top repeat-y;
}
.box .border-right {
background:url(../images/border-right.jpg) right top repeat-y;
width:100%;
}
.box .xcontent {
background:url(../images/box-tail.jpg) center top;
}
.box .inner {
padding:15px 20px 0 31px;
}
.box .inner1 {
padding:15px 20px 12px 29px;
}
.box .clip-left, .box .clip-right {
background:url(../images/box-clip.png) no-repeat left top;
position:absolute;
bottom:-30px;
width:13px;
height:52px;
}
.box .clip-left {
left:-137px;
}
.box .clip-right {
right:-139px;
}
header nav {
width:278px;
height:278px;
overflow:hidden;
position:absolute;
right:58px;
top:0;
background:url(../images/nav-bg.png) no-repeat left top;
}
header nav ul {
position:absolute;
left:31px;
top:56px;
width:215px;
}
header nav ul li {
background:url(../images/divider.gif) no-repeat left top;
padding-top:4px;
margin-top:4px;
text-align:center;
}
header nav ul li:first-child {
background:none;
}
header nav ul li a {
color:#481a00;
text-transform:uppercase;
text-decoration:none;
font-size:20px;
line-height:1.2em;
display:block;
width:195px;
margin:0 auto;
}
header nav ul li a:hover, header nav ul li.current a {
color:#ef4f00;
background:url(../images/nav-act-left.png) no-repeat left 2px;
}
header nav ul li a span {
display:block;
}
header nav ul li a:hover span, header nav ul li.current a span {
background:url(../images/nav-act-right.png) no-repeat right 2px;
}
header .indent {
padding:185px 400px 35px 58px;
}
header p a {
color:#ce4400;
}
#content .inside {
padding:0 60px 120px 58px;
}
#content .indent {
padding-right:346px;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
}
#contacts-form label {
float:left;
width:106px;
line-height:18px;
padding-bottom:11px;
}
#contacts-form input {
width:361px;
padding:2px 3px;
background:url(../images/forms-tail.jpg);
border:1px solid #cbba7e;
}
#contacts-form textarea {
width:715px;
height:252px;
padding:2px 3px;
background:url(../images/forms-tail.jpg);
border:1px solid #cbba7e;
margin-bottom:15px;
overflow:auto;
}
#contacts-form a {
font-size:14px;
text-transform:uppercase;
text-decoration:none;
}
#contacts-form a:hover, #contacts-form a.alt:hover {
color:#000;
}
#contacts-form a.alt {
color:#481a00;
}
footer {
height:328px;
margin-top:-328px;
position:relative;
font-size:12px;
background:url(../images/bottom-bg1.png) no-repeat center top;
}
#page1 footer {
background-image:url(../images/bottom-bg.png);
}
footer .footerlink {
margin:0 auto;
width:900px;
padding-top:262px;
}
.footerlink p {
position:relative;
z-index:20;
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#fff;
}
.footerlink a {
color:#fff;
font-weight:normal;
margin:inherit;
padding:inherit;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#fff;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}



E' una cosa banale che qualche buon anima mi può indicare o devo lasciar perdere? Grazie

[kwb]

In pratica vuoi mettere delle immagini ai lati del corpo centrale ma in modo che rimangano fisse ( e che il corpo centrale continui a scorrere )?

[+Benito+]

allora...di preciso non lo so, possono scorrere verticalmente oppure flottare, non mi interessa tanto. Quello che vorrei è che se vedi il corpo principale è centrato nello schermo e le bande laterali sono larghe tanto da coprire la risoluzione orizzontale dello schermo. Vorrei che le immagini, tipo miniature cliccabili, stessero incolonnate, una colonna per lato, diciamo 4 immagini per lato, centrate verticalmente nelle due bande laterali.

Se non ho reso l'idea dimmelo che lo spiego in un altro modo.

[kwb]

allora...di preciso non lo so, possono scorrere verticalmente oppure flottare, non mi interessa tanto. Quello che vorrei è che se vedi il corpo principale è centrato nello schermo e le bande laterali sono larghe tanto da coprire la risoluzione orizzontale dello schermo. Vorrei che le immagini, tipo miniature cliccabili, stessero incolonnate, una colonna per lato, diciamo 4 immagini per lato, centrate verticalmente nelle due bande laterali.

Se non ho reso l'idea dimmelo che lo spiego in un altro modo.
Ho guardato ora la struttura HTML del sito, e credo che sia in HTML5, che non conosco :D ( ancora non ho studiato il nuovo arrivato ).
Ora, non so se l'hai scritto tu sto sito o chi, comunque, quello che posso fare è crearti una struttura con tanto di voglio di stile in html4 + css2 per farti vedere come si fa.
Essenzialmente il problema si riduce a creare un layout a 3 colonne. Nulla di più.

Il guaio è che se sto sito non l'hai scritto tu, non so sinceramente chi ti può "tradurre" le mie direttive da html4 in html5... :stordita:

[kwb]

Questo è un esempio:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.3- (Fluid-Fluid-Fluid)</title>
<style type="text/css">
body{ margin:0; padding:0; line-height: 1.5em;}

b{font-size: 110%;}
em{color: red;}

#contentwrapper{ float: left; width: 100%;}

#contentcolumn{ margin: 0 15% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/}
#leftcolumn{ float: left; width: 20%; /*Width of left column in percentage*/ margin-left: -100%; background: #C8FC98;}
#rightcolumn{ float: left; width: 15%; /*Width of right column in pixels*/ margin-left: -15%; /*Set margin to that of -(RightColumnWidth)*/ background: #FDE95E;}

.innertube{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0;}
</style>
</head>
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet hendrerit risus. Maecenas ac ullamcorper nulla. Ut tincidunt congue mauris nec lobortis. Duis at mauris non leo accumsan tristique. Nullam tempor eleifend eros non dignissim. Donec posuere ultricies sapien, sit amet mattis massa dapibus a. Pellentesque ut elit a neque rhoncus gravida in in ante. Cras non tellus nec nibh ultrices suscipit ut vel quam. Maecenas ultrices nisi et mauris vulputate mollis. Pellentesque volutpat pharetra commodo.

Aliquam malesuada mollis augue, ac tempor orci vehicula sed. Nunc molestie ipsum purus. Ut ac cursus leo. Nullam tincidunt viverra nisl vitae vestibulum. Donec congue quam vitae elit convallis sed auctor tellus consectetur. Pellentesque vehicula ultricies nunc, sed ornare arcu pretium et. Mauris ornare, lacus eu fringilla placerat, neque lorem imperdiet mauris, sit amet tristique mauris lorem id lacus. Donec accumsan tincidunt luctus. Sed elementum sollicitudin quam ut lacinia. Nullam congue, risus eget dapibus convallis, arcu enim ullamcorper libero, eu porttitor enim tellus ac urna. Proin nisl nunc, dictum at gravida non, commodo in nisl. Sed venenatis convallis cursus.

Integer lacinia condimentum diam, a sagittis leo rhoncus vitae. Nunc risus arcu, sodales eu dictum ut, feugiat non velit. Vestibulum ac risus enim, sed volutpat urna. Suspendisse pulvinar, libero non adipiscing aliquam, nunc nunc dictum lorem, in facilisis nisl nunc vitae eros. Quisque sit amet dolor est, iaculis congue leo. </div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet hendrerit risus. Maecenas ac ullamcorper nulla. Ut tincidunt congue mauris nec lobortis. Duis at mauris non leo accumsan tristique. Nullam tempor eleifend eros non dignissim. Donec posuere ultricies sapien, sit amet mattis massa dapibus a. Pellentesque ut elit a neque rhoncus gravida in in ante. Cras non tellus nec nibh ultrices suscipit ut vel quam. Maecenas ultrices nisi et mauris vulputate mollis. Pellentesque volutpat pharetra commodo.

Aliquam malesuada mollis augue, ac tempor orci vehicula sed. Nunc molestie ipsum purus. Ut ac cursus leo. Nullam tincidunt viverra nisl vitae vestibulum. Donec congue quam vitae elit convallis sed auctor tellus consectetur. Pellentesque vehicula ultricies nunc, sed ornare arcu pretium et. Mauris ornare, lacus eu fringilla placerat, neque lorem imperdiet mauris, sit amet tristique mauris lorem id lacus. Donec accumsan tincidunt luctus. Sed elementum sollicitudin quam ut lacinia. Nullam congue, risus eget dapibus convallis, arcu enim ullamcorper libero, eu porttitor enim tellus ac urna. Proin nisl nunc, dictum at gravida non, commodo in nisl. Sed venenatis convallis cursus.

Integer lacinia condimentum diam, a sagittis leo rhoncus vitae. Nunc risus arcu, sodales eu dictum ut, feugiat non velit. Vestibulum ac risus enim, sed volutpat urna. Suspendisse pulvinar, libero non adipiscing aliquam, nunc nunc dictum lorem, in facilisis nisl nunc vitae eros. Quisque sit amet dolor est, iaculis congue leo. </div>
</div>
<div id="rightcolumn">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet hendrerit risus. Maecenas ac ullamcorper nulla. Ut tincidunt congue mauris nec lobortis. Duis at mauris non leo accumsan tristique. Nullam tempor eleifend eros non dignissim. Donec posuere ultricies sapien, sit amet mattis massa dapibus a. Pellentesque ut elit a neque rhoncus gravida in in ante. Cras non tellus nec nibh ultrices suscipit ut vel quam. Maecenas ultrices nisi et mauris vulputate mollis. Pellentesque volutpat pharetra commodo.

Aliquam malesuada mollis augue, ac tempor orci vehicula sed. Nunc molestie ipsum purus. Ut ac cursus leo. Nullam tincidunt viverra nisl vitae vestibulum. Donec congue quam vitae elit convallis sed auctor tellus consectetur. Pellentesque vehicula ultricies nunc, sed ornare arcu pretium et. Mauris ornare, lacus eu fringilla placerat, neque lorem imperdiet mauris, sit amet tristique mauris lorem id lacus. Donec accumsan tincidunt luctus. Sed elementum sollicitudin quam ut lacinia. Nullam congue, risus eget dapibus convallis, arcu enim ullamcorper libero, eu porttitor enim tellus ac urna. Proin nisl nunc, dictum at gravida non, commodo in nisl. Sed venenatis convallis cursus.

Integer lacinia condimentum diam, a sagittis leo rhoncus vitae. Nunc risus arcu, sodales eu dictum ut, feugiat non velit. Vestibulum ac risus enim, sed volutpat urna. Suspendisse pulvinar, libero non adipiscing aliquam, nunc nunc dictum lorem, in facilisis nisl nunc vitae eros. Quisque sit amet dolor est, iaculis congue leo. </div>
</div>
</div>
</body>
</html>


Chiaramente questa è la struttura ridotta all'osso.. :)

Qua trovi altri esempi: http://www.dynamicdrive.com/style/layouts/category/C10/

[+Benito+]

ti ringrazio moltissimo, ma come dicevo il sito l'ho "realizzato" partendo da un template cambiando grafica e poco altro, per cui non sono in grado di creare "semplicemente" un layout a tre colonne. Se riesci e hai voglia di metterci mano ti passo tutti i files così ti rendi conto se è una cosa fattibile, tanto è pochissima roba.

[kwb]

Beh, adesso rifare il sito mi pare eccessivo :sofico:
Magari aspetta qualcuno che ne sa di html5. Perchè sarebbe una banalità trasformare il mio codice in html5 e adattarlo al tuo.

[+Benito+]

certo. E' che quello che per te è banalmente impostare il sito su tre colonne, che magari sono veramente due righe di codice, non saprei dove metterle. Forse basta quello.

[kwb]

certo. E' che quello che per te è banalmente impostare il sito su tre colonne, che magari sono veramente due righe di codice, non saprei dove metterle. Forse basta quello.

Guarda, il codice HTML4+CSS2 è quello che ti ho messo. Si tratta tuttavia dell'ossatura. Non c'è interfaccia grafica...
A fare tutta l'interfaccia grafica ci va molto di più chiaramente :D

[+Benito+]

ok. Quello che mi manca è questo: il tuo codice come si sposa con la struttura del sito che ho postato sopra? Perchè mi sembra di capire che l'approccio attuale è che il layout sia definito nel foglio di stile, mentre mi sembra di capire che la tua soluzione è scritta direttamente nella pagina.

[clockover]

ok. Quello che mi manca è questo: il tuo codice come si sposa con la struttura del sito che ho postato sopra? Perchè mi sembra di capire che l'approccio attuale è che il layout sia definito nel foglio di stile, mentre mi sembra di capire che la tua soluzione è scritta direttamente nella pagina.

Se guardi bene ha definito un tag "style"

<style type="text/css">
body {
margin:0;
padding:0;
line-height: 1.5em;
}
b {
font-size: 110%;
}
em {
color: red;
}
#contentwrapper {
float: left;
width: 100%;
}
#contentcolumn {
margin: 0 15% 0 20%;
/*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn {
float: left;
width: 20%;
/*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn {
float: left;
width: 15%;
/*Width of right column in pixels*/
margin-left: -15%;
/*Set margin to that of -(RightColumnWidth)*/
background: #FDE95E;
}
.innertube {
margin: 10px;
/*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>

[wingman87]

ok. Quello che mi manca è questo: il tuo codice come si sposa con la struttura del sito che ho postato sopra? Perchè mi sembra di capire che l'approccio attuale è che il layout sia definito nel foglio di stile, mentre mi sembra di capire che la tua soluzione è scritta direttamente nella pagina.

L'html andrà comunque modificato perché devi aggiungere le immagini e dei contenitori da stilare per far assumere alla pagina la struttura che desideri.
Io comunque non ho capito bene cosa vuoi ottenere. Non potresti fare un disegnino che in questi casi è meglio di mille parole?

[kwb]

ok. Quello che mi manca è questo: il tuo codice come si sposa con la struttura del sito che ho postato sopra? Perchè mi sembra di capire che l'approccio attuale è che il layout sia definito nel foglio di stile, mentre mi sembra di capire che la tua soluzione è scritta direttamente nella pagina.

Semplicemente ho sfruttato la possibilità di inserire il foglio di stile direttamente nel file html. Si può tranquillamente separare.
Basta copiare la parte contenuta nei tag <style type="text/css"></style> metterla dentro un file di testo e salvarlo come nomefile.css .
Dentro il file html, tra i tag <head></head> inserisci questo:

<link rel="stylesheet" type="text/css" href="nomefile.css" />

Questo sottointende che il file html e il file css si trovano nella stessa cartella.

[+Benito+]

http://i48.tinypic.com/jqnlnb.jpg

p.s. perchè il tag spoiler non funziona?

[wingman87]

Smanettando con firebug ho creato una soluzione che prevede un po' di html, un po' di css e un po' di script. Lascio a te però testarla con altri browser (ho usato firefox).

L'html va inserito nel div con id "content", prima del div con class="container", oppure nel div immediatamente dentro al body, quello con class "body-bg wrap", prima dell'header. Otterrai due risultati diversi, nel secondo caso forse vorrai aggiungere un po' di margine in alto:
<div id="leftColumn">
<img src="images/Blacklullaby.png">
<img src="images/Blacklullaby.png">
<img src="images/Blacklullaby.png">
<img src="images/Blacklullaby.png">
</div>
<div id="rightColumn">
<img src="images/Blacklullaby.png">
<img src="images/Blacklullaby.png">
<img src="images/Blacklullaby.png">
<img src="images/Blacklullaby.png">
</div>

Il css puoi inserirlo in fondo al file style.css o dove preferisci:
#leftColumn, #rightColumn { display:none; position: absolute; }
#leftColumn img, #rightColumn img { width: 100px; display: block; margin: 10px auto; }
#leftColumn { left: 0; }
#rightColumn { right: 0; }

Lo script puoi inserirlo in fondo a script.js
$(function(){
$(window).resize(function(){
var totalWidth = $('body').width();
if(totalWidth > 1200){ //1000 is the width of the background, 200 is the sum of the left column images plus the right column images width
var $columns = $('#leftColumn, #rightColumn');
$columns.width(Math.floor((totalWidth - 1000) / 2));
$columns.show();
}else{
$('#leftColumn, #rightColumn').hide();
}
}).resize();
});


In sostanza sono due colonne la cui larghezza viene calcolata dallo script al ready e al resize della finestra. Se non c'è spazio a sufficienza per mostrarle correttamente, vengono nascoste.

Ho provato altre soluzioni prima di questa ma sono giunto alla conclusione che non c'era modo di centrare le immagini nelle colonne senza modificare le dimensioni degli elementi centrali con dei valori percentuali (cosa che non puoi fare perché lo sfondo ha una larghezza fissa).
Alla fine credo che questa sia una buona soluzione, se ho capito bene quello che volevi fare.

Dovrai fare un po' di modifiche se vuoi mettere delle immagini più grandi o più piccole. In particolare devi modificare questa riga nel css:
#leftColumn img, #rightColumn img { width: 100px; display: block; margin: 10px auto; }
E questa nello script:
if(totalWidth > 1200){ //1000 is the width of the background, 200 is the sum of the left column images plus the right column images width

[+Benito+]

grazie mille! Quando passi dalle mie parti fammi un fischio ;)