div, прокручивающий страницу вниз вместо 2 строк - PullRequest
Новая
       10

div, прокручивающий страницу вниз вместо 2 строк

1 голос
/ 13 августа 2011

Я сижу здесь, почесывая голову, у меня должно быть 2 ряда по 4 делителя, как это видно в Dreamweaver, хотя, когда дело доходит до загрузки, они просто переходят на страницу один под другим.

HTML: 

<link rel="stylesheet" type="text/css" media="screen, print, projection"  href="css/common.css"</link> 

<div id="mainimage"><?php include_once "projects/wc2/mainimage.php"; ?></div>
<div id="titletext"><?php include_once "projects/wc2/titletext.php"; ?></div>
<div id="images">
<div id="1" class="thumb">Hello I am a thumbnail!</div>
<div id="2" class="thumb">Hello I am a thumbnail!</div>
<div id="3" class="thumb">Hello I am a thumbnail!</div>
<div id="4" class="thumb">Hello I am a thumbnail!</div>
<div id="5" class="thumb">Hello I am a thumbnail!</div>
<div id="6" class="thumb">Hello I am a thumbnail!</div>
<div id="7" class="thumb">Hello I am a thumbnail!</div>
<div id="8" class="thumb">Hello I am a thumbnail!</div>
</div>

CSS: 

@charset "UTF-8";
/* CSS Document */

#site {
    position: absolute;
    height: 600px;
    width: 960px;
}

/* ---------------------------------------- */
/* leftside - including logo and navigation */
/* ---------------------------------------- */

#leftside {
    position: relative;
    float: left;
    height: 600px;
    width: 325px;
    background-color: #FFF
}

#logo {
    position: relative;
    top: 0px;
    left: 0px;
}

#nav {
    position: relative;
    font: "Courier New", Courier, monospace;
    font-size: 12px;
    top: 40px;
    left: 25%;
}

    /* link styling */

    a:link {color: #000; text-decoration: none;}   /* unvisited link */
    a:visited {color: #000; text-decoration: none;} /* visited link */
    a:hover {color: #F60; text-decoration: none;} /* mouse over link */
    a:active {color: #F60; text-decoration: none;}  /* selected link */



/* ------------------- */
/* content and gallery */
/* ------------------- */

#content {
    position: relative;
    float: right;
    height: 600px;
    width: 635px;
    background-color: #FFF
}

#mainimage {
    position: absolute;
    height: 420px;
    width: 400px;
    top: 100px;
    left: 97px;
}

.image {
    -moz-box-shadow: 3px 3px 3px #666; 
    -webkit-box-shadow: 3px 3px 3px #666; 
    -box-shadow: 3px 3px 3px #666;
}

#titletext {
    font: "Courier New", Courier, monospace;
    font-size: 12px;
    position: absolute;
    height: 420px;
    width: 300px;
    top: 100px;
    left: 500px;    
}

/* ---------------------- */
/* thumbnails - 8 of them */
/* ---------------------- */

#images {
    position: absolute;
    overflow: 0px;
    height: 400px;
    width: 700px;
    top: 600px;
    left: 100px;
}

.thumb {
    height: 150px;
    width: 150px;
}

#1 {
    position: absolute;
    top: 33px;
    left: 20px;
}

#2 {
    position: absolute;
    top: 33px;
    left: 190px;
}

#3 {
    position: absolute;
    top: 33px;
    left: 360px;
}

#4 {
    position: absolute;
    top: 33px;
    left: 530px;
}

#5 {
    position: absolute;
    top: 203px;
    left: 20px;
}

#6 {
    position: absolute;
    top: 203px;
    left: 190px;
}

#7 {
    position: absolute;
    top: 203px;
    left: 360px;
}

#8 {
    position: absolute;
    top: 203px;
    left: 530px;
}

Любая информация по этому вопросу будет высоко оценена.

1 Ответ

0 голосов
/ 13 августа 2011

Зачем использовать position: absolute для идентификатора каждого изображения? Это не похоже на очень масштабируемое решение.

Вместо этого, поскольку ваши эскизы имеют фиксированный размер, вы также можете добавить display: inline-block к вашему .thumb стилю.

Вот исправление: http://jsfiddle.net/hCkBz/

Кроме того, причина, по которой стили CSS ID не работают, заключается в том, что ID не может начинаться с цифры. http://www.w3.org/TR/html4/types.html#type-name

...