Alrighty so I am attempting to create a header for a website I'm making, but I'm having a bit of trouble with padding some links out for my top level nav.
Basically what's happening is, if I have a long link name, it overlaps with another link.
I think this is something to do with the width but I'm not sure how I can fix it. I also really don't want to create a fixed width for the links, as I am wanting to make each text in the links 60px away from the previous.
HTML:
<nav id="top_navigation">
Home
Example1
Longtextjustbecause
Testpage3thingy
</nav>
CSS:
#top_navigation a {
display: inline-block;
height: 60px;
color: #3b3b3b;
font-family: Hero;
font-size: 26px;
text-decoration: none;
line-height: 60px;
padding: 0px 30px; }
Any help is greatly appreciated, thanks!
Yeah so it turned out to be the font that I was using for some reason. It doesn't appear to like padding in any circumstance very much.
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
I am relatively new to HTML/CSS, and am finding a basic bug in a website that I am attempting to create.
I am using an external CSS file to style my website, and I use the following code as a general guideline for my HTML links.
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
After I link my styles.css file to my HTML file (via link), I want to have a standard logo at the top right corner of the screen, which when clicked, will bring the user to the home screen. However, I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen so the website would look natural on a phone and a computer (rather than being too big/small). I have attempted to do so below, and although the image is in the correct proportions I want it to be, I am still getting an issue when I hover over the label, there seems to be a border that lights up around the image (even though I don't want it to). Here is the code that I used to add the logo:
<a href="index.html" style="float:right; padding:0px 0px;">
<img src="images/test.jpg" alt="Testing Logo" style="width:35%; height:20%; border:0;">
</a>
I am pretty sure that adding the percentages to both the width and height is illegal, right? I'm also curious why this seems to work for the height, but not for the width, and if there is something flawed in doing so please let me know. Here is the output that this code will cause to my logo:
In the above image, I am not hovering over the image with my mouse. The logo is taking up more space than I would like and has a border.
The above image shows my logo when I am hovering over it with my mouse. Notice that the border around it changes color, and if you click in this area, then it will redirect it to the homepage (which is what I want it to do, but I want to minimize the clicking area to just the picture of the logo, not the space surrounding it, and I want to get rid of the border surrounding the logo).
there's a property in CSS called as an outline
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
outline: none;
}
this will remove your border which is highlighting when you hover over it
Your issue is not that clear.
It is best to show your live site or place your code on sites like CodePen or JSFiddle, so others can test to check the issue.
By the way, you can also post your code here as well.
You can try this, but please read what follows: :)
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
border: none; /* <-- add this */
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
From what I see: I suspect the border (and box-shadow ?) to come from a parent node. You can use the inspector of your browser and click on the border to identify the html tag we want and give him the medicine:
{
border: none;
box-shadow: none;
}
I am pretty sure that adding the percentages to both the width and height is illegal, right?
The SWAT won't come at your place, though we tend to avoid that directly in the HTML file.
More, it's better to not put style inside the HTML file itself, as it may override some rules written on your css files. If you don't know about CSS specificity, here is a good read.
Though it's ok on a CSS file. Myself I usually put max-width: 100% to the images, and I change the width and height of it's parent's div as needed.
I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen
This is perfect! Did you know about vw and media queries ?
I've almost got my website finished but am growing incredibly frustrated and not being able to get the vertical-align to work. Everywhere else, my content is where it should be, but for reasons unknown, these lists are appearing in the middle... meaning when the iframe is set to the desired size, my lists move to the middle of their td?
I've tried adding the vertical align option to the css of the links, created a div option for the entire area, adding it html etc, no luck anywhere? What am I doing wrong? :(
A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}
#sub li {list-style-type: square;}
Please bear in mind that I have a main ul menu above that I do not want affected in any code anyone manages to fix for me.
<center><h2>Amber w/Inclusions</h2></center><ul id="sub">
<li>Baltic</li>
<li>Copal</li>
</ul>
<center><h2>Dinosaurs/Reptiles</h2></center>
<ul id="sub">
<li>Pterosaur</li>
<li>Raptor</li>
<li>Spinosaurus</li>
</ul>
<center><h2>Trilobites</h2></center>
<ul id="sub">
<li>Cambrian age</li>
<li>Devonian age</li>
<li>Ordovician age</li>
</ul>
You can see what I mean on the page http://www.dinodeals.co.uk/fossils.html
The table itself is only for aid during design, it won't be visible on the complete design. I would love a little divider also, say a green line to the right of the entire sub category menu I'm trying to set to the top. But had no luck implimenting that either after reading up how. I'm not sure the border-right css is usable anymore?
you can try this, I just inspected the page and found you are running some type of padding on your td element (most likely caused by it aligning to the middle).
Try this little snippet:
td{
padding-top: 0px;
vertical-align: top;
}
This aligned the table to the top on my screen.
EDIT:
As per your request for border on the right of it (I didn't see that far into the question).
td{
vertical-align: top;
border-right: 3px solid rgb(15, 166, 22);
padding: 10px 0;
}
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
I am trying to look at this page in Firebug:
http://128.48.204.195:3000/
What I am trying to do is make the top-right area with login/signup be all the way to the right, but I am not sure how to do it. I tried to I surround that stuff with its own div called site_login but it didn't seem to do the trick.
Any idea how to put that stuff on top right further to the right so it looks a little more proportional and symmetrical?
Here is what my css looks like:
.banner .site_login {
height: 20px;
position: absolute;
float:right;
right: 0.5em;
top: 0.5em;
color: #fff;
}
.banner .site_login a
{
color: #fff;
text-decoration: underline;
}
.banner .site_login a:hover
{
color: #ff0;
}
Thank you!
Looks like you accidentally commented out the closing div tag </div>
Get that back in there (un-comment it), then position it absolutely (you'll always want it in the same place):
.site_login{position:absolute;width:300px;text-align:right;padding:10px;}
.banner{position:relative}
As Faust pointed out, you forgot your closing div tag </div>. Also, I added a float:right and it seems to work the way you are asking for. Check it out.