I am trying to add padding around link in a vertical navigation menu I am making for a bakery site.
However when I make changes either the page becomes all out of whack, there is no changes at all, the whole menu moves or the padding disturbs the hover sequence and certain links are not highlighted when hovering over them.
I tried making changes in %, em's and pixels, but I get nothing still.
Iam using chrome and sublime text btw, if that helps.
Here is the HTML:
<!-- NAVIGATION LINKS-->
<div id = "navibar">
<nav>
<a class = "navibar" href = "aboutthebakery.html"> ABOUT THE BAKERY </a>
</br>
<a class = "navibar" href = "bakeryselection.html"> BAKERY SELECTIONS </a>
</br>
<a class = "navibar" href = "viewthemenu.html">VIEW THE MENU </a>
</br>
<a class = "navibar" href = "visitalocation.html"> VISIT A LOCATION </a>
</br>
<a class = "navibar" href = "http://example.com/--.html"> WEDDINGS & OCCASIONS </a>
</br>
<a class = "navibar" href = "http://example.com/--.html"> CATERING
</a>
</nav>
</div>
Here is the CSS (I changed everything to 0% just now):
/* NAVIGATION DIV CONTAINING LINKS */
#navibar {
text-align: center;
margin-top: 3%;
margin-right: 48%;
margin-bottom: 0%;
margin-left: 8%;
}
.navibar {
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
color: #000000;
text-decoration: none;
font-size: 12px;
font-family: Verdana;
}
.navibar:hover {
color: #c92727;
text-decoration: none;
font-size: 12px;
font-family: Verdana;
}
You need to get rid of the <br>'s and make the links block-level elements. Inline-block elements can have padding, however it's the combination of inline-block and <br> that's causing your issue. <br> doesn't respect margin/padding very well.
Try using
.navibar {
display: block;
padding: 10px 0;
}
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.
This is the navbar before making the image clickable.
This is the HTML for it:
<div class="top_nav">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
This is the CSS for it:
.top_nav {
overflow: hidden;
background-color: #2c3e50;
border-bottom: 20px solid #ed0162;
position: fixed;
top: 0;
width: 100%;
}
.top_nav a {
float: left;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 17px;
margin-bottom: 0;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
.logo {
float: left;
margin: 15px;
}
This is the HTML and webpage after I try to make the image clickable:
There is now big spacing inbetween and the hover style now affects the image when I don't want it too.
The HTML code after:
<header>
<div class="top_nav">
<a href="https://www.ntu.ac.uk/">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
</a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
</header>
I've tried removing the 'logo' class from the image style but it doesn't really change it that much.
There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.
.top_nav {
display:flex;
justify-content:space-around;
align-items:center;
overflow: hidden;
background-color: #2c3e50;
font-size:2vw;
width: 100%;
}
.top_nav a {
width:10%;
color: white;
text-decoration: none;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
img{
width:100%;
}
#short{
width:2.5%;
}
<div class="top_nav">
<a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
I find that it's generally pretty poor practice to use element names (such as a and div) in CSS selectors at all, for this exact reason.
Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav .navigation. Then you could add a similar class to the logo <a>.
Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.
One way to solve this is to use the :first-of-type pseudo css selector. Something like that would be the correct way to handle it:
.top_nav a:first-of-type {padding: 0;}
EDIT
I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
To:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge" />
I'm creating the links for the dropdown menu on a navigation bar using links with icons appearing to the left. Currently I'm able to display the links correctly as links, with icons appearing next to the text, however using the styling code I'm currently unable to change the font size or add padding to the text to add more space between the links.
I've included my code below - please note I'm still very much learning html/css so I'm sure this isn't the best way to do it.
.icon a {
float: left;
text-align: center;
padding: 12px;
color: black;
font-size: 50px;
}
.navbar-item {
font-size: 50px;
}
<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
<span>
<span class="icon"><i class=""></i></span> Accent Chairs
</span>
</a>
.icon a targets any a element that is a descendant of an element that is a member of the icon class.
Your code has one member of the icon class and one a element but the a is an ancestor of the icon, not a descendant.
use a .icon instead of .icon a in your css
a .icon {
float: left;
text-align: center;
padding-right: 30px;
color: black;
font-size: 60px;
}
.icon::before {
content: "$"
}
.navbar-item {
font-size: 50px;
}
<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
<span>
<span class="icon"><i class=""></i></span> Accent Chairs
</span>
</a>
Html noob here. I'm trying to make a division that contains some ordinary text and a download button. I've got a paragraph for the normal text and an anchor with an image for the button. For some reason, the button wants to take the same alignment as the paragraph. I have this code:
p {
color: #fff;
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
}
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
<div id="downloadText">
<p>In the meantime, would you like to download a fun bubbles game for Linux?</p>
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
</div>
Both the paragraph and the anchor end up aligned left. Why would this be? (note: if I change paragraph to align right, both will align right.) thanks in advance!
It's a bit unclear..
Run this snippet, hope it helps you:
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
p {
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
display: block /* Set display block, the element will move */
}
<div id="downloadText">
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</div>
The anchor is an inline element, which means its box is as large as its content. The box is positioned to the left because of the paragraph's style. The anchor's content might still be positioned to the right, but it doesn't matter because its width is as large as its content.
You've got a few options:
set a { position: absolute; right : 0 } in the style. Not great, imo
set the width of the anchor to 100% a { width : 100%; text-align : right } I also do not favor this option.
the most correct one css-wise is to wrap the anchor in another block-level element, e.g. another paragraph:
.installer-container {
text-align : right;
}
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
</p>
<p class="installer-container">
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>