I created a navbar and I can't figure out how to get the padding areas of the link to be clickable just like the link.
I have the padding configured in this part of my CSS..
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
padding: 25px 20px;
}
I created a fiddle. Mine doesn't look like this, but it is enough to show the hover effect and how the padding areas of the link are not clickable to go to the link.
How can I make the padding areas clickable to go to the link?
https://jsfiddle.net/mykx37n9/
You just need to add the padding to the link within the <li>
try:
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
}
.spectator_nav li a{
padding: 25px 20px;
}
Related
In my dropdown nav when you hover over an object there is an amount of space I can't figure out how to remove. To be more clear its this:
Image of navbar dropdown with the space im talking about circled.
You can view the navbar on my github website: https://cyrusmusic101.github.io/fca-website-2021.github.io/
Code to website: https://github.com/CyrusMusic101/fca-website-2021.github.io
.headertop ul li {
display: inline-block;
position: relative;
padding: 0px 10px;
line-height: 70px; < ----------------- here is the issue
left: -10px;
justify-content: center;
}
I'm trying to create navigation menu in which last element is on the right side. When I use
float: right
That element is slightly lower that other elements of the navigation menu. Why is that and how can I fix it?
Here is my css:
nav ul{
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
padding: 5px 1em;
}
nav ul li:last-child{
float: right;
}
And link to JSFiddle: https://jsfiddle.net/sLqnm8r5/
Your elements would align correctly if you added a float:left; to your first elements.
checkout Fiddle
When I hover over a page name on my horizontal navigational menu the relative sub-pages float below.
At the moment these are showing centered, how can I align these so they align left (in line with the navigational menu title name).
You can see this by going to
http://79.170.44.145/sweetfe2.co.uk/
Hovering over "Business Services" see that menu that drop downs? I'd like that to align left so page links such as 'Practice Studios Oxford' will have both sentences floating left directly down below 'Business Services'.
Many thanks,
Sam
Use 'text-align:leftto.sub-menu` to align the text to left
.sub-menu{
text-align:left;
width: 176px;
}
add margin-left to align the sub menu with the main menu item
.menu > li > ul{
margin-left:12px;
}
Why not add to your CSS:
.sub-menu{
text-align:left;
}
You may also want to add padding-left:12px to align the sub menu items 'better'.
Do you mean:
text-align: left;
in /wp-content/themes/designfolio-pro/style.css?ver=3.8.1
nav ul ul {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
display: none;
float: left;
left: -1px;
list-style: none outside none;
margin: 0;
position: absolute;
text-align: left;
top: 30px;
width: 150px;
z-index: 89;
}
I'm trying to make a banner on my webpage, the part on the top that is 700px wide and 80px high.
Code looks like:
<div class="container-narrow" style="heigth: 80px;">
<img src="#" width="52" height="52" alt="my logo" />
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
Css:
.container-narrow
{
margin: 0 auto;
max-width: 700px;
background: yellow;
}
ul
{
float: right;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: right;
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
What I want is the image and the horizontal menu to be vertically aligned in the center of the 80px. the logo to the left and the menu to the right.
I've tried to set the height and then padd/margin my way to get the job done but it feels rubbish...
Problem:
ul has a width:100%; if you give it a black border you will see that its occupying the width of the page, means it has no space to reside on the left of the logo inside the yellow header.
Removing this width will give the following result: http://jsfiddle.net/YBVe6/
Now since the header has a fixed max width, which is 700px, there's many ways to center the logo and the menu.
Fastest way I can think of is the following:
Give ul a display: inline-block;, (remove float: right;) then give the header a text-align: center;, here's the result : http://jsfiddle.net/YBVe6/1/
And if you want the menu to be displayed in the upper part, just add vertical-align: top;.
To start of, it's a good practice if you have an external CSS, don't put additional CSS in your HTML blocks:
<div class="container-narrow">
and put the height style in your css sheet, as you have a class setup for your div there anyway.
Second, making typo's is a pain if you want your CSS to work properly, so instead of heigth you should use height, will make you div actually 80px high.
Third of all: margins are there the position elements. Use them!
.container-narrow
{
height: 80px;
margin: 0 auto;
max-width: 700px;
background: yellow;
}
img
{
margin-top:14px;
}
ul
{
float: right;
padding: 0;
margin: 0;
list-style-type: none;
margin-top:25px;
}
a
{
width: 6em;
color: black;
text-decoration: none;
padding: 0.2em 0.6em;
}
a:hover {color: #ccc; text-decoration: none;}
li {display: inline;}
Edit
This is mostly applicable for vertical alignment. If you want to auto-center horizontally, you can make use of the margin:auto concept. This is possible because a page can't extend beyond the browser width (browser height can extend as you have scrolling available as default behavior).
I'm working on this site: http://www.bedriftsdesign.no and got two things I'm struggling with:
First the floating social icons on the left in the header won't allign vertically. I'm using display:block and a bit unsure what I'm doing wrong?
Secondly (optional) I'd prefer them to be on the background element just outside the wrapper, but unsure how to make that work?
Any suggestion on how to solve this would be really welcome.
Thanks
Ans of Question 1 just remove float:left;from here #social li its working as per your requirement :- see the attached image
CSS
#social li {
display: block;
list-style-type: none;
}
Ans of Question 2
I think you are looking this :-
CSS
#social {
background: none repeat scroll 0 0 transparent;
left: 177px;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 12;
}
You are floating the list elements li and trying to undo it by setting display: block for the containing anchors a.
You shouldn't set li to be float: left; in the first place.
Find this rule
#social li { float: left; list-style-type: none; display:block; }
and remove float:left; This will align the icons vertically.
In order to align them along the header image, I would use negative margin. Find this rule:
#social{ background: transparent; margin: 0; }
and change the margin to margin: -35px;
Not sure what you mean by align them vertically. To what do you want them to align?
If you want them from up to down change:
#social li { float: none; }