CSS позиционирование картинок рядом друг с другом - PullRequest
0 голосов
/ 03 января 2011

Я пытался расположить картинки рядом друг с другом в CSS для страницы приветствия Facebook, которую можно найти здесь .

Вот CSS:

table {
    border-collapse: collapse;
}

th, td { 
    margin: 0;
    padding: 0;
}

div.nav {
    width: 520px;
    margin: 0 auto;
    text-align: center;
}

div.nav1
{
/*height: 165px;*/
width: 136px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/internships-link.jpg");
float: left;
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {
display:block;
}

div.nav1 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav1 a:hover img {
visibility:hidden;
}

div.nav2
{
/*height: 165px;*/
width: 193px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/website-link.jpg");
float: left;
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {
display:block;
}

div.nav2 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav2 a:hover img {
visibility:hidden;
}

div.nav3
{
/*height: 165px;*/
width: 102px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/education-link.jpg");
float: left;
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {
display:block;
}

div.nav3 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav3 a:hover img {
visibility:hidden;
}

div.nav4
{
/*height: 165px;*/
width: 89px;
background-image:url("http://i971.photobucket.com/albums/ae198/smilehealthy/programs-link.jpg");
float: left;
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {
display:block;
}

div.nav4 img {
/*width:100%;
height:100%;*/
border:0;
}

div.nav4 a:hover img {
visibility:hidden;
}#container {
    margin: 0 auto;
}

1 Ответ

1 голос
/ 03 января 2011

ваш CSS вообще не применяется к этой странице. Facebook скремблирует все имена файлов, поэтому трудно сказать, что происходит, но ваш FBML как-то неверен и CSS не загружается.

Предложение: создайте отдельную версию, не относящуюся к FB, и опубликуйте ее для решения ваших проблем с CSS, а затем опубликуйте ее.

...