Jump to content

Problem with a general layout - css


Chris

Recommended Posts

Hello, I need help with something i think is quite easy to solve maybe for the real experianced ones. I am a webeditor, but still not professional, and experianced with all sort of css layouts etc. So it about this site: http://mbdbygg.zxq.net/ . I have never maked a background/layout like this before, and am considering some other way to achive how i want it, but i guess i wont need to do it all over. So look at the site: http://mbdbygg.zxq.net/. When you open it in a normal fullscreen window it looks ok, and that is how it is suppose to look. When one minimize the window you can see that the pictures i nthe middle all moves outside the layout to the right on a white surface outside the wrapper! So does the links aswell. And the the "righttext" div moves to the left one. So what do i need to do for it not beeing like this. The divs - header, content, and footer are supposed to be fixed. Meaning there should be repeating the content and the foot and header, and not be pressed to the left like that. What do i need to do? I attach the css file as well. Thanks for any help!

style.css

Link to comment
Share on other sites

Try in your css:
#wrapper {min-width: 1060px;}

This ensures that if the browser window is too small to display the content without scrolling, the content will still display normally as it would full-width (which happens to be 1060 pixels in your case)

Ok i atleast fixed the divs header, content and footer to stay put(i removed the margin-autos aswell and put only min-width: 1060px;). I also put a position relative on the side-textboxes. BUt the meny links and the pictures in the middle still go out of place. The meny goes many steps down when minimizing the window, and the pcitures goes INTO the right box, moving to the right with other words. What else i need to do? i attach the css code again as it is now:
*{    margin: 0px;    padding: 0px;}body {    margin-left: 0px;    margin-top: 0px;}img {    border: none;}#wrapper {    min-width: 1060px;   border: 1px solid #727272;}#header {    height: 180px;background-color:#FFFFFF;background-repeat:repeat-x;border: 1px solid #727272;background-image:url(mbdbygg.gif);background-position:center;background-repeat:no-repeat;}  #content { height: 800px;background-color:#605a5a;background-repeat:repeat-x;border: 1px solid #727272;}.lefttext {position:relative;float:left;top:65px;left:40px;width:250px;height:400px;border: 1px solid #727272;}.righttext {position:relative;float:right;top:65px;right:40px;width:250px;height:400px;border: 1px solid #727272;}#center {position:relative;top:60px;left:300px;width:750px;height:700px;border: 1px solid #727272;}.meny {position:relative;font-family:Franklin Gothic Heavy, Arial;left:155px;    top:12px;float:left;border: 1px solid #727272;}.meny li{  display:inline;  margin: 1px; }.meny ul li a{    text-decoration: underline;     color:#FFFFFF;   }     .bilder {	 position:relative;	 float:left;	 left:10px;	 top:-210px;	 border: 1px solid #727272;    }	 .bilder img{	  display: inline;	  border: 1px solid #4B678D;	  }       .thumbnail {    width:165px;    height:125px;    margin:5px;    border: 1px solid #4B678D;    }#footer {background-color:#FFFFFF;background-repeat:repeat-x;border: 1px solid #727272;margin:0 auto;    height: 60px;    clear: both;}div#footer p {font-size:0.6em;font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;margin:0;padding:5px;}

Link to comment
Share on other sites

try setting a width for the header, menu, content since i notice there isnt any at all

Link to comment
Share on other sites

try setting a width for the header, menu, content since i notice there isnt any at all
No it does not go to do with that. You appernatly cant help me. But would you know any web templates that look like this. With a header, middle content and footer stretch to the sides?
Link to comment
Share on other sites

No it does not go to do with that. You appernatly cant help me. But would you know any web templates that look like this. With a header, middle content and footer stretch to the sides?
well it never happen to me when i create a website, i can recreate the layout for you and email it to you if you wish
Link to comment
Share on other sites

well it never happen to me when i create a website, i can recreate the layout for you and email it to you if you wish
Why would you do that :D ? If you really are, then i hope you understand what my problem is. The layout problem in general(i think?) is fixed, since header, content(middle div) and footer dont stop at the right as it did before when minimizing a window. The problem now is only the pictures you see in the middle that goes to into the right - to the right box when minimizing, and the meny goes down. You going to recreate from the css file and the site i suppose if you are? Honestly though, a wild guess is that its about something small and quick for this to be fixed :P. Edited by Chris
Link to comment
Share on other sites

it isnt the css, its the html, looking at your source code its kinda outta place "to me"

Link to comment
Share on other sites

well i have your source code in dreamweaver atm, and i move the meny div below the header div and when i mininize the browser it remain where it should be, im still trying to fix the part where your images are once i do ill give you the code so you can recode it

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...