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.
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.
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.