Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Таблица из 3 рисунков на полный экран


Автор: fen0men 20.2.2008, 11:50
Помогите, пожалуйста! Можно ли сделать верстку следующим образом? Шапка состоит из рисунка. Его надо разделить на 3 части по вертикали(как бы три строки). А 2 часть в свою очередь нужно разделить на 3 части по горизонтали(на три столбца). Все это должно быть по всей странице(без полей). Как все это реализовать, чтобы работало на всех разрешениях??? А то у меня сложилось впечатление, что это не возможно! Я все перепробывал(по-моему), при моем разрешении нормально, на других то нормально, то полоса из пикселей вылезает, т.к. не правильно делится часть изображения. Вот, собственно код:
Код

<div style="width:100%;margin-bottom:0;padding:0;margin-top:0;">      
<table cellpadding="0" cellspacing="0" border="0" width="100%" valign="top">  
           
    <tr>
           <td width="100%" colspan="2">      
            
                <div style="width:100%;margin-bottom:0;padding:0;margin-top:0;">                                     
                    <img src="images/img/head_1.jpg" width="100%" align="left" vspace="0" hspace="0" border="0">    
                </div>     
                                                     
 
    <tr>
    
        <td width="25%" height="100%">   

            <div style="width:100%;height:100%;margin-bottom:0;padding:0;margin-top:0;">                                     
                <img src="images/img/head_2_1.jpg" width="100%" align="left" vspace="0" hspace="0" border="0">    
            </div>
            
        <td width="25%" height="100%">   

            <div style="width:100%;height:100%;margin-bottom:0;padding:0;margin-top:0;">                                     
                <img src="images/img/head_2_2.jpg" width="100%" border="0" align="left" vspace="0" hspace="0" border="0">    
            </div>

       <td width="50%" height="100%">   

            <div style="width:100%;height:100%;margin-bottom:0;padding:0;margin-top:0;">                                     
                <img src="images/img/head_2_3.jpg" width="100%" border="0" align="left" vspace="0" hspace="0" border="0">    
            </div>
            
            
     <tr>
           <td width="100%" colspan="3">      
            
                <div style="width:100%;margin-bottom:0;padding:0;margin-top:0;">                                     
                    <img src="images/img/head_3.jpg" width="100%" align="left" vspace="0" hspace="0" border="0">    
                </div>     
   
                                                     
</table>       
</div>    
 

Автор: bars80080 20.2.2008, 11:54
первый вопрос: зачем это?

зачем делите один рисунок на несколько частей? имхо: это зло

объясните чего хотите добиться

Автор: fen0men 20.2.2008, 14:43
Цитата(bars80080 @ 20.2.2008,  11:54)
первый вопрос: зачем это?

зачем делите один рисунок на несколько частей? имхо: это зло

объясните чего хотите добиться

Я хочу, JavaScriptom анимационное меню сделать на рисунке head_2_2.jpg в середине... И вообще хочу знать можно ли так делать или нет.

Автор: bars80080 20.2.2008, 14:56
мало понял,

но суть обычно такая: всё делается блочной вёрсткой слоями
допустим надо сделать меню на фоне рисунка
меню может представлять из себя таблицу или список, в котором будут происходить какие-то события

Код

<style>
#down { width: 800px; height: 200px; position: relative; }
#up { width: 400px; position: absolute; left: 200px; top: 50px; }
</style>
<div id="down">
<div id="up">
здесь некоторая html-разметка, может быть меню
</div>
</div>

свой рисунок вы можете смело загнать в качестве фона в #down { background: url(pict1.jpg); }
или положить обычным способом <img src="" /> если нужно
это совершенно не затронет блок #up, он как был поверху, так и останется

все объяснения http://htmlbook.ru/

Автор: fen0men 20.2.2008, 17:28
Цитата(bars80080 @ 20.2.2008,  14:56)
мало понял,

но суть обычно такая: всё делается блочной вёрсткой слоями
допустим надо сделать меню на фоне рисунка
меню может представлять из себя таблицу или список, в котором будут происходить какие-то события

Код

<style>
#down { width: 800px; height: 200px; position: relative; }
#up { width: 400px; position: absolute; left: 200px; top: 50px; }
</style>
<div id="down">
<div id="up">
здесь некоторая html-разметка, может быть меню
</div>
</div>

свой рисунок вы можете смело загнать в качестве фона в #down { background: url(pict1.jpg); }
или положить обычным способом <img src="" /> если нужно
это совершенно не затронет блок #up, он как был поверху, так и останется

все объяснения http://htmlbook.ru/

На рисунке - то что я хочу! А Вы действительно меня не правильно поняли... Div'ами тут не обойдешься, т.к. в разных браузерах они позиционируются по-разному(погрешность 1-4px). Т.е. мне надо чтобы JavaScriptom загорались пункты меню!

Автор: bars80080 20.2.2008, 18:32
различная позиционируемость в разных браузерах исключительно от неумения

