Проблема с галереей

Ergonav · February 26, 2012

Не могу разобраться, пробывал по разному, ничего не выходило, прошу помочь. Нужно чтоб галерея располагалась посередине сайта или в две колонки.

css


body { 
background-color: #f2f2f2;
width:500px;
border:10px solid #D3D3D3;
margin:0 auto;
padding:10px
}





h1 {
   font-family: lobster two, cursive;
   font-size: 50px;
   font-style: italic;
   text-shadow: 2px 2px #adadad;
   text-align: center;
   color: #f2f2f2;
   onmouseover="this.style.color='#FFFFFF';
   onmouseout="this.style.color='#000000';
}





/* Менюшка */
#nav {
	position: absolute;
	top: 110px;
	left: 390px;
}

#nav li {
	float: left;
	display: block;
}

#nav li a {
	padding: 8px 14px;
	border-right: 4px solid #1f1a19;
	font-weight: bold;
	text-transform: none;
	display: block;
}

#nav li.Current a:link,
#nav li.Current a:visited,
#nav li.Current:hover a,
#nav li.Current:active a {
	color: #30A7F3;
}

#nav li a:link,
#nav li a:visited {
	color: black;
}

#nav li a:hover,
#nav li a:active {
	color: #30A7F3;
}

#nav li.Last a {
	padding-right: 0;
	border-right: none;
}

#info {
    width: 700px;
    position: absolute;
    top: 100px;
    left: -100px;
    font-family: 'Open Sans', sans-serif;
	    } 



.ic_container{
    vertical-align:baseline;
    margin:10px;
    position:relative;
    /*-moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px #888;*/
}
.overlay{
    opacity:0.3;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
    position:absolute;    
    opacity:0.6;   
    overflow:hidden;
    margin:0px;
    padding:0px;
    left:0px;
    right:0px;
    cursor:default;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:3px;
    padding:5px;
    margin:0px;
}
.ic_caption h3{
    padding:0px 5px 5px 5px;
    margin:0px;
    font-size:18px;
}
.ic_text{
    padding:5px;
    margin:0px;
    text-align:justify;
    font-size:11px;

}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	           <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
			   	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<html>
<head>
    <title>Портфолио</title>
      <link rel="stylesheet" type="text/css" href="style/style.css" />

</head>
<body>


	  </head>
	  <body>

	  <h1><span style="color:#000000;" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color='#000000';">Заголовок</span></h1>

	  <ul id="nav">

	  <li><a href="/index.html">Главная</a></li>
					<li><a href="/prices.html">Цены</a></li>
					<li><a href="/portfolio.html">Портфолио</a></li>
					<li class="Last"><a href="/contact.html">Контакт</a></li>

	 <div id="info">



                <div id="capslide_img_cont2" class="ic_container">
                    <img src="images/foto.jpg"  width="378" height="156"  alt="foto"/>
                    <div class="overlay" style="display:none;"></div>
                    <div class="ic_caption">

                        <h3><a href='/'>link</a></h3>
                        <p class="ic_text">
                           Текст
                        </p>
			</div>
			</div>


      <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script src="jquery.capSlide.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $("#capslide_img_cont").capslide({
                    caption_color	: '#DCDCDC',
                    caption_bgcolor	: '#DCDCDC',
                    overlay_bgcolor : '#DCDCDC',
                    border			: '6px solid #FFFAFA',
                    showcaption	    : false
                });
                $("#capslide_img_cont2").capslide({
                    caption_color	: '#DCDCDC',
                    caption_bgcolor	: '#DCDCDC',
                    overlay_bgcolor : '#DCDCDC',
                    border			: '6px solid #FFFAFA',
                    showcaption	    : true
                });

            });
        </script>

</body>
</html>

Edited February 27, 2012 by Ergonav

Arinden · February 26, 2012

Если не брать в расчёт такую мелочь, как выглядит ваш сайт на моём компьютере:

То сделать это можно:



#info {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Open Sans', sans-serif;
}

И обратите внимание, на повторяющиеся теги head и body.

Ergonav · February 27, 2012

Поправил заголовок

Ergonav · March 2, 2012

Так как сделать в две колонки?

Как я понимаю

#info {
    width: 700px;
    margin-left: X px;
    margin-right: X px;
    font-family: 'Open Sans', sans-serif;
}

Я правильно написал? чтоб во всех размерах мониторов отображалось одинаково

Edited March 2, 2012 by Ergonav

Searcher · March 2, 2012

Еще не сделали макет а jquery уже воткнули... Уберите пока скрипты. Сделайте нормальный каркас. Закройте все тэги.

Sign In

Проблема с галереей

Question

Ergonav

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Arinden

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information