laik216
-
Posts
2 -
Joined
-
Last visited
laik216's Achievements
Explorer (1/14)
0
Reputation
-
И код и картинки
-
Подскажите как выровнять по центру, совсем запутался... html </head><body> <div class="parent"> <span> <ul> <li><a href="#">#</a></li> <li><a href="#">#</a></li> <li><a href="#">#</a></li> <li><a href="#">#</a></li> <li><a href="#">#</a></li> <li><a href="#">#</a></li> </ul> </span> </div> <div class="buttonm"> </div></div> <div id="dhtmlgoodies_slideshow"> <div id="galleryContainer"> <div id="arrow_up"><img src="images/arrow-up.gif" id="arrow_up_image"></div> <div id="theImages"> <div style="top: -135px;"> <a href="#" onclick="showPreview('images/1.jpg','1');return false"><img style="opacity: 0.5;" src="images/01.jpg"></a> <a href="#" onclick="showPreview('images/2.jpg','2');return false"><img style="opacity: 0.5;" src="images/02.jpg"></a> <a href="#" onclick="showPreview('images/3.jpg','3');return false"><img style="opacity: 0.5;" src="images/03.jpg"></a> <a href="#" onclick="showPreview('images/4.jpg','4');return false"><img style="opacity: 0.5;" src="images/04.jpg"></a> <a href="#" onclick="showPreview('images/5.jpg','5');return false"><img style="opacity: 0.5;" src="images/05.jpg"></a> <a href="#" onclick="showPreview('images/6.jpg','6');return false"><img src="images/06.jpg"></a> <a href="#" onclick="showPreview('images/7.jpg','7');return false"><img src="images/07.jpg"></a><a href="#" onclick="showPreview('images/8.jpg','8');return false"><a href="#" onClick="showPreview('images/8.jpg','8');return false"><img src="images/08.jpg"></a></a><a href="#" onclick="showPreview('images/9.jpg','1');return false"><img src="images/09.jpg"></a> <a href="#" onclick="showPreview('images/10.jpg','2');return false"><img src="images/010.jpg"></a> <a href="#" onclick="showPreview('images/11.jpg','3');return false"><img src="images/011.jpg"></a> <a href="#" onclick="showPreview('images/12.jpg','4');return false"><img src="images/012.jpg"></a> <a href="#" onclick="showPreview('images/13.jpg','5');return false"><img src="images/013.jpg"></a> <div class="imageCaption">This is the caption of image number 1</div> <div class="imageCaption">This is the caption of image number 2</div> <div class="imageCaption">This is the caption of image number 3</div> <div class="imageCaption">This is the caption of image number 4</div> <div class="imageCaption">This is the caption of image number 5</div> <div class="imageCaption">This is the caption of image number 6</div> <div class="imageCaption">This is the caption of image number 7</div> <div class="imageCaption">This is the caption of image number 8</div> <div id="slideEnd"></div> </div> </div> <div id="arrow_down"><img src="images/arrow-down.gif" id="arrow_down_image"></div> </div> <div id="previewPane"><img src="images/1.jpg"><span style="display: none;" id="waitMessage">Loading image. Please wait</span> <div style="display: block;" id="largeImageCaption">This is the caption of image number 1</div> </div> </div> </body></html> css body{ background-color:#000; background-repeat:no-repeat; padding-top:20px; text-align: center; } #dhtmlgoodies_slideshow{ width:800px; /* Total width of slideshow */ } #previewPane{ border:0px solid #000; margin-right:10px; text-align:center; vertical-align:middle; padding-left:2%; /* CSS HACK */ height: 400px; /* IE 5.x */ height/* */:/**/400px; /* Other browsers */ height: /**/400px; width:500px; float:left; } #waitMessage{ display:none; position:absolute; left:200px; top:150px; background-color:#FFF; border:3px double #000; padding:4px; color:#555; font-size:0.9em; font-family:arial; text-align: center; } #galleryContainer{ /* Big Div surrounding up image, list of images and down image */ float:left; /* CSS HACK */ height: 500px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/ height/* */:/**/500px; /* Other browsers */ height: /**/500px; /* CSS HACK */ width: 124px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/ width/* */:/**/120px; /* Other browsers */ width: /**/120px; border:0px solid #000; /* Black border */ padding:1px; /* A little space between the black border and the content inside */ } #galleryContainer #arrow_down{ /* Arrow down image */ height:16px; } #galleryContainer #arrow_up{ height:16px; /* Arrow up image */ } #theImages{ /* DIV where the images are located */ position:relative; overflow:hidden; height:498px; /* Height of boxes for the images */ } #theImages div{ position:relative; /* Don't change this */ height:1500px; /* Higher than total height of thumbnails */ } #theImages img{ border:0px; /* No border */ filter:alpha(opacity=50); /* Transparency - IE */ opacity:0.5; /* Transparency - Firefox */ padding-top:1px; /* Space between images */ } #previewPane #largeImageCaption{ /* CSS styling of image caption below large image */ font-style:italic; text-align:center; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ font-size:0.9em; } #theImages .imageCaption{ display:none; } div#container { width: 1000px; margin-left: auto; margin-right: auto; } .parent { padding: 20px 0; background: #000; } .parent ul { text-align: center; } .parent li { display: inline; margin-left: 20px; } .parent a { color: #fff; } .parent li:first-child, li.first-child { margin: 0; } * html .parent li { z-index: expression( runtimeStyle.zIndex = 1, this == parentNode.firstChild ? (className += " first-child") : 0 ) }