во-первых, обнулите настройки по умолчанию:
* { margin: 0px; padding: 0px; border: 0px; }
затем выставляйте всё что нужно

если всё же в силу конструкции вам потребуется что-то сдвинуть в отдельном браузере, то есть фичи для этого
к примеру:
* html {} - понимает только ИЕ

и в конце концов, кто мешает вам в верхнем слое положить вашу таблицу так как вам хочется, рисунок в этом случае резать не придётся

я серьёзно говорю, вначале своей деятельности тоже страдал излишней нарезкой, но когда научился, то стало ясно, что ни один рисунок резать не надо (за исключением создания гибких рамок)

Автор: ilyaILF 20.2.2008, 19:05
На счет обнуления стандартных отступов различных элементов интернет-странички, которые к тому же в разных броузерах разные полностью соглавен с bars80080. Но подобное обнуление: * { margin: 0px; padding: 0px; border: 0px; } слишком глобальное, к примеру при таких заданных параметрах кнопку формы 
Код

<input type="button" value="кнопка" />
Вообще не будет видно, у нее не будет границы и ее не отличишь от обычного текста.
Есть так называемый универсальный обнулятель Эрика Мейера http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 

Автор: fen0men 21.2.2008, 10:00
Цитата(bars80080 @ 20.2.2008,  18:32)
различная позиционируемость в разных браузерах исключительно от неумения

во-первых, обнулите настройки по умолчанию:
* { margin: 0px; padding: 0px; border: 0px; }
затем выставляйте всё что нужно

если всё же в силу конструкции вам потребуется что-то сдвинуть в отдельном браузере, то есть фичи для этого
к примеру:
* html {} - понимает только ИЕ

и в конце концов, кто мешает вам в верхнем слое положить вашу таблицу так как вам хочется, рисунок в этом случае резать не придётся

я серьёзно говорю, вначале своей деятельности тоже страдал излишней нарезкой, но когда научился, то стало ясно, что ни один рисунок резать не надо (за исключением создания гибких рамок)

Блин, ты же в пикселах пишешь размеры, а я хочу, чтобы по ширине экрана было... Понимаешь. А если в процентах писать, то как раз позиционирование отличается в браузерах.

Автор: bars80080 21.2.2008, 10:13
ilyaILF, с бордером возможно перестарался, но обычно в этом случае кнопку рисуешь под себя. никто не мешает задать input.button как угодно (если не нужен специфический дефолтный для каждого браузера рисунок)


fen0men, правьте в процентах, задача абсолютно не меняется
флаг вам в руки

Автор: fen0men 21.2.2008, 11:24
Цитата(bars80080 @ 21.2.2008,  10:13)
ilyaILF, с бордером возможно перестарался, но обычно в этом случае кнопку рисуешь под себя. никто не мешает задать input.button как угодно (если не нужен специфический дефолтный для каждого браузера рисунок)


fen0men, правьте в процентах, задача абсолютно не меняется
флаг вам в руки

Неа, невозможно. Я все-таки пришел к такому выводу, что нельзя наложить маленькую картинку div'ом на другой рисунок, чтобы точно совпадало!
Код

<div style="width:100%;margin:0;padding:0;border: 0px;">      
<table cellpadding="0" cellspacing="0" border="0" width="100%" valign="top">  
           
    <tr>
           <td width="100%" colspan="3">      
            
                <div style="margin: 0px; padding: 0px; border: 0px;">                                     
                    <img src="images/img/Graphic13.jpg" width="100%" align="left" vspace="0" hspace="0" border="0">    
                </div>     
                                                     
</table>
</div>

<div style="position:absolute;top:37.7%;left:19.4%;width:10%;z-index:0;margin: 0px; padding: 0px; border: 0px;">                                     
    <img src="images/img/head_facilities.jpg" width="100%" border="0" align="left" vspace="0" hspace="0" border="0" style="margin: 0px; padding: 0px; border: 0px;">
</div>

Автор: ilyaILF 21.2.2008, 11:32
А вы попробуйте абстрагироваться от контента, и сделайте все background-ами, расставлять здесь везде <img /> не имеет смысла, это только все усложняет.
И остается несколько непонятной ваша фраза "разделить на 3 части по горизонтали(на три столбца). "

Автор: fen0men 21.2.2008, 11:40
А рисунок качните, если не трудно, там наглядно все. Тогда с background'ом вопрос: как рисунок внутри уменьшить? 

Автор: ilyaILF 21.2.2008, 12:28
PSD пожалуйста в студию. Можно сделать и на таблицах и на дивах. И комментарии - у вас будет при увеличении разрешения деформироваться-растягиваться дизайн, обычно так не делается, но можно.
background конечно же никак не увеличивается и никак не уменьшается, background отображает картинку как таковую.

Автор: bars80080 21.2.2008, 12:33
растягивающаяся фоновая картинка?

но это же совершенно некрасиво (имхо моё мнение)
возможно гораздо лучше сделать фиксированную картинку фоном, а задний фон залить тем же цветом что и края этой картинки
смотреться лучше будет

