Reputation: 25

I can't get rid of the black background behind my nav links

I can't resolve this issue. I don't know how to get rid of the black behind the navs. It seems to me all the css styling is not black when I review each element.

Cheers.

Here is a screenshot of my problems.

https://drive.google.com/file/d/0B7T0xtNhpIRZYjc5VHlNVlVTdTg/view?usp=sharing

Here is the PHP/HTML

<head>
<link type="text/css" rel="stylesheet" href="Car_Style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="screen">
</head>




<body>
    <header id="header" class="loading";]>

                <!-- Logo -->
                    <div id="logo">

                    </div>

                <!-- Nav -->
                    <nav id="nav">
                        <img src="http://1673-itstudies/12-infotech/jsummers/About%20Us//About%20US/Images/LOGO_copy.png" id="logo">

                        <ul id="links4nav">
                            <li><a href="http://1673-itstudies/12-infotech/jsummers/New_Car_Form/New_Car_Form.html">New Vehicle</a></li>
                            <li><a href="#">News</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">About</a></li>
                        </ul>


                        <a href="http://1673-itstudies/12-infotech/jsummers/Carsales_Network.php">
                            <h4 id="navtitle">AUTO NETWORK | THE LEAD SALE</h4>
                        </a>
                    </nav>




            </header>

<div id=scroller>
<a href="#" class="back-to-top" style="display: inline;">
<i class="fa fa-arrow-circle-up"></i>
</a>

<script id="scroller">
jQuery(document).ready(function() {
    var offset = 250;
    var duration = 300;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });

    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

<script id ="fading-scroller">
    $(window).scroll(function() {
    var pxFromBottom = 350;
    if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
        $('.scroll-btn').fadeOut('slow');
    } else {
        $('.scroll-btn').fadeIn('slow')
    }
});




</script>

</div>




</body>




<?php

try {
  # Connect to SQLite database
  $dbh = new PDO("sqlite:Car_Sales_Network");

  # Prepare SQL statement
  $sth = $dbh->prepare('SELECT * FROM Cars_On_Network' );

  # Set the Fetch Mode to Associative Array
  $sth->setFetchMode(PDO::FETCH_ASSOC);

  # Run the query on the database
  $sth->execute();


 //table printout
  echo "<table>";

  # Loop through returned records
  while($row = $sth->fetch()) {
    //print_r($row);spot
        //print_r($row);


    # If the image field is empty, change to dummy image

    if (empty($row['car_image_url'])) {
        $row['car_image_url'] = 'http://1673-itstudies/12-infotech/jsummers/Cars_Photos/placeholder.png';
    }
     // added these line */




 echo "<table>";
    /* added this line */

    /* // added this line */
    echo "<th>Car Make:</th>";
    echo "<th>Car Model:</th>";
    echo "<th>Car Badge:</th>";
    echo "<th>Car Price:</th>";
    echo "<th>Car Transmission:</th>";
    echo "<th>P Plate Legality:</th>";
    echo "<th id='car'>Car Image:</th>";


    echo "<div id='1'>";
    echo "<tr>";

    echo "<td>".  $row["car_make"] . "</td>";
    echo "<td>".  $row["car_model"] . "</td>";
    echo "<td>".  $row["car_badge"] . "</td>";
    echo "<td>".  $row["price"] . "</td>";
    echo "<td>".  $row["trans"] . "</td>";
    echo "<td>".  $row["P_Plate_Legal"] . "</td>";


    echo "<td id='img'><img src=\"".  $row["car_image_url"] . "\" /></td>";
    /* // this allows the image link to be converted from a link to an image */


    echo "</tr>";
    echo "</div>";



      //echo $row["Game_ID"];
    echo "<br>";
  }

echo "</table>";


  } 
catch(PDOException $e) {
    echo $e->getMessage();

}

?>

Here is the CSS:

* {
    font-family: Arial;
    color: white;
    transition: 1s;
    background-image: url(http://1673-itstudies/12-infotech/jsummers/Cars_Photos/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-text-stroke: 0.1px #333333;
}

#links4nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: Arial;
    background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

    background-color: orange;
    transition: 1s;    
}

#navi {
    background: #ff0015;
    background-color: #ff0015;
    font-family: Arial;
    display: inline-block;
}

table {
    padding: 20px;
    border: 2px;
    outline: none;
    background-image: none;
    color: white;
}


th td {
   padding-right:  20px;
   padding-left: 20px;
   margin-right: 5em;

}


/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/


    #header {
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        background: #ff0015;
        height: 3em;
        line-height: 3em;
        transition: none;
        padding-top: 8px;

    }

    body {
        padding-top: 3em;
    }

    #logo {
        position: absolute;
        left: 1em;
        top: 2px;
        height: 3em;
        line-height: 3em;
        letter-spacing: -1px;


    }

        #logo a {
            font-size: 1.25em;
        }

    #nav {
        position: fixed;
        right: 0.5em;
        top: 0;
        height: 3em;
        line-height: 3em;
        color: #ff0015;
        opacity: 30;
    }

        #nav ul {
            margin: 0;
        }

            #nav ul li {
                display: inline-block;
                margin-left: 0.5em;
                font-size: 0.9em;
            }

                #nav ul li a {
                    display: block;
                    color: #ff0015;
                    text-decoration: none;
                    height: 3em;
                    line-height: 3em;
                    padding: 0 0.5em 0 0.5em;
                    outline: 0;
                    background-color: #ff0015;
                }



/*
td{
    width: 336px;
    height: 223px;
}
*/

#img {
    opacity: 100;
    border: solid black 2px;
}

#logo {
    width: 212px;
    height: 48px;
    position: fixed;
    float: left;
}

#navtitle {
    font-family: Arial;
    color: white;
    position: fixed;
    left: 230px;
    background: #ff0015;
    top: -22px;




}

ul #nav #navbar{
    color: #ff0015;
    background-color: #ff0015;

}



#car{
    width: 50px;
    height: 50px;
}


}

.back-to-top {
    background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 1000;
width: 70px;
height: 70px;
z-index: 100;
display: none;
text-decoration: none;
color: #ffffff;
transition: 0.5s;
}

.back-to-top i {
  font-size: 60px;
  position: fixed;
  transition: 0.5s;
}

#scroller {
    background: none;
    transition: 0.5s;

}

Upvotes: 0

Answers (3)

Alaksandar Jesus Gene

Reputation: 6883

try this

#nav ul li {
                display: inline-block;
                margin-left: 0.5em;
                font-size: 0.9em;
                background:none; //added new  line.
            }

Update 1:

#links4nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: Arial;
    transition: 1s;    
}

#nav ul li a {
                display: block;
                color: #fffff;
                text-decoration: none;
                height: 3em;
                line-height: 3em;
                padding: 0 0.5em 0 0.5em;
                outline: 0;
            }

You got lots of repeated css. avoid those. Avoid unnecessary id insertions. Map the style.css to your css for changes.

Plunker Output

Upvotes: 0

Sameera Thilakasiri

Reputation: 9508

Try this

#nav ul li, #nav ul { background:none;}

I got your code to a fiddle but there I cant see the issue, so lets try with above.

Upvotes: 0

Pouya Ataei

Reputation: 2169

you may wanna try this:

 #nav ul li {
            display: inline-block;
            margin-left: 0.5em;
            font-size: 0.9em;
            background:inherit; //Inherits its property from its parent element which in your case can be the solution
            }

Upvotes: 1

I can&#39;t get rid of the black background behind my nav links

Answers (3)

Related Questions

I can't get rid of the black background behind my nav links