dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with a general layout - css

  1. #1
    Join Date
    Jun 2010
    Posts
    44

    Problem with a general layout - css

    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!

    HTML Code:
    *{
        margin: 0px;
        padding: 0px;
    }
    body {
        margin-left: 0px;
        margin-top: 0px;
    }
    img {
        border: none;
    }
    #wrapper {
        
        margin-right: auto;
        margin-left: auto;
    	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:absolute;
    	float:left;
    	top:245px;
    	left:40px;
    	width:250px;
    	height:400px;
    	border: 1px solid #727272;
    }
    
    	.righttext {
    	position:absolute;
    	float:right;
    	top:245px;
    	right:40px;
    	width:250px;
    	height:400px;
    	border: 1px solid #727272;
    	}
    
    #center {
    	position:relative;
    	
    	top:60px;
    	left:344px;
    	width:800px;
    	height:700px;
    	border: 1px solid #727272;
    }
    
    
    	.meny {
    	position:relative;
    	font-family:Franklin Gothic Heavy, Arial;
    	left:465px;
        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:40px;
    					top:60px;
    					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;
    }

  2. #2
    Join Date
    Jun 2010
    Posts
    44
    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:

    HTML Code:
    *{
        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;
    }

  3. #3
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Hello Baxxter,
    For your .righttext not to overrun your #center, #wrapper's min-width should be more like 1350px or so.

    Have a look at a very simple 3 column layout that does not use positioning.

  4. #4
    Join Date
    Jun 2010
    Posts
    44
    Quote Originally Posted by Excavatorak View Post
    Hello Baxxter,
    For your .righttext not to overrun your #center, #wrapper's min-width should be more like 1350px or so.

    Have a look at a very simple 3 column layout that does not use positioning.
    Thank you, that fixed it! So it that a standard minimum for every browser and screens, for not the divs to go into each other?
    You are saying i can do this without positions?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles