#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    46
    Rep Power
    12

    CSS Layout Help Needed


    ( http://www.njcc.net/index2.html )

    I need that right part to be moved up... like where the left nav-bar is. It scales how i want to, the bottom is right, the left has a static pixel width like i want, i just need that right bar to move up... here's the style sheet

    Code:
    body {
    	font-family: verdana, sans-serif;
    	font-size: 12px;
    	background-color: #cccccc;
    }
    
    p {
    	text-align: justify;
    }
    
    #top {
    	margin: 20px 20px 0px 20px;
    	padding: 10px;
    	border: 5px solid #000;
    	background: #ccc;
    	height: 100px;
    }
    
    #nav-left {
    	background: #ccc;
    	top: 120px;
    	left: 0px;
    	border: 5px solid #000;
    	margin: 20px;
    	width: 250px;
    }
    
    #content-right {
    	margin: 20px;
    	margin-left: 290px;
    	border: 5px solid #000;
    	padding: 5px;
    }
    
    #bottom {
    	margin: 20px;
    	text-align: right;
    	border: 5px solid #000;
    	padding: 5px;
    }
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Code:
    #nav-left {
    	background: #ccc;
    	float:	left;
    	border: 5px solid #000;
    	margin: 20px;
    	width: 250px;
    }
    you can use float,

    works in mozFB, opera7, konqueror
    can't check it in ie here, but i assume it will work
    there,
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    46
    Rep Power
    12
    nice, thank you
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    46
    Rep Power
    12
    Ok, it looks great here...

    http://www.njcc.net/index2.html

    but if there's only a little bit of text on the page, in the content-right div, it kind of collapses on itself

    http://www.njcc.net/index3.html

    updated style sheet

    Code:
    body {
    	font-family: verdana, sans-serif;
    	font-size: 12px;
    	background-color: #cccccc;
    }
    
    p {
    	text-align: justify;
    }
    
    ul {
    	list-style-image: url(bullet.jpg)
    }
    
    a:link {color: #000099}     /* unvisited link */
    a:visited {color: #000099}  /* visited link */
    a:hover {color: blue}   /* mouse over link */
    a:active {color: blue}   /* selected link */
    a.current {font-weight: bold}
    
    .noCSS { display: none; }
    
    #top {
    	margin: 0px;
    	margin-left: 20px;
    	margin-right: 20px;
    	padding: 0px;
    	padding-left: 15px;
    	background: #ccc;
    	height: 100px;
    }
    
    #nav-left {
    	background: #ccc;
    	top: 120px;
    	padding-top: 15px;
    	left: 0px;
    	float:left;
    	border-top: 1px solid #000099;
    	margin: 20px;
    	margin-right: 0px;
    	width: 200px;
    }
    
    #content-right {
    	margin: 20px;
    	margin-left: 240px;
    	padding-left:5px;
    	padding-top: 0px;
    	border-left: 1px solid #000099;
    }
    
    #bottom {
    	margin: 20px;
    	margin-top: 5px;
    	text-align: right;
    	border: 1px solid #000099;
    	padding: 5px;
    }
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    46
    Rep Power
    12
    bvah, nevermind, i just threw in a height attribute in the right, it's a hack, but oh well
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    46
    Rep Power
    12
    ok, one more quick problem

IMN logo majestic logo threadwatch logo seochat tools logo