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

    Join Date
    Oct 2015
    Posts
    6
    Rep Power
    0

    Everything stuck Under Navigation Bar


    I'd like to know why every page, including the side bar is stuck under the navigation bar.

    Here is the css code for these pages.


    css Code:
     
    body{
        background-image: url(/FND_Joint/Images/bg-image.gif);
        background-repeat:no-repeat;
       background-size: cover;
       margin:0px;
    padding:0px;
     
    position:relativ1e;
       font-smooth: always;
    font-family:Ariel Sans Serif;
    color:#000000;
    }
     
      .FnDlogo{background-image: url(/FND_Joint/Images/FnD1.gif);
    position: absolute;
    }
     
    .top_bar
    {
    	position:absolute;
    	width:100%;
    	height:64px;
    	background-color:#B80000;
    background-repeat:repeat;
     
    	z-index:10;
    	-webkit-border-radius:8px;
      	-moz-border-radius:8px;
      	-khtml-border-radius:8px;
      	border-radius:8px;
     
    	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9)
     
    }
     
     
    	.top_bar.mobile
    {
    	height:47px;
    	background-color:#B80000;
    }
     
     
     
     
    .navbar .nav {
      position: relative;
      left: 0;
      display: block;
      float: left;
      margin: 12px 10px 0 0;
    }
     
    .navbar.mobile .nav {
      margin: 6px 10px 0 0;
    }
     
    .navbar .nav.pull-right {
      float: right;
    }
     
    #nav li {
    	float:left;
    }
     
    /* display block will make the link fill the whole area of LI */
    #nav a {
    	display:block;
    	font-size:14px;
    	font-weight:normal;
    	padding: 8px 5px;
    	color:#fff;
    	width:120px;
    	background-color:B80000;
     
    }
     
    #nav li:last-child a
    {
    	background-image:none;
    }
     
    #nav li:hover
    {
    	border-left:none;
    	border-right:none;
    }
     
    #nav a:hover {
    	text-decoration:underline;
    }
     
     
     
    .navbar.mobile
    {
    	margin-left:175px;
    	/*position: relative;*/
    }
     
    .navbar.mobile .nav > li
    {
    	margin-right:10px;
    }
     
    .navbar .nav > li {
      display: block;
      float: left;
      margin-right:25px;
      position:relative;
    }
     
    .navbar.mobile .nav > li > a {
      padding: 5px 6px 7px;
      line-height: 16px;
      font-size:13px;
    }
     
    .navbar .nav > li > a {
      float:left;
      display:block; 
      padding: 8px 12px 7px;
      line-height: 19px;
      font-size:15px;
      font-weight:bold;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 1.0);
     
      background-color:#B80000;
     
     
      -webkit-border-radius:8px;
      -moz-border-radius:8px;
      -khtml-border-radius:8px;
      border-radius:8px;
     
      -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
     
      border:1px solid #940c0c;
    }
     
     
    .navbar .nav > li > a:hover {
      color: #ffffff;
      text-decoration: none;
      background-image:none;
    }
    .navbar .nav .active > a, .navbar .nav .active > a:hover {
     color: #ffffff;
      text-decoration: none;
      background-color:#000000;
      webkit-border-radius:8px;
      -moz-border-radius:8px;
      -khtml-border-radius:8px;
      border-radius:8px;
     
      -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
     
      border:1px solid #940c0c;
    }
     
    .navbar .nav .special > a
    {color: #ffffff;
      text-decoration: none;
      background-color:#B80000;
     
     -webkit-border-radius:8px;
      -moz-border-radius:8px;
      -khtml-border-radius:8px;
      border-radius:8px;
     
      -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
     
      border:1px solid #940c0c;
     
     
    }
     
    .navbar .nav .special > a:hover
    {
    	background-image:none;
    	background-color:#B8000;
    }
     
    .about{float:left;
      display:block; 
     
      line-height: 19px;
      font-size:15px;
      font-weight:bold;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 1.0);
     
      background-color:#B80000;
     
     
     
      -webkit-border-radius:8px;
      -moz-border-radius:8px;
      -khtml-border-radius:8px;
      border-radius:8px;
     
      -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
     
      border:1px solid #940c0c;
     
    }
     
     
    /* submenu, it's hidden by default */
    #nav {
    	position:absolute; 
    	left:0;
    	top:37px;
    	display:none;
    	margin:0 0 0 -1px; 
    	padding:10px 0px 0px 0px; 
    	list-style:none;
    	z-index:-10;
     
    	-moz-border-radius-topleft: 0px;
    	-moz-border-radius-topright: 6px;
    	-moz-border-radius-bottomright: 6px;
    	-moz-border-radius-bottomleft: 6px;
    	-webkit-border-radius: 0px 6px 6px 6px;
    	border-radius: 0px 6px 6px 6px;
     
    	background-color:#333;
    	background-image:url(../images/menu_top.png);
    	background-repeat:repeat-x;
    	background-position:top;
    	border:1px solid #000;
    	border:none;
     
    	/*-moz-box-shadow: 0px 0px 2px 1px #888;
    	-webkit-box-shadow: 0px 0px 2px 1px #888;
    	box-shadow: 0px 1px 1px 0px #888;*/
    }
     
     
    #container{
     
    width:1000px;
    margin:0 auto;
    }
     
     
    #wrapper{
    background-image:url(/FND_Joint/Images/spicy-gizzard.jpg);
    background-repeat:repeat-y;
    border-left: thin 1px;
    border-right: thin1px;
     
     
    width:100%;
    min-width:550px;
    max-width:1000px;
    margin:0 auto;
     
    }
     
     
     
     
     
     
    #wrapper_content{
    background-color:#fff;
    width:500px;
    margin-left:36%;
    margin-left:-moz-calc(33%+20);
    margin-left:-webkit-calc(33%+20);
    margin-left:calc(33%+20);
     
     
    }
     
     
    #wrapper_content h3
    {
    	color:#419b15;
    	font-size:24px;
    	font-weight:bold;
    	margin-bottom:10px;
    }
     
    #content_main p
    {
    margin:0px 0px 15px 0px;
    	font-family: 'Gentium Basic', serif;
    	font-size:15px;
    	text-align:justify;
     
    }
     
     
     
    #left_sidebar{
     
    width:33%;
    padding: 10px;
    float:left;
    }
     
    #label{
     
      width: 90px;
      color:#95c40f;
      font-weight:bold;
    }
     
     
    }
    h1{
      font-family:Cabin Sketch;
      font-size:80px;
    }
    form{
      background-color:#fff;
      color:#000;
      border-radius:5px;
      height:auto;
      width:450px;
    }
    #wrapper{
      margin-top:-50px;
     float:center;
    }
    input{
      font-family:Waiting for the Sunrise;
      font-size:17px;
      font-weight:bold;
    }
     
     
     
     
    #contact_form{
    font-family:"Lucinda Sans Unicode", Lucinda Grande", sans-serif;
    color:#000;
    background-color:fff;
    margin-left:60px;
     
     
     
     
    text-area{
    height:100px;
    width:300px;
    }
     
    label{
    display:inline-block;
    width:140px;
    font-weight:bold;
    }
     
    input[type="text"] {
    width:250px;
     
    }
     
    fieldset label{
    font-weight:normal;
    margin:auto;
     
    }
     
     
    fieldset label{
    margin:0;
    padding:0;
    border:none;
     
    }
     
    label[for="comment"] {
    display:block;
    width:auto;
    }
     
     
     
    h1 {
    margin-left: 70px;
    }
    form li {
    list-style: none;
    margin-bottom: 5px;
    }
     
    form ul li label{
    float: left;
    clear: left;
    background-color:#fff;
    width: 100px;
    text-align: right;
    margin-right: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    }
     
    form ul li input, select, span {
    float: left;
    margin-bottom: 10px;
    }
     
    form textarea {
    float: left;
    width: 350px;
    height: 150px;
    }
     
    [type="submit"] {
    clear: left;
    margin: 20px 0 0 230px;
    font-size:18px
    }
     
    p {
    margin-left: 70px;
    font-weight: bold;
    }





    Thanx in advance
    Last edited by requinix; January 14th, 2017 at 01:33 AM. Reason: please use [highlight=css] tags when posting CSS
  2. #2
  3. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,024
    Rep Power
    9616
    This would be easier to diagnose if you could point us to the site so we can see it ourselves (if possible), or show a screenshot of the problem.
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    347
    Rep Power
    91
    Hi there kaymin,

    you have a missing closing curly bracket } here...

    Code:
    
    #contact_form{
        font-family:"Lucinda Sans Unicode", Lucinda Grande", sans-serif;
        color:#000;
        background-color:fff;
        margin-left:60px;
    ...which causes code failure for everything that follows.

    coothead
    ~ the original bald headed old fart ~
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2015
    Posts
    6
    Rep Power
    0
    [IMG]aboutus.html[/IMG]
  8. #5
  9. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    347
    Rep Power
    91
    Originally Posted by kaymin
    [IMG]aboutus.html[/IMG]

    What on earth does that mean.

    coothead
    ~ the original bald headed old fart ~
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2015
    Posts
    6
    Rep Power
    0
    Sorry about that! I tried inserting a screenshot of the website..It didn't quite come off.
  12. #7
  13. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    347
    Rep Power
    91
    Hi there kaymin,

    you have not commented on my post.

    Have you not read it?

    coothead
    ~ the original bald headed old fart ~
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2015
    Posts
    6
    Rep Power
    0
    Originally Posted by coothead
    Hi there kaymin,

    you have not commented on my post.

    Have you not read it?

    coothead
    I just said I tried inserting a screenshot of the website. But it didnt quite come off.
  16. #9
  17. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    347
    Rep Power
    91

    I am, obviously, referring to post #3 of this thread.

    coothead
    ~ the original bald headed old fart ~
  18. #10
  19. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,024
    Rep Power
    9616
    If you want to add a screenshot then you need to attach it to the post in the advanced editor. If you don't see options for that then you'll need to upload the images to some site and then link to it from here.

    But try fixing what coothead pointed out first. That could be the problem.

IMN logo majestic logo threadwatch logo seochat tools logo