Sirleon Posted July 25, 2008 Share Posted July 25, 2008 i have made a site in xhtml and external css..the layout and most of the site is on css.. but my problem is. when i resize the window. the whole page follows with it and end up as a big mess.i dont get scrollbars or anything.. and i dont know what too do too get it to stay as i want it!can anyone pls help me?heres my css codes:body {margin: 0;padding: 0;background-color: #7c695a;font: normal Courier New, Courier, monospace;}#ytrekant {margin: 0 auto;padding: 0;background-color: #7c695a;color: black;overflow: auto;}#headertop {position: relative;margin: 0 0 0 60px;border-top: 1px solid #7c695a;border-bottom: 1px solid #7c695a;height: 160px;min-weight: 1024px;background-image: url(tarot_banner.jpg);background-repeat: no-repeat;overflow: auto;}#main {position: relative;top: 0;left: 0;width: 100%;margin-top: 0;overflow: auto;}#content {margin: 0 298px 0 205px;border: 1px solid #ff0000;background-color: #605ca8;color: black;weigth: 734px;overflow: auto;}#meny {position: absolute;top: 0;left: 0;width: 145px;min-height: 420px;background-color: white;color: black;margin-left: 60px;padding: 0;overflow: auto;}#annonsebanner {position: absolute;top: 0;right: 112px;width: 145px;min-height: 420px;background-color: white;color: black;margin: 0 41px 0 0;padding: 0;overflow: auto;}#navban {border-top: 0px solid #ff0000;border-bottom: 1px solid #7c695a;margin: 0 153px 0 60px;height: 160px;background-color: #605ca8;color: black;overflow: auto;}#content .tarotbilde {float: right;margin: 0 30px 0 20px;}h3 {font-style: verdana;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18pt;}p {font-style: verdana;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;}Thanks! :)btw. my first css designed page..! Link to comment Share on other sites More sharing options...
Kingy Posted July 25, 2008 Share Posted July 25, 2008 Instead of having fixed dimensions like 60px in height for example, have you considered building them in percentages instead? Link to comment Share on other sites More sharing options...
Sirleon Posted July 25, 2008 Author Share Posted July 25, 2008 Instead of having fixed dimensions like 60px in height for example, have you considered building them in percentages instead?Yeah.. i have thought about it.. BUT.. i dont want the page too change from diffrent computers beucase of their resolutions on the comp.and that gonna happend if i change em too percentages..Thanks thou.. Link to comment Share on other sites More sharing options...
Synook Posted July 25, 2008 Share Posted July 25, 2008 and that gonna happend if i change em too percentages..Ems are relative units, just like percents.You could also try having full-width elements with margins on the sides. Or design for 960px in width, that is accepted as "wide enough" nowadays, and 960 has many factors. Link to comment Share on other sites More sharing options...
Kingy Posted July 25, 2008 Share Posted July 25, 2008 Ah good point Synook, Ems are related to widths used in typography, some quick info in case you're interested.http://en.wikipedia.org/wiki/Em_(typography)I won't discuss about it in detail but this kind of unit was used in classic printing. ^^ Link to comment Share on other sites More sharing options...
Sirleon Posted July 25, 2008 Author Share Posted July 25, 2008 Ems are relative units, just like percents.You could also try having full-width elements with margins on the sides. Or design for 960px in width, that is accepted as "wide enough" nowadays, and 960 has many factors.Wow.. everything worked out with em's! woohooo!! but hey! wait! doooohhh! found a new problem! everything is staying in its places now exept 1 thing!the header! when i minimize the window. the header get trunkated with the resize, and the rest of the page stays as i want it too with scrollers.. heres the css now:body {margin: 0;padding: 0;background-color: #7c695a;font: normal Courier New, Courier, monospace;}#ytrekant {margin: 0 auto;padding: 0;background-color: #7c695a;color: black;}#headertop {position: relative;margin: 0 0 0 3.7em;border-top: 1px solid #7c695a;border-bottom: 1px solid #7c695a;height: 10em;weight: 40em;background-image: url(tarot_banner.jpg);background-repeat: no-repeat;}#main {position: relative;top: 0;left: 0;width: 80em;margin-top: 0;}#content {margin: 0 18.6em 0 12.8em;border: 1px solid #ff0000;background-color: #605ca8;color: black;min-weigth: 73em;overflow: none;}#meny {position: absolute;top: 0;left: 0;width: 9.1em;min-height: 26.2em;background-color: white;color: black;margin-left: 3.7em;padding: 0;overflow: auto;}#annonsebanner {position: absolute;top: 0;right: 7em;width: 9em;min-height: 26.2em;background-color: white;color: black;margin: 0 2.6em 0 0;padding: 0;overflow: auto;}#navban {border-top: 0px solid #ff0000;border-bottom: 1px solid #7c695a;margin: 0 9.6em 0 3.7em;height: 8em;background-color: #605ca8;color: black;overflow: auto;}#content .tarotbilde {float: right;margin: 0 30px 0 20px;}h3 {font-style: verdana;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18pt;}p {font-style: verdana;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10pt;}So.. anyone see what it can be? Link to comment Share on other sites More sharing options...
Sirleon Posted July 28, 2008 Author Share Posted July 28, 2008 Wow.. everything worked out with em's! woohooo!! but hey! wait! doooohhh! found a new problem! everything is staying in its places now exept 1 thing!the header! when i minimize the window. the header get trunkated with the resize, and the rest of the page stays as i want it too with scrollers.. heres the css now:Anyone? i really need help too solve this.. Link to comment Share on other sites More sharing options...
Kingy Posted July 28, 2008 Share Posted July 28, 2008 Do you happen to have a link to the page you're working on?Plus out of curiosity what browser are you using? Link to comment Share on other sites More sharing options...
Sirleon Posted July 28, 2008 Author Share Posted July 28, 2008 Do you happen to have a link to the page you're working on?Plus out of curiosity what browser are you using?Hi.Just placed it out now.. adress is: www.css.leonheart.noIm using IE, Firefox and Safari. happends too all the browsers.. Link to comment Share on other sites More sharing options...
Kingy Posted July 28, 2008 Share Posted July 28, 2008 I tried it on IE, Opera and Safari (the one run off windows as I am not on my Mac at home), I can't seem to find any problems with it. As far as I can see everything works with each other, am I missing something here or am I misunderstanding something?Would it trouble you to maybe provide a screenshot of some kind perhaps? Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2008 Share Posted July 28, 2008 The page is way too wide, don't give it a width of 80em, use pixels for width instead. Like Synook said, try 960px of width. If not, give it a fixed margin on both sides, like maybe 100px margin on each side, and forget the width.And also, remove this from your #content id: margin: 0 18.6em 0 12.8em;It's adding a whole lot to the width. Link to comment Share on other sites More sharing options...
Sirleon Posted July 28, 2008 Author Share Posted July 28, 2008 the problem is the top banner. When i resize the browser.. the topbanner starts trunkating insted of standing still. so it gets smaler.heres the screenshot!: Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2008 Share Posted July 28, 2008 The problem with it is that it's not consistent with your content div. You have to fix your site first. The problems I told you about before are more serious than the header. Once they're solved it should be easier to spot the problem with the header.You have "position: relative" on a lot of elements that don't need it. You should remove them too. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.