I’m using frames. My logo frame contains 2 pictures. One is 150px and other 600px making the whole logo size of 750px. Now, when user is making the window smaller than whole number then my second picture is being scrolled down without ability to see the picture.
The easiest possible way would be to connect 2 pictures into one 750px one, but is there a way to avoid this?
All I have as a code on my logo frame is…
<body class="logo_background">
<img src="assets/logo.png">
<img src="assets/logo_name.png">
</body>
my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>
<frameset rows="80px,100%" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="logo.html" name="logo" scrolling="no">
<frameset rows="*" cols="150,100%">
<frame src="menu.html" name="menu" scrolling="no">
<frame src="main_page.html" name="page" scrolling="no">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
use min-width on the container of the images to 750px.It’ll solve the problem.. and i agree with @elclanrs .. use div’s to achieve this.. frames might not be the best way..
Now,the container will have 760px no matter what size the window takes,so your pictures dont lose their location — dont go out of view , you can still scroll right to see the logo’s – both of them.. 🙂
Here’s a fiddle for your problem — http://jsfiddle.net/mvivekc/h4gVe/