имхо

Автор: fen0men 21.2.2008, 14:39
Вы не о том говорите совершенно! Какой background, если мне надо чтобы картинка на всю ширину была!

Автор: ilyaILF 21.2.2008, 16:00
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
html, body {margin: 0px; padding: 0px;}
div, img {margin: 0px; padding: 0px; border: 0px none;}
img {width: 100%; display: block;}
.first_level {height: 300px;}
.two_level {width: 100%; float: left; height: 100px;}
.two_level .centercolumn {margin: 0% 30% 0% 20%; height: 100px;}
.leftcolumn {float: left; width: 20%; height: 100px; margin: 0% 0% 0% -100%;}
.rightcolumn {float: left; width: 30%; height: 100px; margin: 0% 0% 0% -30%;}
.tree_level {height: 50px;}
.first_level IMG {background: black;}
.centercolumn IMG {background: red;}
.rightcolumn IMG {background: blue;}
.leftcolumn IMG {background: green;}
.tree_level IMG {background: pink;}
.cleaner {clear: both; height: 1px; overflow: hidden; margin: 0px 0px -1px 0px; font-size: 1px; line-height: 1px; padding: 0px 0px 0px 0px;}
</style>
</head>
<body>
<div class="container">
    <div class="first_level">
        <img src="#" height="300" />
    </div>
    <div class="two_level">
        <div class="centercolumn">
            <img src="#" height="100" />
        </div>
    </div>
    <div class="leftcolumn">
        <img src="#" height="100" />
    </div>
    <div class="rightcolumn">
        <img src="#" height="100" />
    </div>
    <div class="cleaner"></div>
    <div class="tree_level">
        <img src="#" height="50" />
    </div>
</div>
</body>
</html>
Далее я думаю не составит труда проставить соответствующие размеры по высоте картинок и разрезать сам рисунок по ширине в процентных пропорциях.
При этом ни один пиксель "настроечных" бэкгроундов не должен будет виден.

Автор: fen0men 22.2.2008, 12:54
Цитата(ilyaILF @ 21.2.2008,  16:00)
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
html, body {margin: 0px; padding: 0px;}
div, img {margin: 0px; padding: 0px; border: 0px none;}
img {width: 100%; display: block;}
.first_level {height: 300px;}
.two_level {width: 100%; float: left; height: 100px;}
.two_level .centercolumn {margin: 0% 30% 0% 20%; height: 100px;}
.leftcolumn {float: left; width: 20%; height: 100px; margin: 0% 0% 0% -100%;}
.rightcolumn {float: left; width: 30%; height: 100px; margin: 0% 0% 0% -30%;}
.tree_level {height: 50px;}
.first_level IMG {background: black;}
.centercolumn IMG {background: red;}
.rightcolumn IMG {background: blue;}
.leftcolumn IMG {background: green;}
.tree_level IMG {background: pink;}
.cleaner {clear: both; height: 1px; overflow: hidden; margin: 0px 0px -1px 0px; font-size: 1px; line-height: 1px; padding: 0px 0px 0px 0px;}
</style>
</head>
<body>
<div class="container">
    <div class="first_level">
        <img src="#" height="300" />
    </div>
    <div class="two_level">
        <div class="centercolumn">
            <img src="#" height="100" />
        </div>
    </div>
    <div class="leftcolumn">
        <img src="#" height="100" />
    </div>
    <div class="rightcolumn">
        <img src="#" height="100" />
    </div>
    <div class="cleaner"></div>
    <div class="tree_level">
        <img src="#" height="50" />
    </div>
</div>
</body>
</html>
Далее я думаю не составит труда проставить соответствующие размеры по высоте картинок и разрезать сам рисунок по ширине в процентных пропорциях.
При этом ни один пиксель "настроечных" бэкгроундов не должен будет виден.

Спасибо большущее!!!

Автор: zaitsman 22.2.2008, 13:37
Можно через map сделать, не мучаясь с нарезкой, хотя, конечно, это потяжелее будет с т.з. создания анимации.

Автор: fen0men 22.2.2008, 14:05
Цитата
При этом ни один пиксель "настроечных" бэкгроундов не должен будет виден.


А почему не будет виден, из-за каких свойств? Можешь объяснить? 

Автор: ilyaILF 22.2.2008, 15:13
Вы же писали, что 
Цитата

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

Автор: fen0men 22.2.2008, 15:34
Цитата(ilyaILF @ 22.2.2008,  15:13)
Вы же писали, что 
Цитата

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

Нет, это все понятно. Я имею в виду с почему он их так отображает ("правильно"). С помощью чего Вы этого добились? (margin или div'ами как-то)...

Автор: ilyaILF 22.2.2008, 15:44
Теперь я уже не совсем вас понимаю... Я взял вот это http://www.dynamicdrive.com/style/layouts/category/C10/ и объеденил его с этим http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ .

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)