центрирование дивов
есть небольшой блок - прямоугольник примерно 100x80px. на странице может быть несколько десятков таких блоков. для удобства блоки расположены по строкам. в одной строке может быть от 1 до 5 таких блоков. одна строка от другой никак не зависит.
каждый блок должен быть отцентрирован отнасительно своей части экрана.
кто ни будь понял?:D
попробуем иначе. чтобы было понятно возмем прстенкий пример
[HTML]<table style="border-collapse:collapse;padding:0;margin:0;width:100%;">
<tr>
<td style="text-align: center;"><img src="editing_foto/01.jpg" alt="блок 1"></td>
<td style="text-align: center;"><img src="editing_foto/02.jpg" alt="блок 2"></td>
<td style="text-align: center;"><img src="editing_foto/03.jpg" alt="блок 3"></td>
</tr>
</table>
[/HTML]
а так выглядит мой код
[HTML]<table style="border-collapse:collapse;padding:0;margin:0;width:100%;">
<tr>
<td style="padding: 2px 2px 0 2px; border: 1px #f00 solid;">
<div style="display: table-cell;width: 80px;padding: 4px 4px 0 4px;border: 1px solid #aaa;background-color: #eee;
text-align: center;cursor: pointer;" onClick="java script:wraitImg('100','01.jpg');return(false);">
<div style="display: block;width: 80px;height: 82px;padding:0;margin: 0 auto 0 auto;border:0;text-align: center;">
<img src="editing_foto/01.jpg" width="80" height="59" alt="01"></div>
<span>01</span>
</div>
</td>
<td style="padding: 2px 2px 0 2px;text-align:center;">
<div style="display: table-cell;width: 80px;padding: 4px 4px 0 4px;margin:0;border: 1px solid #aaa;background-color: #eee;
text-align: center;cursor: pointer;" onClick="java script:wraitImg('100','02.jpg');return(false);">
<div style="display: block;width: 80px;height: 82px;padding:0;margin:0 auto 0 auto;border:0;text-align: center;">
<img src="editing_foto/02.jpg" width="80" height="60" alt="02" style="padding-top:6px"></div>
<span>02</span>
</div>
</td>
<td style="padding: 2px 2px 0 2px;text-align:center;">
<div style="display: table-cell;width: 80px;padding: 4px 4px 0 4px;border: 1px solid #aaa;background-color: #eee;
text-align: center;cursor: pointer;" onClick="java script:wraitImg('100','03.jpg');return(false);">
<div style="display: block;width: 80px;height:82px;padding:0;margin:0 auto 0 auto;border:0;text-align: center;">
<img src="editing_foto/03.jpg" width="80" height="60" alt="03"></div>
<span>03</span>
</div>
</td>
<td style="padding: 2px 2px 0 2px;text-align:center;">
<div style="display: table-cell;width: 80px;padding: 4px 4px 0 4px;border: 1px solid #aaa;background-color: #eee;
text-align: center;cursor: pointer;" onClick="java script:wraitImg('72','04.jpg');return(false);">
<div style="display: block;width: 80px;height: 82px;padding:0;margin:0 auto 0 auto;border:0;text-align: center;">
<img src="editing_foto/04.jpg" width="57" height="80" alt="04"></div>
<span>04</span>
</div>
</td>
</tr>
</table>[/HTML]
я помойму уже все перепробовал, и [COLOR="DarkGreen"]text-align: center;[/COLOR] и [COLOR="#006400"]margin: 0 auto 0 auto;[/COLOR] и [COLOR="#006400"]padding: 0 auto 0 auto;[/COLOR]. незнаю что еще попробовать
посоветуйте, может есть другой способ
вроде все.
вроде больше помощь ненужна
[HTML]<table style="border-collapse:collapse;padding:0;margin:0;width:100%;">
<tr>
<td style="padding:2px;">
<div style="display:block;width:88px;border:1px solid #aaa;background-color:#eee;margin:0 auto 0 auto;text-align:center;cursor:pointer;"
onClick="java script:wraitImg('100','01.jpg');return(false);">
<div style="display:block;width:100%;height:82px;padding-top:6px;margin:0 auto 0 auto;border:0;text-align:center;">
<img src="editing_foto/01.jpg" width="80" height="59" alt="01" style="padding-top:11px;">
</div>
<span>01</span>
</div>
</td>
<td style="padding:2px;">
<div style="display:block;width:88px;border:1px solid #aaa;background-color:#eee;margin:0 auto 0 auto;text-align:center;cursor:pointer;"
onClick="java script:wraitImg('100','02.jpg');return(false);">
<div style="display:block;width:100%;height:82px;padding-top:6px;margin:0 auto 0 auto;border:0;text-align:center;">
<img src="editing_foto/02.jpg" width="80" height="60" alt="02" style="padding-top:10px;">
</div>
<span>02</span>
</div>
</td>
</tr>
</table>[/HTML]
остался только вопрос с кросбраузерностью
1. в style я записал все только для наглядности. у меня то все через классы
2. ты давно к акулитсу ходил? где ты увидел неуказанную размерность величин?
разве что здесь "[COLOR="DarkGreen"]padding:0;[/COLOR]", "[COLOR="DarkGreen"]margin:0 auto 0 auto;[/COLOR]", "[COLOR="#006400"]border:0;[/COLOR]" так тут она даром ненужда
2. У окулиста бываю регулярно. А вот тебе сходить стоит.
<img src="editing_foto/02.jpg" width="80" height="60" alt="02" style="padding-top:10px;">
2. У окулиста бываю регулярно. А вот тебе сходить стоит.
мдяя... так я и думал...
ты бы прежде чем вапить по пусту хоть бы проверилба эту срочку на волидность.
размерность величин у HTML атрибутов (таких как width, height) по умолчанию пиксель(px) и лиш когда нужны проценты ставят размерность величин тоесть знак процента(%)
%attrs; -- %coreattrs, %i18n, %events --
src %URI; #REQUIRED -- URI of image to embed --
alt %Text; #REQUIRED -- short description --
longdesc %URI; #IMPLIED -- link to long description
(complements alt) --
name CDATA #IMPLIED -- name of image for scripting --
height %Length; #IMPLIED -- override height --
width %Length; #IMPLIED -- override width --
usemap %URI; #IMPLIED -- use client-side image map --
ismap (ismap) #IMPLIED -- use server-side image map --
align %IAlign; #IMPLIED -- vertical or horizontal alignment --
border %Pixels; #IMPLIED -- link border width --
hspace %Pixels; #IMPLIED -- horizontal gutter --
vspace %Pixels; #IMPLIED -- vertical gutter --
>
ты бы прежде чем вапить по пусту хоть бы проверилба эту срочку на волидность.
Ты груб и глуп.
http://alekciy.ru/smails/kill_youself_about_wall.gif
вот и я туда же :) оффтоплю. всем peace :)
Свою собственную значимость поднимаю за счет других те, кто из себя ни чего не представляет. Для них это единственный способ еще как то тебя поднять.
Мне же это нафиг не нужно. Адекватный форумчанин просмотрев мои посты за энное количество дней составит некое мнение об уровне моего профессионализма. А неадекватному что ни говори у нег будет всегда его неадекватное мнение.
Так что в конечно итоге мне грубоко параллельно, что там про меня подумает тот или иной человек. Я есть таков каков есть. И моя личная внутренняя значимость ни как не коррелирует с уровнем мнения окружающих обо мне. Следовательно ни о каком вышении этого уровня извне быть речь не может.
А написал я потому что ТАК оформлять код нельзя. Мне все равно, хочется автору делать так, пусть хоть код в одну строку оформляет. Я просто указал на то, что в какой мещанине мало кому захочется разбираться, тем более бесплатно. Но видимо ему помощь совершенно не нужна, он и так самодостаточен.
А код нужно оформлять правильно НЕ потому что то красиво/не_красиво, а именно потому, что код оформленый по определенным общепринятым канона укоряет работу с ним для разных разработчиков. Собсвтенно имено поэтому сейчас и сложились общепринятие стили написаная кода, что это значительно укоряет понимание кода и работу над ним.
И это не просто досужие рассуждения. Подтвержение этому было найдено на практике в далеком уже 1975 и собственно с оригиналом этих исследований можешь ознакомиться по этой вот линке:
"EXPLORATORY EXPERIMENTS IN PROGRAMMER BEHAVIOR"
Поэтому не стоит смешивать мед с мухами, причины и следствия.
С остальным согласен.
В любом случае, спасибо за ответ и правильное понимание :)
С остальным согласен.
Ну так в чем тогда проблема? Если согласен, значит так же считаешь, что ТАК код оформлять нельзя. Так не все ли тогда равно, в какой форме об этом будет сообщено автору? Если тебе там что-то увиделось между строк, то это явно твои проблемы. Это уже к псилогам, почему тебе там увиделось так, а не иначе.
Кстати я еще посмотрю как ты сам будешь писать когда посидишь с мое на форуме. :rolleyes:
я высказал мнение - ты прокомментировал. при чем тут проблемы? зачем ты про психологов начал...
кажись до меня доперло на что так обижался alekciy
мой код:
[HTML]<img src="editing_foto/02.jpg" width="80" height="60" alt="02" style="padding-top:10px;">[/HTML]
а вот что хотел alekciy
[HTML]<img src="editing_foto/02.jpg" style="width:80px;height:60px;padding-top:10px;" alt="02">[/HTML]
или в идеале
[HTML]<style type="text/css">
img.foto_02 {width:80px;height:60px;padding-top:10px;}
</style>
<img src="editing_foto/02.jpg" class="foto_02" alt="02">[/HTML]
И вообще, html и css лучше показывать отдельно друг от друга.
кажись до меня доперло на что так обижался alekciy
Я? Обижался? гы гы гы :D
Я просто указал на ошибку в написании кода в надежде, что ты поймешь почему так писать не стоит. Но ты это принял на личный счет.
Очень рад, что ты все же разобрался. Здается мне код был перепущен через валидатор, а тот начала материться? ;)