I've prepared the follow example:
http://jsfiddle.net/NSGRq/1/
Is it possible using CSS only, to underline "Email" whenever the circle icon is hovered?
<ul class="inline">
<li><a class="icon-stack" title="Email" href="mailto:info#info.com">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-envelope" style="color: white;"></i>
</a><a title="Email" href="mailto:info#info.com">Email</a>
</li>
</ul>
also is it possible to remove the duplicate tags which does exactly the same thing?
<a class="icon-stack" title="Email" href="mailto:info#info.com">
<a title="Email" href="mailto:info#info.com">Email</a>
Thanks
Hard to tell exactly what your requirements are, but this is one approach to take.
http://jsfiddle.net/yXWpu/
HTML
<ul class="inline">
<li><a class="icon-stack" title="Email" href="mailto:info#info.com">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-envelope" style="color: white;"></i>
<span class="email-text">Email</span></a>
</li>
</ul>
CSS
.icon-stack {
font-size: 32px;
}
a[class^="icon-"], i[class^="icon-"] {
text-decoration: none;
color: #1BA1E2;
}
a[class^="icon-"] .email-text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10pt;
margin-left: 65px;
}
a[class^="icon-"]:hover .email-text {
text-decoration: underline;
}
Related
I have been attempting to make a HTML-based email for a class I'm in. I have gotten to the footer where I would like a box at the bottom with a "legal disclaimer" and clickable links. I have gotten the box and all of the content inside of it, but I have been unable to center it (I have tried using text-align:center;)*
Heres a snippet of code from that section HTML and CSS included edited to exclude personal information
HTML:
<div>
<p class="footnote">Legal disclaimer here</p>
<p class="footnote">Please do not reply to this email.</p>
<a class="footnote" href="link" alt="broken link">link 1</a>
<a class="footnote" href="link" alt="broken link">link 2</a>
<a class="footnote" href="link" alt="broken link">link 3</a>
<a class="footnote" href="link" alt="broken link">link 4</a>
</div>
<--note the div shown here has its own class but I removed it for this example-->
CSS:
.div{
background-color: #f4f5f5;
border: none;
display:inline-block;
text-align: center;
}
.footnote{
font-size: 11px;
color: black;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Not sure of what you're trying to achieve, but if you want something like this
just center the container adding margin auto on its horizontal sides.
This is the code:
.centered {
background-color: #f4f5f5;
padding: 8px;
margin: 16px auto 0;
text-align: center;
}
.footnote {
font-size: 11px;
color: black;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<div>
<div>Content and stuff preceding footer...</div>
<div class="centered">
<p class="footnote">Legal disclaimer here</p>
<p class="footnote">Please do not reply to this email.</p>
<a class="footnote" href="link" alt="broken link">link 1</a>
|
<a class="footnote" href="link" alt="broken link">link 2</a>
|
<a class="footnote" href="link" alt="broken link">link 3</a>
|
<a class="footnote" href="link" alt="broken link">link 4</a>
</div>
</div>
This question already has answers here:
How to stop text from taking up more than 1 line?
(5 answers)
Closed 2 years ago.
I have a problem, it is weird, I thought I have finished a task but I was playing with the browser and then boom, a problem, so I have a container with flex displaying, it contains links elements, each element has a text, but now, the text is not displayed correctly, I don't know why, is it because of flex displaying of the parent ? I don't know, here is what I want to achieve :
But that is what I get :
[![enter image description here][2]][2]
I don't get that return, why is that ?
Here is my html code :
<div class="header__options">
<a href="#" onclick="showDetails(0)">
Dernières minutes
</a>
<a href="#" onclick="showDetails(1)">
Vol
</a>
<a href="#" onclick="showDetails(2)">
Séjour
</a>
<a href="#" onclick="showDetails(3)">
Location
</a>
<a href="#" onclick="showDetails(4)">
Camping
</a>
<a href="#" onclick="showDetails(5)">
Hôtel
</a>
<a href="#" onclick="showDetails(6)">
Train
</a>
</div>
And my css :
.header__options a {
margin-right: 20px;
position: relative;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
}
Any help would be much appreciated.
Adding white-space: nowrap will ensure that the element text does not wrap, and stays on one line.
.header__options {
background: black;
}
.header__options a {
margin-right: 20px;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
/* Add white-space: nowrap */
white-space: nowrap;
}
<div class="header__options">
<a href="#" onclick="showDetails(0)">
Dernières minutes
</a>
<a href="#" onclick="showDetails(1)">
Vol
</a>
<a href="#" onclick="showDetails(2)">
Séjour
</a>
<a href="#" onclick="showDetails(3)">
Location
</a>
<a href="#" onclick="showDetails(4)">
Camping
</a>
<a href="#" onclick="showDetails(5)">
Hôtel
</a>
<a href="#" onclick="showDetails(6)">
Train
</a>
</div>
You can use the CSS:
white-space: nowrap;
For more information: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space
im trying to fire a class when a hover a button, basically inside of my href i have a i icon tag that needs to change color: but is not working:
my css and html:
.catalog-icons i:hover{
color: #ba658a;
}
.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
color:#ba658a;
background-color: white;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">
<i class="fontello-icon icon-vet"></i>
</a>
</li>
I added an image since your code does not provide any.
Your rule should be simple:
.your_hovered_element_class:hover affected_elemnt_inside
in your case once .btn-icon is hovered, you change the i background color
.btn-icon:hover i{
background-color: #ba658a;
}
i img {
height: 1em;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">link text
<i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
</a>
</li>
I want to create a drop down menu, when i click the glyphicon the down arrow, it should view the drop down menu which has these items [Messages, log out, etc..].
However when i click it nothing appears at all, what is missing here?
//Html File:
<html>
<!-- Head -->
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Body -->
<body>
<div class="navbar">
<i class="fa fa-home"></i> Marble
<a class="left"> <i onclick="myFunction(this)" class=" fa fa-bell" ></i> Notifications </a>
<a class="left user"> <i class=" fa fa-user-circle"> </i> User </a>
<div class="dropdown">
<a class="editClass dropdown-toggle" data-toggle="dropdown" > <span class=" glyphicon glyphicon-menu-down"></span> </a>
<ul class="dropdown-menu"> //when i remove class="dropdown-menu", the items appears but the drop down is gone, and when i add them back, the items are not shown when i click the drop down icon.
<li> <a> <i class="fa fa-envelope-o"></i> Messages </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <i class="fa fa-hourglass-3"></i> Timeline </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <i class="fa fa-cog"></i> Settings </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <span class="glyphicon glyphicon-log-out"></span> Log Out </a> </li>
<li role="separator" class="divider"></li>
</ul>
</div>
</div>
<div>
<img src="Diagram.png" alt="diagram" width="400" height="300">
</div>
<div>
<p id="sentence"> "You don't have any projects" </p>
<button onclick="createProject()" class="button1 btn btn-lg"> <b> Add Project </b> </button>
</div>
<div>
<form class="form-popup" id="projects">
<h2 align="center"> <span class="glyphicon glyphicon-th"></span> New Project </h2>
<input type="text" placeholder="Project Name" required> <br>
<textarea placeholder="Project Description" required=""></textarea> <br>
<p> Start Date: </p>
<p> End Date: </p>
<input type="Date" name="start Date" required="">
<input type="Date" name="End Date" required="">
<h2 align="center"> <span class="glyphicon glyphicon-book"> </span> References </h2>
<div id="refTextBoxes">
<input type="text" placeholder="Add Reference" required> <br>
</div>
<button onclick="addRef()"> Add another </button> <br>
<button type="submit" onclick="hideAndAdd()" > Done </button>
<!-- class="btn" bt3ml el button shakl kda 7elw -->
</form>
</div>
<script>
function myFunction(x)
{
x.classList.toggle("fa-bell-slash");
}
function createProject()
{
document.getElementById("projects").style.display = "block";
}
function addRef()
{
var totalTextBoxes = document.getElementsByClassName("input_text");
totalTextBoxes = totalTextBoxes.length + 1;
document.getElementById("refTextBoxes").innerHTML=document.getElementById("refTextBoxes").innerHTML+
"<input type='text' class='input_text' id='input_text"+totalTextBoxes+"' placeholder='Add Reference' + required> <br>";
}
function hideAndAdd()
{
var x = document.getElementById("sentence");
x.style.display = "none";
}
</script>
</body>
<!-- Closing of html tag -->
</html>
//Css File:
body
{
font-family: Arial, Helvetica, sans-serif;
/* background-color: #ABB1BA; */
}
.form-popup
{
display: none;
}
/* Style the navigation bar */
.navbar
{
width: 100%;
background-color: #877ebf;
overflow: auto;
}
/* Navbar links */
.navbar a
{
float: left ;
text-decoration: none;
color: #CCCCCC;
font-size: 17px;
padding: 12px;
}
/* Navbar links on mouse-over */
.navbar a:hover, i:hover, span:hover
{
background-color: #555;
cursor: pointer;
}
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
p
{
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20px;
}
button
{
text-align: center;
font-size: 16px;
margin: 25px 475px;
cursor: pointer;
}
.button1
{
background-color: #CCCCCC;
color: #333333;
border: 4px solid #877ebf;
}
/*
.navbar i.editClass, span.editClass
{
float: right;
}
*/
.left
{
position: absolute;
right:135;
}
.user
{
/*margin: 25px 25px; */
/*float: right;
padding: 100px; */
position: absolute;
right:40;
}
.editClass
{
position: absolute;
right:5;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
I'm using here Bootstrap, html, and css.
I think there is problem in the css file, but i can't manage to find where exactly.
You have overflow effectively hidden on your navbar. Remove that.
.navbar {
/* overflow: auto; */
}
Demo
You'll want to get familiar with your browser's document inspector. It'll make diagnosing things like this almost effortless.
I am unable to link certain text (text that I want to link is in h6) to another page I've created. I'm following the standard format but somehow it is not working. Please help me!
HTML Code:
<ul class="ei-slider-large">
<li>
<img src="images/large/1.jpg" alt="slider1"/>
<div class="ei-title">
<h2>Welcome</h2> <br>
<h3>Child at Street 11</h3>
</div>
</li>
<li>
<img src="images/large/2.jpg" alt="slider2" />
<div class="ei-title2">
<h4>Enrol</h4><br>
<h5>Every child deserves to have an early education</h5><br>
<h6>Enrol Now</h6>
<br>
</div>
</li>
<li>
<img src="images/large/3.jpg" alt="slider3" />
<div class="ei-title2">
<h4>Donate</h4><br>
<h5>Give back to our society by helping the underpriviledged</h5><br>
<h6>Donate Now</h6>
</div>
</li>
<li>
<img src="images/large/4.jpg" alt="slider4"/>
<div class="ei-title2">
<h4>Volunteer</h4><br>
<h5>Lend us your hand with our many volunteer opportunities</h5><br>
<h6>Volunteer Now</h6>
</div>
</li>
</ul>
CSS Style:
.ei-title2 h6{
font-size: 25px;
text-decoration:underline;
font-family: 'Open Sans Condensed', sans-serif;
font-weight:300;
text-transform: uppercase;
color: #000;
letter-spacing:.02em;
background:#ffd40b;
display:inline;
padding: 0 10px 0 10px;}
.ei-title2 h6 a:hover{
-webkit-text-stroke: 1px;}
Thanks kind soul!