Jump to content

Help me please


Recommended Posts

hey , I am still a noob in this so , I am trying to create a website just for learning, here is the sheet that I mad so far:

<!DOCTYPE html><html><head><title>Global Import</title> <link href="style.css" rel="stylesheet"> <meta charset="utf-8"></head><body><div class="menu"><div id="logo"></div><form class="search" method="get"><input id="searc" type="text" ><input type="submit" id="searchsubmit" value="" ></form><table id="menutable"><tr><td class="menutabs">Home</td><td class="menutabs">Products</td><td class="menutabs">Our company</td><td class="menutabs">Contact Us</td></tr></table><div id="thetab"></div></div><footer id="footer"></footer><script src="footer01.js"></script></body></html>
html {	background-color: white;	width: 1200px;	height: 980px;	max-width: 960px;	}#logo {    width:250px;	height:75px;	background-color:white;	position: relative;    left: 200px;	top:10px;}#searc {	border-color:#D8D8D8;	border-radius:100px;	background-color:#DDDCDC;	border-style:solid;	border-width:1.5px;	width:270px;	height:25px;	position:relative;	left:130px;	bottom:35px;	box-shadow: inset 1.5px 1.5px 1.5px; 	text-align:center;}#searchsubmit {	 background-image:url(images/Untitled-3.jpg);	 repeat:no-repeat; 	 width: 20px;	 height: 20px;	 border:none;	 position:relative;	 left:130px;	 bottom:32px;}.search {	position:relative;	left:1000px;	}.menutabs{	border-width:1px;	width:100px;	height:30px;	background-color:white;	font-family: Arial, Helvetica, sans-serif;	font-size: 15px;	text-align: center;	position:relative;	left:-35%;}.menutabs:hover {	background-color:#F7F27F;	box-shadow: inset 1.5px 1.5px 1.5px; 	}#footer{	position:relative;	bottom:1200px;}#menutable {	position:relative;	left:150px;}#thetab {	height: 50px;	background-color: #F7F27F;	box-shadow: inset 0px 1px 0px #888888;	width:100%;		}.menu {	width:100%;}
and this is how the site looks now
What I am trying to do is to have that yellow bar to be full width, also , I am trying to make the website 960 on width,also I am trying to get right of that scrool bar , I used max-width:960 on html but still didn't work
Link to comment
Share on other sites

change menu width to pixels




use your developer tools

Edited by niche
  • Like 1
Link to comment
Share on other sites

I tried with 960 pixels but still the yellow bar doesn't reach the max width,I am trying to make that bar to take all the browser page width,so I tried

html {max-width:960px;}


.menu {	width:960px;}

so it takes all the width of the browser page, but didn't work

I am a failure in the positioning :'(



about the table that I used in menu tabs , should I use instead of it the <ul><li> or divs or there is another way ?

I seriously tough I am ready to make a website rofl , thank you so much for the help guys

Link to comment
Share on other sites

do this and see what happens: Then use your developer tools to decide what to do.

.menu {	width:1960px;}
Edited by niche
Link to comment
Share on other sites

There needs to be a beginners do's and don'ts then we just point to that page, save us repeating ourselves time and time and time again.


1) do not use tables for design layout.

2) do not use positioning especially absolute, unless you really, really, really, really, really, really, really, really, really, really, really, really, really, really need to! that! cannot be done with float, margins, and padding.


position: relative; when used with left: property means its area covers the original position it came from + the area it now occupies width: 1000px; left: 500px; its width is now 1500px, and elements move around the area it once occupied.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...