Jump to content
  • 0

Несколько вопросов..


SanyaSV
 Share

Question

Здравствуйте уважаемые форумчани...

Недавно начал заниматься вёрсткой и вот столкнулся сразу с несколькими вопросами...

1.Вопрос

Допустим я верстаю под ucoz...

Как сделать так что бы картинка контейнера сама растягивалась по высоте по мере заполнения самого контейнера, вот сама картинка

http://s16.radikal.ru/i190/1212/08/af6daa214cfd.jpg (P.S это для явного примера что бы поняли)

2.Впрос хотел очень бы узнать как верстать такие части как input..

Дело в том что их сверстать не так просто как мне казалось особенно scrol, надо заме нить его на картинку а потом ещё по мере его сделать что бы он сам расширялся..

В общем вот такие проблемы кто поможет буду очень благодарен, заранее большое спасибо. ;)

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Да рад бы помочь. Только вот вопросы больно уж кривые. Могу также криво ответить, но не думаю, что будет польза))

1. Картинку на бг блока и прорепитить по вертикали.

2. input scroll?? Не знаю такого. Если надо застаилить сам скролл - это джс.

Link to comment
Share on other sites

  • 0

Ну попробую объяснить более наглядно...

Допустим вот одна картинка

http://s16.radikal.ru/i190/1212/08/af6daa214cfd.jpg

о

Это контейнер

Как сделать так что бы картинка всегда была не меньше 1100px а если заполнять данный блок и заполнение будет больше чем 1100px она сама растягивалась тол по высоте...

Сам пробовал сделать так

.container {background:url(http://s16.radikal.ru/i190/1212/08/af6daa214cfd.jpg) no-repeat; width:129px; min-height:1100px; height:auto; background-size:cover;}

Не получается и расширяет ширину..

И у меня ещё один вопрос, допустим есть одна картинка одна идёт как фон, допустим фон модульного окна, в нее я располагаю ещё 2 картинки свойство margin-top для нижней картинки работает а для верхнее нет... не пойму почему

Пример кода

<div class="modal-box">
<div class="modal-title">Название модульного окна</div>
<div class="modal-bg">Тут будет текст</div>
</div>


.modal-box {background:url(сам фон) no-repeat; width:424px; height:197px; display:block;}
.modal-title {background:url(верхняя картинка титла) no-repeat; width:404px; height:44px; color:#ffffff; box-shadow:3px; -moz-box-shadow:3px; -webkit-box-shadow:3px; margin-left:10px; margin-top:10px;}
.modal-bg {background:url(под титлом картинка) no-repeat; width:404px; height:138px; color:#535353; margin-left:10px; margin-top:10px;}

Link to comment
Share on other sites

  • 0

А тебе не кто и не обязан. И так... Начнем с картинки. Посмотри на неё внимательно. Она одинаковая, ну т.е. возьмем маленький прямоугольник с высотой в 7 пикселей и шириной 100% нашей картинки вырежем и вот можно использовать как фон, задав повторение по вертикали. Но зачем вообще нужна тут картинка? есть блок центральный, дай ему тень а фону градиент. можно еще попробовать верстку с ушками, это когда у главного контента есть боковые части, тогда заливаем фон серо-синим цветом, как левая часть твоей картинки, основному блоку задаем тень, и ушкам задаем градиент от белого в прозрачный ну или же в сине-серый цвет. быстро и красивше... если нечего не понятно, то тупо вырежи прямоугольничек из твоей картинки как описал выше и юзай

background: #ddd url('namebg.png') repeat-y top left; 

Link to comment
Share on other sites

  • 0

А тебе не кто и не обязан. И так... Начнем с картинки. Посмотри на неё внимательно. Она одинаковая, ну т.е. возьмем маленький прямоугольник с высотой в 7 пикселей и шириной 100% нашей картинки вырежем и вот можно использовать как фон, задав повторение по вертикали. Но зачем вообще нужна тут картинка? есть блок центральный, дай ему тень а фону градиент. можно еще попробовать верстку с ушками, это когда у главного контента есть боковые части, тогда заливаем фон серо-синим цветом, как левая часть твоей картинки, основному блоку задаем тень, и ушкам задаем градиент от белого в прозрачный ну или же в сине-серый цвет. быстро и красивше... если нечего не понятно, то тупо вырежи прямоугольничек из твоей картинки как описал выше и юзай

background: #ddd url('namebg.png') repeat-y top left; 

Link to comment
Share on other sites

  • 0

Привет форумчане...

Не сможет ли кто мне помочь, вот с чем : в данном мной ниже коде, при его открывании из файла .htm не показываются русский шрифт, а полная белиберда.

<html>

<head>

<meta http-equiv="Content-Language" content="ru">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>%%TITLE%%</title>

</head>

<body bgcolor="#E5E5E5" style="font-family:Times New Roman; font-size: 10pt">

<div align="center">

<center>

<table border="1" width="700" cellspacing="0" cellpadding="9" bgcolor="#FFFFFF" bordercolor="#000000">

<tr>

<td width="100%">

<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font size="4" color="#000080"><b><u>%%TITLE%%</u></b></font><br><br>

<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">%%DESCRIPTION%%</p>

<table border="0" width="300" height="250" cellspacing="0" cellpadding="0">

<tr>

<td width="100%"><center>

</center>

</td>

</tr>

</table>

<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">Продолжение <a href="%%URL%%" target="_blank" rel="nofollow">Здесь...</a></p>

<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0"> </p>

<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0">%%KEYWORD%% То же:-</p>

%%LINKS%%

</td>

</tr>

</table>

</center>

</div>

</body>

</html>

Благодарю за вашу помощь

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy