darkofman Posted October 19, 2014 Share Posted October 19, 2014 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 More sharing options...
niche Posted October 19, 2014 Share Posted October 19, 2014 (edited) change menu width to pixels EDIT: use your developer tools Edited October 19, 2014 by niche 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 19, 2014 Share Posted October 19, 2014 DON'T use table for design layout. 1 Link to comment Share on other sites More sharing options...
niche Posted October 19, 2014 Share Posted October 19, 2014 dsonesuk is right. you should usually use float http://www.w3schools.com/cssref/pr_class_float.asp 1 Link to comment Share on other sites More sharing options...
darkofman Posted October 19, 2014 Author Share Posted October 19, 2014 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;} and .menu { width:960px;} so it takes all the width of the browser page, but didn't work I am a failure in the positioning :'( also 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 More sharing options...
darkofman Posted October 19, 2014 Author Share Posted October 19, 2014 maybe I should create evry part alone and leave positioning as the last part ? Link to comment Share on other sites More sharing options...
niche Posted October 19, 2014 Share Posted October 19, 2014 (edited) do this and see what happens: Then use your developer tools to decide what to do. .menu { width:1960px;} Edited October 19, 2014 by niche Link to comment Share on other sites More sharing options...
darkofman Posted October 19, 2014 Author Share Posted October 19, 2014 it worked , arigato gozaimasu <3 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 19, 2014 Share Posted October 19, 2014 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 More sharing options...
darkofman Posted October 19, 2014 Author Share Posted October 19, 2014 Ok sorry Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now