html - Changing one item from float to fixed positioning, CSS -
i designing basic website , wanting change how navigation bar on left hand side acts, want remain want have fixed positioning can scroll remaining there.
my question is, there anyway of changing it's position fixed without moving around , messing work in getting else positioned correctly, link image of website , included html , css.
as question, can tell me why website looks different when run html through different browsers, using google chrome. thought using px values got rid of problem.
edit 2
here screenshots different browsers on 2 different screens. webpage designed google chrome on laptop has resolution of 1600x900. computer comparing has resolution of 1440x900. adjustments window cause problems, never aginwill zoom. link goes gallery 8 images. http://postimg.org/gallery/908tlytw/
html code
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso10646"/> <meta http-equiv="content-language" content="en-gb"/> <meta name="author" content="###########"/> <meta name="designer" content="##########"/> <meta name="description" content="the official website of ##########, promoting humanist services."/> <!--<meta name="keywords" content="##########, humanist"/>--> <meta name="language" content="english"/> <meta name="robots" content="index, follow"/> <meta name="googlebot" content="index, follow"/> <link type="text/css" rel="stylesheet" href="stylesheet lego.css"/> <title>home page</title> </head> <body> <div id="page"> <div class="toparea"> <img src="client's logo.png" id="logo"/> <h1 id="title">significant ceremonies ##########</h1> <ul> <li>tel: ############</li> <li>e-mail: #######################</li> </ul> </div> <div class="sidearea"> <ul> <li><a href="">home</a></li> <li><a href="">about me</a></li> <li><a href="">humanism</a></li> <li><a href="">planning</a></li> <li><a href="">specialist areas</a></li> <li><a href="">testimonials</a></li> <li><a href="">contact me</a></li> </ul> </div> <div class="mainarea"> <h2 id="subtitle">home</h2> <p>"i rather live life based on honesty, compassion , humanity through own free instead of coming fear of divine beings." - ###########</p> <p>welcome web site, here can find information services perform , humanism itself. please feel free navigate around site , if have questions can either contact me directly or use form on 'contact me' page.</p> </div> <div class="bottomarea"> <ul> <li>tel: ############</li> <li>e-mail: #######################</li> </ul> <img src="bha logo.jpg" id="bhalogo"/> </div> </div> </body> </html> css code
body { background-color: #cccccc; } #page { position: absolute; left: 25%; height: 100%; width: 800px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: #e6f5e6; font-family: vijaya, sakkal majalla, narkisim, monotype corsiva, jasmineupc, gabriola, french script mt, footlight mt light, calisto mt, papyrus; } .toparea { float: left; width: 800px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #logo { float: left; width: 200px; height: 220px; margin-top: 10px; margin-right: auto; margin-bottom: 0; margin-left: 10px; } #title { float: left; width: 250px; height: 160px; margin-top: 70px; margin-right: auto; margin-bottom: 0; margin-left: 80px; text-align: center; font-size: 32px; color: #002e00; } .toparea ul { float: left; width: 180px; height: 220px; margin-top: 10px; margin-right: auto; margin-bottom: 0; margin-left: 40px; list-style: none; } .sidearea { clear: both; float: left; width: 200px; margin-top: 60px; margin-right: auto; margin-bottom: 10px; margin-left: auto; } .sidearea ul { list-style-type: none; } .sidearea ul li { margin-top: 0; margin-right: 20px; margin-bottom: 10px; margin-left: 0; text-align: center; border-style: solid; border-radius: 5px 5px 5px 5px; background-color: #4db84d; border-color: #002e00; font-size: 25px; } .sidearea ul li { text-decoration: none; color: black; } #subtitle { color: #002e00; } .mainarea { float: left; width: 560px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: 20px; padding-right: 10px; padding-left: 10px; /*background-color: #eef8ee;*/ } .bottomarea { clear: both; float: left; width: 800px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .bottomarea ul { position: fixed; bottom: 0; left: 360px; width: 610px; margin-top: 0; margin-right: auto; margin-bottom: 10px; margin-left: 10px; list-style-type: none; } #bhalogo { position: fixed; right: 388px; bottom: 0; width: 150px; height: 100px; margin-top: 0; margin-right: 10px; margin-bottom: 10px; margin-left: auto; }
if understand correctly want 'float' menu on left without making many changes html. can adding div has the same style .sidearea (width, height, etc) otherwise has no content, placeholder, , change style .sidearea position:fixed.
the different browser issue more subtle: depends on custom font availability, default css browser uses, etc. fixed looking @ differences issue issue.
Comments
Post a Comment