• M
    Super User •

    una galleria fotografica con i fogli di stile! Problemino

    Salve ragazzi! Tempo fa mi fu consigliato di creare una galleria fotografica con i fogli di stile. E' perfetta1 Ho un unico probelma: centrare le foto. Vi posto il codice:

    <HTMS>
    <HEAD>
    <TITLE>stu nicholls | CSS PLaY | active photograph gallery</TITLE>
    href="cssplay.css"
    type=text/css rel=stylesheet>
    </HEAD>

    <BODY>
    <div id=container_top>
    <div id=layer align="center"><a class="gallery slidea"
    href="#"><span>LSE
    Square

    Photographs courtesy of stock.xchng</span></a> <a

    class="gallery slideb"
    href="#"><span>Buckingham
    Palace

      Photographs courtesy of stock.xchng</span></a> 
   </div>

    </div>

    </BODY></HTML>

    ora il codice del css:

    HTML {
    BACKGROUND: #fff; COLOR: #000
    }
    BODY {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 76%; BACKGROUND: url(images/back1b.gif) repeat-x; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR:; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px
    }
    A {
    COLOR: #606
    }
    A:visited {
    COLOR:
    }
    A:hover {
    TEXT-DECORATION: none
    }
    #wrapper {
    BACKGROUND: #eee; MARGIN: 0px auto; WIDTH: 750px; TEXT-ALIGN: left
    }
    #head {
    BACKGROUND: url(images/cascade2b.gif); WIDTH: 750px; POSITION: relative; HEIGHT: 138px
    }
    #headhome {
    BACKGROUND: url(images/cascade1b.gif); WIDTH: 750px; POSITION: relative; HEIGHT: 138px
    }
    #replacement {
    FLOAT: left
    }
    H1#title {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 170px; PADDING-TOP: 0px; POSITION: absolute; TOP: 27px; HEIGHT: 32px
    }
    H1#title {
    OVERFLOW: hidden
    }
    H1#title EM {
    DISPLAY: block; BACKGROUND: url(images/cssplay1b.gif); LEFT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px; HEIGHT: 32px
    }
    H2#slogan {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 390px; PADDING-TOP: 0px; FONT-FAMILY: tahoma, sans-serif; POSITION: absolute; TOP: 59px; HEIGHT: 15px; TEXT-ALIGN: left
    }
    H2#slogan {
    OVERFLOW: hidden
    }
    H2#slogan EM {
    DISPLAY: block; BACKGROUND: url(images/slogan1b.gif); LEFT: 0px; WIDTH: 390px; POSITION: absolute; TOP: 0px; HEIGHT: 15px
    }
    H2 {
    FONT-WEIGHT: normal; FONT-SIZE: 1.2em; MARGIN: 0px 0px 10px; COLOR: #005f8c; PADDING-TOP: 5px; FONT-FAMILY: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; LETTER-SPACING: 0.2em; TEXT-ALIGN: center
    }
    H2 SPAN {
    LINE-HEIGHT: 1.4em
    }
    H3 {
    FONT-SIZE: 1.1em
    }
    #mainmenu {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 750px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 80px; HEIGHT: 35px
    }
    LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }
    LI A {
    DISPLAY: block; FONT-SIZE: 2.2em; FLOAT: left; WIDTH: 107px; COLOR: #aaa; LINE-HEIGHT: 33px; FONT-FAMILY: tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; LETTER-SPACING: -6px; HEIGHT: 35px; TEXT-ALIGN: center; TEXT-DECORATION: none
    }
    LI A:visited {
    DISPLAY: block; FONT-SIZE: 2.2em; FLOAT: left; WIDTH: 107px; COLOR:; LINE-HEIGHT: 33px; FONT-FAMILY: tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; LETTER-SPACING: -6px; HEIGHT: 35px; TEXT-ALIGN: center; TEXT-DECORATION: none
    }
    LI EM {
    DISPLAY: block; FONT-SIZE: 2.2em; FLOAT: left; WIDTH: 107px; COLOR:; LINE-HEIGHT: 33px; FONT-STYLE: normal; FONT-FAMILY: tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; LETTER-SPACING: -6px; HEIGHT: 35px; TEXT-ALIGN: center; TEXT-DECORATION: none
    }
    LI A:hover {
    COLOR:
    }
    #submenu {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; RIGHT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 121px
    }
    LI {
    FONT-SIZE: 9px; FLOAT: left; WIDTH: 107px
    }
    LI A {
    DISPLAY: block; WIDTH: 107px; COLOR:; FONT-FAMILY: tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; TEXT-ALIGN: center; TEXT-DECORATION: none
    }
    LI A:visited {
    DISPLAY: block; WIDTH: 107px; COLOR:; FONT-FAMILY: tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; TEXT-ALIGN: center; TEXT-DECORATION: none
    }
    LI A:hover {
    COLOR:; TEXT-DECORATION: underline
    }
    #info {
    BORDER-TOP: 20px solid; BACKGROUND:; PADDING-BOTTOM: 12px; WIDTH: 750px; BORDER-BOTTOM: #444 1px solid
    }
    #foot {
    CLEAR: both; BORDER-TOP: #888 5px solid; BACKGROUND:; PADDING-BOTTOM: 10px; MARGIN: 0px; WIDTH: 750px; BORDER-BOTTOM: 1px solid
    }
    DL.col1 {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 10px; WIDTH: 230px; PADDING-TOP: 10px
    }
    HTML DL.col1 {
    WIDTH: 230px
    }
    DL.col1 DT {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 10px; COLOR: #666; PADDING-TOP: 0px
    }
    DL.col1 DD {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.7em; PADDING-TOP: 0px
    }
    DL.col1 DD A {
    COLOR: #404; TEXT-DECORATION: none
    }
    DL.col1 DD A:visited {
    COLOR:; TEXT-DECORATION: none
    }
    DL.col1 DD A:hover {
    COLOR:; TEXT-DECORATION: underline
    }
    DL.col1 EM {
    COLOR:; FONT-STYLE: normal
    }
    DL.clear {
    CLEAR: both
    }
    .col2 {
    CLEAR: both; BORDER-RIGHT: 1px solid; DISPLAY: block; BACKGROUND:; FLOAT: left; WIDTH: 500px
    }
    .col2 LI {
    FONT-SIZE: 0.9em; LINE-HEIGHT: 1.5em
    }
    .col3 {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 229px; PADDING-TOP: 0px
    }
    .col3 A IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 5px; BORDER-RIGHT-WIDTH: 0px
    }
    .col4 {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 230px; PADDING-TOP: 0px
    }
    .col5 {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; MIN-HEIGHT: 20em; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 230px; PADDING-TOP: 0px; HEIGHT: 20em
    }
    .col6 {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 480px; PADDING-TOP: 0px
    }
    .col7 {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
    }
    HTML .col4 {
    WIDTH: 230px
    }
    #donate {
    MARGIN: 0px auto
    }
    H2.line {
    BORDER-TOP: 1px solid
    }
    H2.line {
    MARGIN: 0px -10px 10px
    }
    H2.clear {
    CLEAR: both; BORDER-TOP: 1px solid
    }
    P {
    MARGIN-TOP: 0px; FONT-SIZE: 0.9em; LINE-HEIGHT: 1.8em; FONT-FAMILY: verdana, arial, sans-serif; TEXT-ALIGN: justify
    }
    .highlight {
    BORDER-TOP: 1px solid; BACKGROUND: #adf; WIDTH: 230px; BORDER-BOTTOM: 5px solid; FONT-STYLE: italic; FONT-FAMILY: georgia, "times new roman", serif
    }
    HTML .highlight {
    WIDTH: 225px
    }
    #sites {
    CLEAR: both; BORDER-TOP: 1px solid; BACKGROUND:; WIDTH: 750px
    }
    DD {
    COLOR: #686
    }
    PRE {
    FONT-SIZE: 1.1em
    }
    HTML PRE {
    FONT-SIZE: 1em
    }
    #ads {
    CLEAR: both; MARGIN-TOP: 10px; WIDTH: 750px; TEXT-ALIGN: center
    }
    .date {
    FONT-SIZE: 1.1em; MARGIN: 0px; COLOR: #e09222; FONT-STYLE: italic; FONT-FAMILY: georgia, "times new roman", serif
    }
    .bold {
    FONT-WEIGHT: bold
    }
    H2#welcome:unknown {
    FONT-WEIGHT: bold; COLOR: #c00
    }
    H2#search:unknown {
    FONT-WEIGHT: bold; COLOR:
    }
    H2#comments:unknown {
    FONT-WEIGHT: bold; COLOR:
    }
    H2#about:unknown {
    FONT-WEIGHT: bold; COLOR:
    }
    H2#approvals:unknown {
    FONT-WEIGHT: bold; COLOR:
    }
    H2#archives:unknown {
    FONT-WEIGHT: bold; COLOR:
    }
    H2#links:unknown {
    FONT-WEIGHT: bold; COLOR:
    }
    DT.spacer {
    MARGIN-TOP: 1em
    }
    #pagerank {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 66px; HEIGHT: 13px; BORDER-RIGHT-WIDTH: 0px
    }
    #sspire {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    .fright {
    PADDING-RIGHT: 12px; FONT-SIZE: 0.8em; FLOAT: right; COLOR:; FONT-FAMILY: arial, verdana, sans-serif
    }
    DL.cola {
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 10px; MARGIN: 0px; WIDTH: 165px; PADDING-TOP: 10px
    }
    HTML DL.cola {
    WIDTH: 165px
    }
    DL.cola DT {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 10px; COLOR:; PADDING-TOP: 0px
    }
    DL.cola DD {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.7em; PADDING-TOP: 0px
    }
    DL.cola DD A {
    COLOR:; TEXT-DECORATION: none
    }
    DL.cola DD A:visited {
    COLOR:; TEXT-DECORATION: none
    }
    DL.cola DD A:hover {
    COLOR:; TEXT-DECORATION: underline
    }
    .advert {
    BACKGROUND: #362b16; COLOR:; LINE-HEIGHT: 2em; HEIGHT: 2.5em
    }
    .image IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 1em 0px; BORDER-RIGHT-WIDTH: 0px
    }
    .adimage IMG {
    BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 1em; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    .right {
    FLOAT: right
    }
    .small {
    FONT-SIZE: 0.75em
    }
    .page-ad {
    DISPLAY: block; MARGIN: 1em; TEXT-ALIGN: center
    }
    .page-ad IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    #stats {
    BORDER-RIGHT: #8c674f 1px solid; BORDER-TOP: 1px solid; MARGIN: 0px auto; BORDER-LEFT: 1px solid; WIDTH: 750px; BORDER-BOTTOM: 1px solid; BORDER-COLLAPSE: collapse
    }
    CAPTION {
    FONT-SIZE: 1.2em; BACKGROUND:; COLOR:; LINE-HEIGHT: 2em; HEIGHT: 2em; TEXT-ALIGN: center
    }
    THEAD TH {
    PADDING-RIGHT: 1em; FONT-SIZE: 0.8em; BACKGROUND: #e9dab2; COLOR:; LINE-HEIGHT: 1.5em; HEIGHT: 1.5em; TEXT-ALIGN: right
    }
    TBODY TD {
    PADDING-RIGHT: 1em; FONT-SIZE: 0.75em; BACKGROUND: #f6f1e1; TEXT-ALIGN: right
    }
    TBODY TD.pad {
    WIDTH: 200px
    }
    TFOOT TD {
    FONT-SIZE: 0.8em; BACKGROUND:; COLOR:; LINE-HEIGHT: 1.5em; HEIGHT: 1.5em; TEXT-ALIGN: center
    }
    .clearboth {
    CLEAR: both
    }
    #seek {
    MARGIN-BOTTOM: 5px
    }
    P.strike {
    TEXT-DECORATION: line-through
    }
    .hiddenfromview {
    DISPLAY: none
    }

    A {
    COLOR: #080
    }
    A:visited {
    COLOR:
    }
    A.gallery {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: 1px solid; WIDTH: 75px; COLOR:; BORDER-BOTTOM: 1px solid; HEIGHT: 47px; TEXT-DECORATION: none
    }
    A.gallery:visited {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: 1px solid; WIDTH: 75px; COLOR:; BORDER-BOTTOM: 1px solid; HEIGHT: 47px; TEXT-DECORATION: none
    }
    A.slidea {
    BACKGROUND: url(images/london/thumb2.jpg)}
    A.slideb {
    BACKGROUND: url(images/london/thumb3.jpg)}
    A.slidec {
    BACKGROUND: url(images/london/thumb4.jpg)}
    A.slided {
    BACKGROUND: url(images/london/thumb5.jpg)}
    A.slidee {
    BACKGROUND: url(images/london/thumb6.jpg)}
    A.slidef {
    BACKGROUND: url(images/london/thumb7.jpg)}
    A.slideg {
    BACKGROUND: url(images/london/thumb8.jpg)}
    A.slideh {
    BACKGROUND: url(images/london/thumb9.jpg)}
    A.slidei {
    BACKGROUND: url(images/london/thumb10.jpg)}
    A.slidej {
    BACKGROUND: url(images/london/thumb11.jpg)}
    A.gallery EM {
    DISPLAY: none
    }
    A.gallery SPAN {
    DISPLAY: none
    }
    A.gallery:hover {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    #container_top {
    BORDER-RIGHT: #a49188 1px solid; BORDER-TOP: 1px solid; BACKGROUND: #d1c8c3; MARGIN: 1em auto; BORDER-LEFT: 1px solid; WIDTH: 425px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 700px
    }
    IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    #thumbs {
    LEFT: 0px; POSITION: absolute; TOP: 0px
    }
    A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 110px; HEIGHT: 50px
    }
    A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR:; FONT-STYLE: normal
    }
    A.gallery:active {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:unknown {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:active EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px;
    }
    A.gallery:unknown EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px
    }
    H1 {
    CLEAR: both; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; COLOR:; PADDING-TOP: 200px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
    }
    H1 EM {
    FONT-SIZE: 0.6em; COLOR:
    }
    #container_bottom {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BACKGROUND:; MARGIN: 1em auto; BORDER-LEFT: 1px solid; WIDTH: 425px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 425px
    }
    IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    {
    LEFT: 0px; BOTTOM: 0px; POSITION: absolute
    }
    A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: -45px; HEIGHT: 50px
    }
    A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR:; FONT-STYLE: normal
    }
    A.gallery:active {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:unknown {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:active EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: -305px; HEIGHT: 250px
    }
    A.gallery:unknown EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: -305px; HEIGHT: 250px
    }
    H1 {
    CLEAR: both; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; COLOR:; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
    }
    H1 EM {
    FONT-SIZE: 0.6em; COLOR:
    }
    #container_left {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BACKGROUND:; MARGIN: 1em auto; BORDER-LEFT: 1px solid; WIDTH: 600px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 305px
    }
    IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    {
    LEFT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px
    }
    A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: 175px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 265px; HEIGHT: 50px
    }
    A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR:; FONT-STYLE: normal
    }
    A.gallery:active {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:unknown {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:active EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 180px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
    }
    A.gallery:unknown EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 180px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
    }
    H1 {
    CLEAR: both; PADDING-LEFT: 250px; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; WIDTH: 300px; COLOR:; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
    }
    H1 EM {
    FONT-SIZE: 0.6em; COLOR:
    }
    #container_right {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BACKGROUND:; MARGIN: 1em auto; BORDER-LEFT: 1px solid; WIDTH: 600px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 305px
    }
    IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    {
    RIGHT: 0px; WIDTH: 170px; POSITION: absolute; TOP: 0px
    }
    A.gallery:hover SPAN {
    PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; LEFT: -430px; PADDING-BOTTOM: 5px; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; FONT-STYLE: italic; POSITION: absolute; TOP: 265px; HEIGHT: 50px
    }
    A.gallery:hover SPAN:first-line {
    FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR:; FONT-STYLE: normal
    }
    A.gallery:active {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:unknown {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    A.gallery:active EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
    }
    A.gallery:unknown EM {
    BORDER-RIGHT: 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
    }
    H1 {
    CLEAR: both; PADDING-LEFT: 50px; FONT-WEIGHT: normal; FONT-SIZE: 3em; MARGIN: 0px; WIDTH: 300px; COLOR:; PADDING-TOP: 80px; FONT-FAMILY: georgia, "times new roman", serif; TEXT-ALIGN: center
    }
    H1 EM {
    FONT-SIZE: 0.6em; COLOR:
    }

    Ho evidenziato in grassetto sottolineato la parte che è relativa alla galleria attiva. Questo è un ottimo sistema per non usare i frames!
    Unico problema, non riesco a centrare le foto se questa hanno una dimensione minore della cornice che si viene a creare.
    Mi aiutate :)?

    0
  • C
    Super User •

    Ciao mi perdo in quel css lunghissimo 😄

    Tu che lo conosci meglio, dovresti inserire al punto giusto:

    text-align:center;

    Ciao :ciauz:

    0
  • M
    Super User •

    @claudioweb said:

    Ciao mi perdo in quel css lunghissimo 😄

    Tu che lo conosci meglio, dovresti inserire al punto giusto:

    text-align:center;

    Ciao :ciauz:

    :D!
    Il punto da variare sarebbe questo:
    #container_right A.gallery:active EM {
    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: -425px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; WIDTH: 402px; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 5px; HEIGHT: 250px
    ma non conosco un attributo per centrare le foto in tutto sto macello! Ora provo come mi hai detto, si, in fondo, sempre di una centratura si tratta.
    Ora mi sono messo a studiare i fogli di stile. Non mi dite che l'html è un linguaggio facile altrimenti, come dice Giorgio, vengo a casa con la mazza :D!
    Quando si deve fare una piccola modifica diventa un macello anche per una scritta che deve andare su e giù! Esiste a proposito una lista che descrive le proprietà dei CSS?

    0
  • M
    User •

    Ciao! Sono nuovo del forum quindi ciao a tutti!!!

    Effettivamente il css qui sopra è un po' lunghetto ma il parametro text-align: center dovrebbe andare bene per le immagini

    Ti consiglio quando utilizzi il css di testarlo su più browser, perchè l'interpretazione è diversa (ti farà diventare matto all'inizio)!

    Io di solito uso Firefox ma testo anche su Explorer e Opera.

    C'è inoltre la possibilità per chi non ha Mac di testare le proprie pagine su Safari... ad esempio con questo: http://www.snugtech.com/safaritest/

    Per l'elenco dei parametri css con esempi ti consiglio questo: http://www.w3schools.com/css/

    Altrimenti c'è il sito ufficiale del W3C: http://www.w3.org/Style/CSS/

    Per quanto riguarda l'html volevo ricordarti che l'XHTML è case-sensitive essendo basato su XML e i tag andrebbero scritti sempre in minuscolo

    Inoltre sempre essendo basato su XML, se apri un tag, lo devi anche chiudere...

    esempio:

    ciao</p>

    </br>

    che si sintetizza con:

    e vale anche per tutti quei tag con contenuto vuoto come img

    quindi:

    ...

    così tanto per essere precisi

    a presto
    Max.

    0
  • M
    Super User •

    @mr_valdemar said:

    Ciao! Sono nuovo del forum quindi ciao a tutti!!!

    Effettivamente il css qui sopra è un po' lunghetto ma il parametro text-align: center dovrebbe andare bene per le immagini

    Ti consiglio quando utilizzi il css di testarlo su più browser, perchè l'interpretazione è diversa (ti farà diventare matto all'inizio)!

    Io di solito uso Firefox ma testo anche su Explorer e Opera.

    C'è inoltre la possibilità per chi non ha Mac di testare le proprie pagine su Safari... ad esempio con questo: http://www.snugtech.com/safaritest/

    Per l'elenco dei parametri css con esempi ti consiglio questo: http://www.w3schools.com/css/

    Altrimenti c'è il sito ufficiale del W3C: http://www.w3.org/Style/CSS/

    Per quanto riguarda l'html volevo ricordarti che l'XHTML è case-sensitive essendo basato su XML e i tag andrebbero scritti sempre in minuscolo

    Inoltre sempre essendo basato su XML, se apri un tag, lo devi anche chiudere...

    esempio:

    ciao</p>

    </br>

    che si sintetizza con:

    e vale anche per tutti quei tag con contenuto vuoto come img

    quindi:

    ...

    così tanto per essere precisi

    a presto
    Max.

    Benvenuto 🙂 e grazie per i consigli, ne farò tesoro.

    0
  • C
    Super User •

    Ciao mr_valdemar benvenuto nel forum 🙂

    :ciauz:

    0
  • M
    User •

    grazie a tutti!!!

    buon pomeriggio!

    Max.

    0
  • M
    Super User •

    Ho raffinato il foglio di stile: con l'attributo text align center messo dappertutto non funzionava!!! Mi date ora una mano, per favore :D?

    HTML {
    BACKGROUND: #850d0d; COLOR: #000
    }
    BODY {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 76%; BACKGROUND: url(images/back1b.gif) repeat-x; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR:; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px
    }

    A.gallery:visited {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; DISPLAY: inline-block; Z-INDEX: 50; FLOAT: left; MARGIN: 4px; BORDER-LEFT: 1px solid; WIDTH: 75px; COLOR:; BORDER-BOTTOM: 1px solid; HEIGHT: 47px; TEXT-DECORATION: none;
    }

    A.gallery EM {
    DISPLAY: none
    }
    A.gallery SPAN {
    DISPLAY: none
    }
    A.gallery:hover {
    BORDER-RIGHT: #000000 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }
    #container_top {
    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; MARGIN: 1em auto; BORDER-LEFT: 1px solid; WIDTH: 680px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 1000px
    }

    BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
    }

    BORDER-RIGHT: #3d330f 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: 1px solid; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 50; LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: 1px solid; COLOR:; PADDING-TOP: 5px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 160px; HEIGHT: 250px;
    }

    0
Effettua l'accesso per rispondere