|
|||||||
|
|
|
 |
|
|
Strumenti |
24-02-2013, 17:43
|
#1 | ||
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
Help con css
Ho un sito che ho elaborato partendo da un template, lo potete vedere QUI, 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.
E' una cosa banale che qualche buon anima mi può indicare o devo lasciar perdere? Grazie |
||
|
|
|
25-02-2013, 00:05
|
#2 |
|
Senior Member
Iscritto dal: Jul 2003
Città: Alessandria
Messaggi: 10167
|
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 )?
__________________
Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505
|
|
|
|
|
25-02-2013, 08:28
|
#3 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
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. |
|
|
|
|
25-02-2013, 11:55
|
#4 | |
|
Senior Member
Iscritto dal: Jul 2003
Città: Alessandria
Messaggi: 10167
|
Quote:
 ( 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... 
__________________
Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505
|
|
|
|
|
|
25-02-2013, 13:10
|
#5 |
|
Senior Member
Iscritto dal: Jul 2003
Città: Alessandria
Messaggi: 10167
|
Questo è un esempio:
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" 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>
 Qua trovi altri esempi: http://www.dynamicdrive.com/style/layouts/category/C10/
__________________
Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505
|
|
|
|
|
27-02-2013, 14:25
|
#6 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
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.
Ultima modifica di +Benito+ : 27-02-2013 alle 22:26. |
|
|
|
|
27-02-2013, 21:30
|
#7 |
|
Senior Member
Iscritto dal: Jul 2003
Città: Alessandria
Messaggi: 10167
|
Beh, adesso rifare il sito mi pare eccessivo
 Magari aspetta qualcuno che ne sa di html5. Perchè sarebbe una banalità trasformare il mio codice in html5 e adattarlo al tuo.
__________________
Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505
|
|
|
|
|
27-02-2013, 22:25
|
#8 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
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.
|
|
|
|
|
27-02-2013, 22:32
|
#9 | |
|
Senior Member
Iscritto dal: Jul 2003
Città: Alessandria
Messaggi: 10167
|
Quote:
A fare tutta l'interfaccia grafica ci va molto di più chiaramente
__________________
Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505
|
|
|
|
|
|
28-02-2013, 07:39
|
#10 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
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.
|
|
|
|
|
28-02-2013, 08:42
|
#11 | |
|
Senior Member
Iscritto dal: Oct 2004
Messaggi: 1945
|
Quote:
Codice:
<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>
|
|
|
|
|
|
28-02-2013, 11:15
|
#12 | |
|
Senior Member
Iscritto dal: Nov 2005
Messaggi: 2774
|
Quote:
Io comunque non ho capito bene cosa vuoi ottenere. Non potresti fare un disegnino che in questi casi è meglio di mille parole? |
|
|
|
|
|
28-02-2013, 11:18
|
#13 | |
|
Senior Member
Iscritto dal: Jul 2003
Città: Alessandria
Messaggi: 10167
|
Quote:
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: Codice:
<link rel="stylesheet" type="text/css" href="nomefile.css" />
__________________
Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505
|
|
|
|
|
|
28-02-2013, 13:50
|
#14 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
 p.s. perchè il tag spoiler non funziona? Ultima modifica di +Benito+ : 28-02-2013 alle 13:53. |
|
|
|
|
28-02-2013, 21:19
|
#15 |
|
Senior Member
Iscritto dal: Nov 2005
Messaggi: 2774
|
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: Codice:
<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>
Codice:
#leftColumn, #rightColumn { display:none; position: absolute; }
#leftColumn img, #rightColumn img { width: 100px; display: block; margin: 10px auto; }
#leftColumn { left: 0; }
#rightColumn { right: 0; }
Codice:
$(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();
});
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: Codice:
#leftColumn img, #rightColumn img { width: 100px; display: block; margin: 10px auto; }
Codice:
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
|
|
|
|
|
07-03-2013, 21:09
|
#16 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 7057
|
grazie mille! Quando passi dalle mie parti fammi un fischio
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 09:11.
