Jump to content
  • 0

Вопросы по резиновому дизайну.

Raiden-=DM=-

Asked by Raiden-=DM=-,

 Share

Question

Raiden-=DM=- Explorer

Raiden-=DM=-

Posted
Posted

Народ, просьба только камнями в меня за ньюбство не бросать :lol:

Вопросы в следующем:

1. При задании для дива в ксс-е свойства width:100% и height:100% ширина в 100% работает хорошо, а вот с высотой проблемы. Тоесть сей див не растягивается на всю высоту экрана браузера. Это как-то можно вылечить или нет?

2. В заголовке есть 2 картинки, одна слева, вторая справа. реализовано это так:

<div id="header">
	<div id="left">
	<img src="img/Header3.jpg" width="400" height="110" align="left" />
	</div>
	<div id="right">
	<img src="img/header2.jpg" width="138" height="110" align="right" />
	</div>   
</div>

CSS к ним: 

#header{ width:100%; min-width:560px; display:block; background-color:#2255b1}
#left {width:60%; float:left;}
#right {width:30%; float:right;}

Вопрос в следующем: можно ли как-то реализовать, чтоб при изменении разрешении экрана или размера окна браузера изменялся размер картинки? При этом хотелось бы, конечно, чтоб он изменялся только "вниз", хотя, если он будет и увеличиваться тоже, с ухудшением качества я смирюсь (в разумных пределах, конечно же). Только через JS? Если да, плиз подскажите как именно...

Заранее всем спасибо.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
хм... Так у меня див с высотой 100% является первым, само собой. Или мне что, необходимо и для BODY тоже задавать height???? Сорри, если проявляю редкую тупизну...

да

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
По поводу 100% высоты - Justnewone и psywalker - огромное человеческое спасибо.

А вот всё-таки по поводу изменения размера картинки вслед за изменением окна браузера?

размеры в процентах.

Link to comment
Share on other sites
  • 0
Raiden-=DM=- Explorer

Raiden-=DM=-

Posted
  • Author
Posted
размеры в процентах.

А где размеры в процентах то для них задавать? Если задавать в самом теге img, то тогда картинка масштабируется от своего исходного размера (от размера файла в смысле). Может эту картинку можно как-то запихнуть в див, как бэкграунд, но чтоб он масштабировался вместе с резиновым дивом?

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
А где размеры в процентах то для них задавать? Если задавать в самом теге img, то тогда картинка масштабируется от своего исходного размера (от размера файла в смысле). Может эту картинку можно как-то запихнуть в див, как бэкграунд, но чтоб он масштабировался вместе с резиновым дивом?

Я чет не понимаю. Вам же надо было масштабировать????

Пока с бекграундом ниче не выйдет.

Link to comment
Share on other sites
  • 0
Raiden-=DM=- Explorer

Raiden-=DM=-

Posted
  • Author
Posted
Я чет не понимаю. Вам же надо было масштабировать????

Пока с бекграундом ниче не выйдет.

Мне необходимо, чтоб размер изображений изменялся вслед за изменением размера окна. До этого изображение лежит в резиновом диве. Так вот теперь вопрос. Если задано изображение следующим образом:

<img src="img/Header3.jpg" width="50%" height="20%" align="left" />

, то откуда будет браться размер в процентах тогда??? ОТ размера файла? От родительского дива? Или от размера экрана?...

PS Чувствую себя тупым, как Буратино :)

Всё. спасибо, кажется таки сам понял - размер идет от родительского элемента. Поэтому указал только высоту в %, т.к. она лимитирующа и всё получилось. Спасибо всем за помощь и терпение :lol:

Link to comment
Share on other sites
  • 0
Игорь Ермаков Explorer

Игорь Ермаков

Posted
Posted

Постарайтесь разобраться с механизмом наследования.

Ваша задача решается очень просто.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>

<div id="contaner">
Этот блок тянется на всю высоту.
</div>

</body>
</html>

html{height:100%}
body{height:100%}
#contaner{height:100%;
background:#424242;color:#fff;margin:15px}

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
Go to question listing
×
×
  • 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

  I accept