6 jun
2017

CSS & HTML Spacing Issue

Hi guys I am trying to add to my page a menu bar down the left hand side

my issue is its pushing all the html below this out of line. The menu bar is showing but its not able to be clicked on.

How can I sort this issue please..

Many thanks in advance

here is some code I added to the HTML and the Stylesheet.

HTML

<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
  <a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a> 
  <a href="https://Sitehere.com "><i class="fa fa-search"></i></a> 
  <a href=mailto:email@here.com><i class="fa fa-envelope"></i></a> 
  <a href="https://sitehere.com/signup"><i class="fa fa-globe"></i></a> 
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->

<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>

This is what I added to the style sheet..

}

.icon-bar {
    width: 90px; /* Set a specific width */
    background-color: #555; /* Dark-grey background */
}

.icon-bar a {
    display: block; /* Make the links appear below each other instead of side-by-side */
    text-align: center; /* Center-align text */
    padding: 16px; /* Add some padding */
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; /* White text color */
    font-size: 36px; /* Increased font-size */
}

.icon-bar a:hover {
    background-color: #000; /* Add a hover color */
}

.active {
    background-color: #4CAF50; /* Add an active/current color */
}

How do i stop this pushing all the HTML text below down the page? and is there any reason the bar can be seen but not interacted with?

many thanks in advance!

FULL HTML


<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Coming Soon </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
  <a class="active" href="https://EXAMPLE.COM"><i class="fa fa-home"></i></a> 
  <a href="https://EXAMPLE.COM/support "><i class="fa fa-search"></i></a> 
  <a href=mailto:admin@SITE.COM><i class="fa fa-envelope"></i></a> 
  <a href="https://EXAMPLE.COM/signup"><i class="fa fa-globe"></i></a> 
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->

<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function () {
    $('#defaultCountdown').countdown({until: new Date(2017, 8-1, 25)}); 
    //Replace above date with your own, to find out more visit https://keith-wood.name/countdown.html
});
</script>
<!--/JS-->

</head>
<script type="text/javascript"> //<![CDATA[ 
var tlJsHost = ((window.location.protocol == "httpss:") ? "httpss://secure.comodo.com/" : "https://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
<body>
<!--DARK OVERLAY-->
<div class="overlay"></div>
<!--/DARK OVERLAY-->
<!--WRAP-->
<div id="wrap">
    <!--CONTAINER-->
    <div class="container">
        <img src="images/LOGO.png" alt="LOGO" class="image-align" />
        <h1>
            <span>We are</span><br/>
            Reaching For <span class="yellow">The Moon.</span>
        </h1>
        <p>SITE TEXT HERE.</p>
        <div id="defaultCountdown"></div>
        <form action="#">
            <input type="text" name="email" id="email" value="Subscribe to find out when we are done">
            <input type="submit" value="GO!">
        </div>
        </form>
        <p class="copyright">Designed by <a href="https://EXAMPLE.COM" target="_blank">Investex.pro</a></p>
        <img src="images/comodo_secure_seal_76x26_transp.png" alt="Comodo" class="image-align" />
    </div>
    <!--/CONTAINER-->

<!--/WRAP-->

<script language="JavaScript" type="text/javascript">
TrustLogo("https://EXAMPLE.COM/images/comodo_secure_seal_76x26_transp.png", "CL1", "none");
</script>
<a  href="httpss://ssl.comodo.com" id="comodoTL">Comodo SSL</a>

</body>
</html>

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation