Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    126
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Small CSS (div) problem, i think..

    Could anyone experienced with css layouts and using <div id= tags take a look at this,

    image is attached for better explanation

    I have a menu in the navigation that drops down using css and js, but whenever it drops down to display its sub links it also drags the content box down with it. a screenshot is attached to show you what i mean.

    'm guessing the #content is inside the navigation divs somewhere but i cant seem to work it out. here is the code for that page and the required css..

    Code:
    <div id="wrapper">
    	<br />
    	<div id="date">
    		<script language="JavaScript" type="text/javascript"><!--
    		document.writeln('&nbsp;' +dayStr+ ''); // --></script>
    	</div>
    	<div id="map">Home</div>
    	<div id="navigation">
    		<div class="buttonscontainer">
    			<div class="buttons">
    				<!--#include virtual="includes/navigation.ssi" -->
    			</div>
    		</div>
    	</div>
    	<div class="body">
    		<div id="content">
    		  <p>content goes here.........</p>
    		</div>
    		<div id="footer"><!--#include virtual="includes/footer.ssi" --></div>
    	</div>
    </div>
    here is the full css for reference

    Code:
    /* Main website styling */
    body {
    	margin-top: 5px;
    	margin-bottom: 5px;
    	font: 12px Verdana;
    	color: #333333;
    	background: #e7e6e6 url('images/background.jpg') no-repeat fixed right;  
    }
    
    #wrapper {
    	background: #FFFFFF;
    	height: 100%;
    	width: 767px;
    	padding: 0;
    	text-align: left;
    	border: 1px solid #cccccc;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #header {
    	text-align: right;
    	height: 100px;
    }
    
    #navigation {
    	height:100%;
    }
    
    #content {
    	width: 580px;
    	padding: 5px;
    	text-align: left;
    	position: relative; left: 200px; top: -300px;
    }
    
    #footer {
    	background: #FFFFFF;
    	width: 757px;
    	border: 1px solid #cccccc;
    	position: relative; top: 60px; left: -1px;
    	padding: 5px;
    	font-size: 10px;
    	color: #b0b0b0;
    	text-align: center;
    }
    
    #date {
    	width: 165px;
    	height: 16px;
    	border-top: 3px solid #fdc3c3;
    	font: bold 10px Verdana;
    	text-indent: 15px;
    	background-color: #fdc3c3;
    	color: #FFFFFF;
    }
    
    #map {
    	width: 590px;
    	height: 16px;
    	border-top: 3px solid #cccccc;
    	font: 10px Verdana;
    	text-indent: 10px;
    	background-color: #cccccc;
    	color: #333333;
    	position: relative; top: -19px; left: 177px;
    }
    
    /* Buttons & links for main navigation */
    .buttonscontainer {
    	width: 164px;
    	border-bottom: 1px solid #cccccc;
    	border-top: 1px solid #cccccc;
    	border-left: 0px;
    	border-right: 1px solid #cccccc;
    }
    
    .buttons a {
    	color: #333333;
    	background-color: #ebebeb;
    	padding: 4px;
    	padding-left: 3px;
    	display: block;
    	font: 12px Verdana;
    	text-decoration: none;
    	text-indent: 5px;
    	border-bottom: 1px solid #FFFFFF;
    }
    
    .buttons a:hover {
    	BACKGROUND-COLOR: #dddcdc;
    	COLOR: #000000;
    	TEXT-DECORATION: none;
    	border-right: 2px solid #cccccc;
    	border-bottom: 1px solid #cccccc;
    }
    
    .buttons a:active {
    	BACKGROUND-COLOR: #333333;
    	TEXT-DECORATION: none;
    }
    
    .buttons a:visited {
    	COLOR: #333333;
    }
    
    /* Links for the content */
    .body a:link {
    	text-decoration: underline;
    	color: #970606;
    }
    
    .body a:visited {
    	text-decoration: underline;
    	color: #970606;
    }
    
    .body a:hover {
    	text-decoration: none;
    	COLOR: #cccccc;
    }
    Attached Thumbnails Attached Thumbnails Small CSS (div) problem, i think..-post-54971-1181117773_thumb.jpg  

  • #2
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think it is to do with your positioning, basically when your sub menu appears the browser will automatically place the next div "body" horizontally next to it.

    Try placing all of your menu divs (navigation, buttonscontainer and buttons) inside an encapsaulating div called say menu. This will/should place your next div (body) always horizontally next to it.

    Give it a go and let me know. I had a similar problem. You can use positioning such absolute, but then you don't get the flexibility that you might want.

    I am reasonably new to the CSS game myself, so I might be talking out of my culo, but its worth a try.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    126
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks for your reply, it didnt make any difference tho

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Please post a live link.

    There is no telling what your server-side includes are holding.


  •  

    Posting Permissions

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