Jump to content

Website ok on all displays?


eduard

Recommended Posts

My display at work is 1680px wide. The design does not look good. The elements on the left and right sides are too far away from the content area. If you cannot fill most of the screen, try using a container div in the center that is around 1000px wide. Put everything in that.

Link to comment
Share on other sites

My display at work is 1680px wide. The design does not look good. The elements on the left and right sides are too far away from the content area. If you cannot fill most of the screen, try using a container div in the center that is around 1000px wide. Put everything in that.
Like this?: <!DOCTYPE html><html><head><!-- saved from url=(0022)http://internet.e-mail --><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Eduard Lid</title> <link rel="stylesheet" type="text/css" href="ex1.css"><link rel="stylesheet" href="panning-slideshow.css"><link rel="stylesheet" href="bsa.css" type="text/css" media="screen"><script src="jquery-latest.js"></script><script src="jquery_002.js"></script><script src="jquery.js"></script><script src="image-rotator.js"></script><script src="bsa.js" async="" type="text/javascript"></script><script async="async" src="s_3a3793f622db4a9dea3bfa355c5b2441.js" id="_bsap_js_3a3793f622db4a9dea3bfa355c5b2441" type="text/javascript"></script><style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}.style1{color: #00FF00;}.style2{text-align: center;}.style3{color: #000000;font-size: large;}.style4{color: #00FF00;font-size: xx-large;}</style></head> <body><div class="style2"> <br class="style1"><br class="style1"><h1> <span class="style4" lang="en-gb">EduardLid Web Design</span></h1><br class="style1"> <div id="container"><br></div><div id="window"><ul style="top: -350px; left: -960px;" id="slideshow"><li class="box1"><img src="tiger.jpg" alt="Tiger"></li><li class="box2"><img src="macaw.jpg" alt="Macaw"></li><li class="box3"><img src="bald-eagle.jpg" alt="Bald Eagle"></li><li class="box4"><img src="panda.jpg" alt="Panda"></li></ul></div> </div> <div id="bottom"> <ul class="links"> <li><a href="american.html">More</a></li><li><a href="spanish.html">Más</a></li><li><a href="portfolio.html">Portfolio</a></li></ul> <p id="copyright">Copyright © 2013</p> <a href="http://ar.linkedin.com/in/eduardlid"> <img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" width="120" height="33" border="0" alt="Ver el perfil de Eduard Lid en LinkedIn"</image>* </a> </div></div></body></html> * { margin:0; padding:0; list-style-type:none;} body{ font: bold 15px arial,geneva,SunSans-Regular,sans-serif; background-color:#000000;} #container {width:1000px;} .links { float:left; padding:10px 0 0 100px; font-size:12px;}.links li { margin-bottom:5px;}.links a { color:#FFFFFFF;}.links a:hover { color:#696969;} #copyright { top:40px; float:right; font-size:10px; color:#FFFFFF;} #rot {margin-top:5%;transform:rotate(-30deg);-ms-transform:rotate(-30deg); /* IE 9 */-moz-transform:rotate(-30deg); /* Firefox */-webkit-transform:rotate(-30deg); /* Safari and Chrome */-o-transform:rotate(-30deg); /* Opera */} Edited by eduardlid
Link to comment
Share on other sites

No. The kind of container I mean contains everything. An outline of your page would be this:

<!DOCTYPE html><html>   <head>	  <!-- stuff -->   </head>   <body>	  <div id="container">		 <!-- stuff -->		 <!-- stuff -->		 <!-- stuff -->	  </div   </body></html>

Edited by Deirdre's Dad
Link to comment
Share on other sites

No. The kind of container I mean contains everything. An outline of your page would be this:
<!DOCTYPE html><html>   <head>	  <!-- stuff -->   </head>   <body>	  <div id="container">		 <!-- stuff -->		 <!-- stuff -->		 <!-- stuff -->	  </div   </body></html>

Thanks!Is it now ok?
Link to comment
Share on other sites

When I looked before, site50 looked the same. It's better now, but I think you should center #container.
Many thanks!
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...