Jump to content
Sign in to follow this  
Chris

Problem with a general layout - css

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

Share this post


Link to post
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;}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...