1 reply [Last post]
AlexXLX
AlexXLX's picture
Offline
newbie
Romania
Last seen: 6 years 26 weeks ago
Romania
Timezone: GMT+2
Joined: 2014-02-03
Posts: 1
Points: 2

I am new to web design and can't get it to work. When I mean resizing, I mean a menu that will keep the 100% width without increasing too much in hight as I zoom in. Its hard for me to explain, but check how I did it on my website.

My Site

You will see the menu and 2 pictures. Notice that when you zoom in or out, the wide picture keeps it's size, always displaying at 100% of the width. The second picture gets smaller and bigger as you zoom in and out, but if you zoom in too much it starts resizing to 100% so I dont get a horizontal scroll bar.

The horizontal menu behaves like the second picture, getting bigger and smaller, and that's not exactly what I want. Sorry if I am writing too much, but dont quite know how to explain.

Anyway, here is the code for the wide pic:

html: <div class="container"><img src="head.jpg" /></div><br/>

CSS:

.container {width: 100%; overflow: hidden; }

.container img { width: 100%;}
This is enough to make the picture behave as I want. I should say that when it comes to the horizontal menu, I made a short one in the left side and then put it in a div that streches 100% since I didn't know how to make the menu strech while keeping the tabs on the left.

here is all the code for the menu (its not much):

HTML:

 <div id="menu">
 
<ul>
 
<li><a href="#">Home</a></li>
 
<li><a href="#">News</a></li>
 
<li><a href="#">Reviews</a></li>
 
<li><a href="#">Videos</a></li>
 
</ul>
 
</div>

CSS:

* {margin: 0; padding: 0;}
 
ul { display: table; }
 
ul li { float: left; list-style-type: none; }
 
ul li a { background: #444444; color: white; display: block; font-family: Arial, Helvetica, sans-serif; padding: 10px 20px; text-decoration: none; }
 
ul li a:hover { background: red; }
 
#menu { width: 100%; height: auto; background-color: #444444; }

If someone can help me I would appreciate it.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 34 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

What Your Trying to Do

What your trying to do is create a responsive website. But you have to have media queries to do it correctly. You can fudge around quite a bit without putting them in. But if you wan't to effectively control the page with a decreasing width. You have to use them. Research HTML5 and responsive design.