sinan92 Posted April 28, 2011 Share Posted April 28, 2011 I made a basic website to see what I can while learning but I faced the following problemWhen I zoom in and out everything in the content movesAlso when I try to set the nav horizontal it does thatI actually want everything to zoom like h1 and the nav doesI wanted to make the content a little like this webhttp://85.214.211.61/This is my webhttp://85.214.211.61/test/index.xhtmlXhtml <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Sinan</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><h1>fly for hope</h1><div class="nav"><ul><li><a href="#home">Home</a></li><li><a href="#forums">Forums</a></li><li><a href="#contact">Contact</a></li><li><a href="#donate">Donate</a></li></ul></div><div class="content"><div class="left">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div><div class="right">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div><div class="rightbottom">My Div Class is right</div><div class="center">Hello World!</div><div class="centerbottom">I am centered</div></div></body></html> CSS: body{background-color:beige;line-height: 1.5;margin-left:25p%;margin-right:25%;}h1{position:relative;display:block;text-align: center;text-transform: uppercase;color:white;border:2px solid gray;background-color:black;width:900px;padding:10px;margin-left:auto;margin-right:auto;clear:both;overflow:auto;}div.content{border:1px solid;margin:5px;padding:5px;display:block;overflow:auto;}div.left,.right,.center,.rightbottom,.centerbottom{background-color:#CCFF99;}div.left{display:block;float:left;overflow:auto;border:1px solid;width:230px;height:500px;text-align:center;padding:10px;margin-left:auto;margin-right:auto;clear:both;}div.right{height:300px;float:right;overflow:auto;border:1px solid;width:230px;text-align:center;padding:10px;margin:auto;}div.rightbottom{height:100px;float:right;overflow:auto;border:1px solid;width:230px;text-align:center;padding:10px;margin-top:10px;margin-right:auto;clear:right;}div.center{float:center;border:1px solid;width:300px;text-align:center;margin:auto;padding:10px;}div.centerbottom{float:center;overflow:auto;border:1px solid;width:300px;text-align:center;margin-right:auto;margin-left:auto;margin-top:10px;margin-bottom:auto;padding:10px;}div.nav a:link,a:visited{display:block;text-decoration:none;width:120px;padding:4px;margin:0;background-color:#0000FF;color:white;border:3px outset #0000FF;}div.nav a:hover,a:active{text-decoration:none;width:120px;padding:4px;background-color:#000080;color:white;border:3px inset #000080;}div.nav ul{list-style-type:none;margin:5px;padding:0;display:inline;}div.nav li{overflow:auto;text-decoration:none;}div.nav{padding:0;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.