Let me just say before I ask this question ..I did try searching for a long time through existing topics but I can't find a working solution to my problem.
I am using Bootstrap and have a horizontal list of items with icons and a text link underneath. What I want is basically the entire div clickable as the link, not just the actual text.
Here is the HTML:
<ul class="glyphs character-mapping">
<li>
<div data-icon="a" class="icon"></div>
Link 1
</li>
<li>
<div data-icon="b" class="icon"></div>
Link 2
</li>
</ul>
And the CSS:
.glyphs.character-mapping {
margin: 0px;
padding: 0px;
color: #000000;
}
.glyphs.character-mapping li {
margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;
}
.glyphs.character-mapping .icon {
margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #FF0000;
overflow: hidden;
border-radius: 3px;
font-size: 68px;
}
I tried several solutions that are related on here, including giving no padding or margin to the 'li' and instead making the 'a' 100% wide and high, but that didn't work either.
Any ideas what I'm doing wrong here?
Thank you so much in advance for any help.
Can't you just do this:
<ul class="glyphs character-mapping">
<li>
<a href="">
<div data-icon="a" class="icon"></div>
Link 1
</a>
</li>
<li>
<a href="">
<div data-icon="b" class="icon"></div>
Link 2
</a>
</li>
</ul>
Where the entire div and text is clickable?
Related
Working on this site:
https://voyagers.wildapricot.org/
Trying to get the font awesome arrow to the right of the menu nav items (which indicates there are sub-pages) to show up immediately to the right of the text instead of with a giant space in between text and arrow.
Would appreciate any help, thank you!
Technically, this is how you would do it:
Step 1: in the following CSS rule, change the display value to inline-block.
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: top;
white-space: nowrap;
position: relative;
font: normal 18px/26px Oswald, Helvetica, sans-serif;
overflow: hidden;
}
Step 2: In the following rule, change the right-padding to 15px (the second value in the padding rule).
.WaGadgetMenuHorizontal.menuStyle004 .menuInner ul.firstLevel > li > .item > a > span {
padding: 15px 15px 15px 10px;
...
}
Step 3: In the following, change the right offset to 0 (or equivalently 0px).
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after {
content: "\f107";
font-family: FontAwesome;
color: white;
position: absolute;
display: inline-block;
top: 15px;
right: 0px;
}
I am assuming that you have access to all the CSS stylesheets in your content management system (web builder platform).
If not, you need to add these rules to override the pre-existing rules, so you need to learn how to do that first. You may need to get help from the tech support people where you are hosting.
Note: I went to your website using Firefox and I inspected the various elements and tried out these three steps and that did the trick. Make sure
to check out the other major browsers (Chrome and IE).
Keep in mind that these changes will change the overall look of the navigation so you may have other visual side effects that may not be suitable for your design.
Aside: the HTML in questions looks like the following (I omitted a few wrapping div's):
<ul style="" class="firstLevel">
<li class="sel">
<div class="item"><span>Home</span></div>
</li>
<li class="">
<div class="item"> <span>Coop</span> </div>
</li>
<li class="dir">
<div class="item"><span>Resource Center</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"><span>Home (Demo)</span></div>
</li>
</ul>
</div>
</li>
<li class="">
<div class="item"> <span>Events</span> </div>
</li>
<li class="dir">
<div class="item"> <span>About Us</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"> <span>Donate</span> </div>
</li>
</ul>
</div>
</li>
<li class="last-child">
<div class="item"> <span>Volunteer</span> </div>
</li>
</ul>
i restructured so that it works but you have to adapt it to your case
.dir {
height: 40px;
width: 100%;
}
.item {
width: inherit;
height: inherit;
}
a {
background: blue;
height: 100%;
width: 100%;
position: relative;
display: block;
}
a:hover {
background: red;
cursor: pointer;
}
span {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span:after {
content:"<";
position: absolute;
right: -20px;
}
<li class="dir">
<div class="item">
<a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center">
<span>Resource Center</span>
</a>
</div>
</li>
I am new to coding and have managed to make a navbar with the first two buttons as dropdown menus. However, I have noticed that while hovering over the first button works fine, when I hover over the second dropdown button, the dropdown menu displays directly under the first button, whilst displaying the right information. Here is a photo to explain what I mean.
And here is my code, what I have tried to do here is to reuse all the code I have written for the first dropdown menu and then added a class to the second dropdown to slightly alter what is necessary to make the menu align to the second dropdown button:
#NavBar {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#NavBar ul {
margin: 0;
padding: 0;
height:25px;
}
#NavBar ul li {
list-style-type: none;
width: 25%;
display: inline-block;
float: left;
background-color: #eecbff;
margin: 0;
padding: 0;
}
.DropBtn {
width: 100%;
font-size: 25px;
border: 0;
background-color: #eecbff;
}
.DropBtn:hover {
background-color: #ffd4e5;
border: 0;
border-radius: 8px 8px 0 0;
}
.Dropdown {
position: relative;
display: block;
}
.DropContent {
display: none;
margin: 0;
padding: 0;
position: absolute;
background-color: #ffd4e5;
width: 25%;
top: 31px;
border: 0;
border-radius: 0 0 8px 8px;
}
.Dropdown:hover .DropContent {
display: block;
border-radius: 0 0 8px 8px;
}
.DropContent a {
text-decoration: none;
display: block;
color: black;
height: 30px;
text-align: center;
}
.Dropdown:hover .DropBtn {
background-color: #ffd4e5;
border-radius: 8px 8px 0 0;
}
.DropContent a:hover {
background-color: #feffa3;
border-radius: 0 0 8px 8px;
}
.Second .DropContent{
position: absolute;
left: 25%;
}
<div id="NavBar">
<ul>
<div class="Dropdown">
<li><button class="DropBtn">Dropdown 1</button></li>
<div class="DropContent">
Link 1
Link 2
Link 3
</div>
</div>
<div class="Dropdown">
<li><button class="DropBtn Second" >Dropdown 2</button></li>
<div class="DropContent">
Link 4
Link 5
Link 6
</div>
</div>
<li><button class="DropBtn">Dropdown 3</button></li>
<li><button class="DropBtn">Dropdown 4</button></li>
</ul>
</div>
I'm very sorry if my code is very long winded, I am sure there are parts that aren't even necessary, any tips or comments about my code in general would be greatly appreciated.
Don't wrap your list item in a div. Using your current styles, I would drop the <div class="Dropdown"> and just apply that class to the list item specifically. If you do this, your dropdown will work as intended. See my edited HTML below.
I imagine the reason for this is, your Dropdown div doesn't really have a width or height, because its children are either floated or positioned absolutely. It's also unnecessary to do this, because the list item itself is perfectly capable of being a parent for your dropdown content, and it already has the positioning that you need.
Changes made: Wrapped the .DropContent div inside the li tag with the button. Removed the parent .Dropdown div and added the .Dropdown class to the li.
<div id="NavBar">
<ul>
<li class="Dropdown">
<button class="DropBtn">Dropdown 1</button>
<div class="DropContent">
Link 1
Link 2
Link 3
</div>
</li>
<li class="Dropdown">
<button class="DropBtn" >Dropdown 2</button>
<div class="DropContent">
Link 4
Link 5
Link 6
</div>
</li>
<li><button class="DropBtn">Dropdown 3</button></li>
<li><button class="DropBtn">Dropdown 4</button></li>
</ul>
</div>
Edited formatting.
Try placing your DropContent divs inside of the correspondent <li> tag, like the example bellow:
<div class="Dropdown">
<li>
<button class="DropBtn Second">Dropdown 2</button>
<div class="DropContent">
Link 4
Link 5
Link 6
</div>
</li>
</div>
I have some issues with icon images in navigation bar, I tried to set these icons in correct positions besides each label. If you find web label is very closed to computer monitor icon, I try to change padding top and bottom except left and right but doesn't work that way.
http://i58.tinypic.com/e5i7p4.jpg
<nav id="sideMenu" role="navigation">
<ul id="MainNav" class="nav-bar">
<li><a class="icon" href="#web"><img src= "img/web.svg">Web</a></li>
<li><a class="icon" href="#articles"><img src= "img/articles.svg">Articles</a></li>
<li><a class="icon" href="#about"><img src= "img/about.svg">About</a></li>
<li><a class="icon" href="#contact"><img src= "img/contact.svg">Contact</a></li>
</ul>
</nav>
.icon img {
height: 30px;
width: 30px;
padding-left: -0.2rem;
padding-right: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
anyone please?
Try to use margin. Padding is for text. You can try this -
.icon img {
height: 30px;
width: 30px;
margin: 3px 0px 0px -6px;
}
I am trying to get an image to float beside of an unordered list.
I have the following HTML:
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-1"><img id="droid-logo" alt="" src="/templates/notthedroidyouarelookingfor/images/ntdyalf-logo.png"></div>
<div class="col-md-2"><ul class="nav menu nav-pills">
<li class="item-101 current active">Home</li>
<li class="item-102">About</li>
<li class="item-106">Contact Us</li>
<li class="item-114">Troubleshooting</li></ul>
</div>
</div>
</div>
</header>
And my CSS:
droid-logo {
float: left;
height: 20%;
margin: 10px;
width: 20%; }
header ul.menu {
border-radius: 4px 4px 0 0;
display: block;
float: right;
margin: 0 10px;
padding: 0;
text-align: left;
width: 70%; }
The actual website is here:
http://notthedroidyouarelookingfor.com/
I don't understand why the image is below the menu.
the <ul class="nav menu nav-pills"> has the css property position: absolute;.
This prevents the menu to float.
Try to make the position relative and then try again with float (maybe you have to float the menu left).
I'm making a website for someone and I'm kind of rusty with my html/css, and I really need side navigation on this site.
I have the sidebar (#menu), then I want two divs (#slider on top of #container) to the left of #menu.
How can I do this? Code is below, you also might want to know that #slider is a photo slider I got online:
<style type="text/css">
body {font-family: Arial; background-color: #eeeeee; background-image: url(Images/bg.png); background-position: bottom; background-repeat: repeat-x; height: 100%; background-attachment: fixed; color: #333333;}
div#menu {float:left;margin-left: 25%; margin-right:25%; font-size: 40px; padding-top: 10px; padding-bottom: 10px; width: 10%; border: 1px solid #cccccc; text-align: center; word-spacing: 15px; background-color: #ffffff; margin-top: 10px;}
div#container {padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 40%; border: 1px solid #cccccc; text-align: left; background-color: #ffffff; margin-top: 10px;}
a {color: #666666; text-decoration:none;}
a:hover {color: #333333; text-decoration: underline;}
ul, li {list-style-type: none;}
#slider {width:600px;height:300px; margin-left: 25%; margin-right: 25%; margin-top: 10px;}
div.navBulletsWrapper {display:none;}
</style>
</head>
<body>
<div id="menu">
<li>Home</li>
<Br>
<li>About</li>
<br>
<li>Products</li>
<Br>
<li>News</li>
<br>
<li>Contact</div></li>
<div id="slider">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
<div id="container">
Placeholder text.
</div>
Let's forget your non validating html for a while, though there is much to say about it.
Your main issue is a lack of structure, you'll find it easier to align your slider and container if they are inside a common div. Your code should look like this (schematically):
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div id="main">
<div id="slider">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
<div id="container">
Placeholder text.
</div>
</div>
That way, you can float #menu and #main as you wish (right or left).
On to other issues in your code, always wrap li inside a ul or ol, and never use br to make vertical space, prefer using margin or padding. Html is for document structure only, CSS takes care of the visualization part.
First clean up your HTML. Run it through the W3C validator if you're not sure what to fix. http://validator.w3.org/#validate_by_input
Do you want slider and container inside of menu? If so, you've closed your first div too soon. Also I'm not sure your margins as percentages will give you the desired feel you're going for.
Please be a little more specific with your question and fix up your markup.