LINUX.ORG.RU
решено Форум — Web-development  

[html] 2 вопроса

 


0

1

Здравствуйте!
Не очень шарю в html, поэтому спрошу у вас.
Нужно сделать полоску с баннерами. Т.е. таблица - 1 строка и N столбиков. В каждом столбике отображается баннер (картинка) + текст под картинкой.

Вопросы:
1. (самое главное) Как сделать так, чтобы таблица была ВСЕГДА фиксированного размера? Задаю width, делаю <col width=...>, делаю style=«table-layout: fixed» - все равно, когда надпись под баннером больше определенной длины - все разъезжается, расстояния большими становятся (хотя визуально все поместилось бы). Как сделать, чтобы размеры были всегда фиксированные - расстояния между баннерами, ширина ячейки под баннер и тд.? Т.е. пускай даже не влезает - чтобы обрезалось, но не раздвигалось?

2. Как лучше делать подпись под картинкой? Сейчас делаю просто <br>'ом - надпись переходит в ячейке на следующую строку и оказывается под картинкой. Как сделать лучше?

Спасибо!

★★★★★
← [Отрисовка графиков] Помогите найти решение.
django test database →
Ответ на: комментарий от adriano32

Ок, но что конкретно делать? Какие параметры задавать, чтобы фиксированные размеры были? Можно пример кода? Например, две ячейки с картинками и подписями под ними, которые всегда будут фиксированного размера.

kovrik ★★★★★
() автор топика
Ответ на: комментарий от kovrik

А погуглить совсем никак?

На, посмотри как я, абсолютно не верстальщик, сделал. Думаю понятно, что width в твоём случае нужно будеть указать в пикселях видимо.

adriano32 ★★★
() 

Примерно так: оборачиваешь в контейнер фиксированной ширины, в него уже пихаешь блоки с банером и подписью (в данном случае 4 одинаковых баннера, в зависимости от кол-ва и размеров играешься с шириной блоков и отступов, чтобы ничего не съезжало при ресайзе страницы).

<! DOCTYPE html> 
<html> 
	<head> 
		<style type='text/css'> 
			#container {
				margin: 0 auto;
				width: 800px;
				border: 1px solid #EEE;
			}
			.banner {
				float: left;
				width: 23%;
				text-align: center;
				padding-top: 5px;
				margin: 1%;
			}
			.image {
				height: 100px;
				border: 1px solid #222;
				margin: auto;
			}
		</style> 
	</head> 
	<body> 
		<div id='container'> 
			<div class='banner'> 
				<div class='image'> 
				</div> 
				Баннер 1
			</div> 
			<div class='banner'> 
				<div class='image'> 
				</div> 
				Баннер 2
			</div> 
			<div class='banner'> 
				<div class='image'> 
				</div> 
				Баннер 3
			</div> 
			<div class='banner'> 
				<div class='image'> 
				</div> 
				Баннер 4
			</div> 
			<div style='clear:both'></div> 
		</div> 
	</body> 
</html>
Megamozg ★
()

Всем спасибо, почитал, погуглил - вроде все сделал.

kovrik ★★★★★
() автор топика

Нужно сделать полоску с баннерами.

фу...

1

css. style=«overflow: auto;» - при необходимоти добавит полосу прокрутки.(только применяется к <div>, в который пихается содержимое)
style=«overflow: hidden» - обрезает. Если только по горизонтали - overflow-x.

2 ... Как сделать лучше?

А что ты хочешь?

Tanger ★★★★★
()
Ответ на: комментарий от adriano32

O_o.. глаза..
Хотя бы разные оттенки одного цвета сделай..

Tanger ★★★★★
()
Ответ на: комментарий от Megamozg

В твоём примере не решена проблема увеличения ширины блока при длинном тексте который не умещается в заданную ширину. А именно это печалило ТС.

Скорее всего ТС устроил бы и такой быдлокод: 

<html> 
	<head> 
		<style type='text/css'> 
			#banners {
				width: 400px;
			}
			#banners td {
				width: 100px;
				padding: 3px;
				margin: 0;
			}
			#banners .descr {
				width: 100px;
				text-align: center;
				overflow: hidden;
			}
			.picture {
				width: 80px;
				height: 30px;
				background: #cccccc;
				margin: 0 auto 10px;
			}			
		</style> 
	</head> 
	<body> 
		<table id="banners">
			<tr>
				<td>
					<div class="picture"><!-- banner --></div>
					<div class="descr">very looooooooooooooooooooooong description</div>
				</td>
				<td>
					<div class="picture"><!-- banner --></div>
					<div class="descr">very looooooooooooooooooooooong description</div>
				</td>
				<td>
					<div class="picture"><!-- banner --></div>
					<div class="descr">very looooooooooooooooooooooong description</div>
				</td>
				<td>
					<div class="picture"><!-- banner --></div>
					<div class="descr">very looooooooooooooooooooooong description</div>
				</td>
			</tr>
		</table>
	</body> 
</html>

shrub ★★★★★
()

Да тут проблема еще в том, что могут быть отступы слева и справа, кол-во баннеров может быть разное, размер баннеров тоже...Все это в java servlet'е высчитывается по уже не поймешь каким формулам и возвращается html. Но вроде как все сделал :)

kovrik ★★★★★
() автор топика
Ответ на: комментарий от anonymous

По хорошему он решил короткий вариант аки HTML5. А в реальном X(HT)ML, который почти никто не использует, доктайп не нужен.

Deleted
()
Ответ на: комментарий от anonymous

Использовать старые добрые дивы никто не запрещает. А базовые элементы html/head/body как были так и остались.

Deleted
()
Ответ на: комментарий от Deleted

>Использовать старые добрые дивы никто не запрещает. А базовые элементы html/head/body как были так и остались.

Уговорили :) Перехожу на новый доктайп.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← [Отрисовка графиков] Помогите найти решение.
Web-development
django test database →