Миниатюры просматриваются не совсем так, как я хочу?

Question

Миниатюры просматриваются не совсем так, как я хочу?

0

Я вношу изменения в сайт Blogger для друга, и он выполнен на заказ, поэтому он не подходит под раздел справки блогера.

Я надеюсь, что это будет конкретный вопрос HTML/CSS, и кто-то здесь может помочь.

Я настраиваю список меню, используя эскизы из уже поставленных сообщений. Пока у меня есть миниатюры, но я не могу заставить макет правильно даже настроить CSS, и я не уверен, что мне не хватает.

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

Мои проблемы: 1. Я не могу заставить миниатюры сидеть бок о бок. 2. Я не могу уменьшить вертикальное пространство между эскизами 3. Я хотел бы сделать текст синим под эскизами, если это возможно. 4. Наконец, я хотел бы исправить левое выравнивание эскизов, чтобы они совпадали с заголовком выше.

Это страница, о которой идет речь: http://www.cakeandtravels.com/p/breakfast.html (я бы хотел опубликовать рис, но это не позволит мне.)

Это CSS, который я использую до сих пор:

/* Recent posts by labels
--------------------------------- */ 
img.label_thumb{
float:left;
border: none; 
background: none;
height:120px;width:120  px;
margin:0 2px 2px 0px;
padding:0px;
}

ul.label_with_thumbs {
width:auto;
margin:0px 0px 0px 0px;
padding:2px;
border: none;
height: 800px;
}

img.label_thumb:hover{
border: none;
background: none; 
}

.label_with_thumbs{
float:left;
display: inline;
width:100%;
margin:0;
padding:5px;
background:none;
}

ul.label_with_thumbs li{
text-align: center;
text-wrap: auto;
text-indent: 5px;
line-height:140px;
margin:0;
padding: 4px 0 5px;
width:100%
}

Затем он связан с серией Javascript и импортируется на конкретную страницу, используя это. (я действительно надеюсь, что это не то, где проблема заключается в том, что она немного из моей базы знаний!)

Любая помощь вообще или если вам нужна дополнительная информация, которая будет очень полезной. Спасибо Angie

user3048527 29 нояб. 2013, в 09:41

Источник

0

Открыли ли вы консоль браузера, чтобы проверить, не прошел ли запрос файла изображения?
Domi 29 нояб. 2013, в 08:25
0

Привет, Доми, Мои изображения выглядят хорошо, на самом деле это больше, чем просто фактический дизайн, который я пытаюсь настроить.
user3048527 29 нояб. 2013, в 23:41

Теги:

html

css

blogger

1 ответ

Ещё вопросы

Открыли ли вы консоль браузера, чтобы проверить, не прошел ли запрос файла изображения?
Привет, Доми, Мои изображения выглядят хорошо, на самом деле это больше, чем просто фактический дизайн, который я пытаюсь настроить.

Kryssthanel · Answer 1 · 2013-11-29T06-56-00.000Z

В основном, без какого-либо из ваших css, я просто сказал:

ul.label_with_thumbs li {
display: inline-block;
width: 150px;
height: 110px;
text-align: center;
vertical-align: top; }

img.label_thumb {
margin: auto;
}

Это решает некоторые из ваших потребностей для меня. Это моя версия, она сохраняет некоторые вещи, чтобы улучшить, чтобы соответствовать вашим желаниям (например, настроить размер изображений,..), это просто бета-версия.

И, как сказал Доми, у вас будет большая помощь с вашей консоли. F12, чтобы отобразить его, и вы можете изменить css на своей странице, пытаясь улучшить его.