stackoom
  简体   繁体   中英

CSS & HTML Spacing Issue

 原文  2017-05-30 22:54:43  8   3    html/ css/ position/ edit

Question

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>

3 answers

solution1
 0  2017-05-30 23:01:05

you should replace your html down the link tags and close the head tag 

<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--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-->
</head>


<div id="wrapper">
<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>
</div>


<!--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>

solution2
 0 ACCPTED  2017-05-30 23:21:59

To stop the bar pushing the following content down, you can just set it to float: left; to take it out of the normal text flow and put it to the left. Now the text will appear next to the bar.

Also if you can't click on the bar, there is maybe a hidden div with a higher z-index. I would recommend checking your web inspector to find out, why you can't click on the bar.

Also: Make sure, your markup is valid ! Your head section is a bit messy. <div> elements eg don't belong here. 

 .icon-bar { width: 90px; background-color: #555; float: left; margin-right: 1em; } .icon-bar a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 36px; } .icon-bar a:hover { background-color: #000; } .active { background-color: #4CAF50; } 
 <!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="wrapper"> <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> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> </div>

solution3
 0  2017-05-30 23:22:23

you should change the background color for the a element

} 

.icon-bar a {
    display: block; /* Make the links appear below each other instead of side-by-side */
    background:#555;
    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 */
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question spacing issue in html/css Image spacing issue in html and css Spacing is messed up in IE (html/css issue) Spacing issue with image placed in table - HTML and CSS Spacing Issue with CSS Css spacing issue with iFrame CSS: Spacing issue with dropdown Css Bootstrap spacing issue HTML + CSS Spacing issue when adding content to a widget CSS and HTML table - spacing/padding/border issue (not sure which)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM