I have following CSS:
#navigation {
background-color: #ededed;
text-align: center;
margin: 0;
font-size: 0;
}
#meet {
position: relative;
z-index: 1;
display: inline-block;
background-color: #088A85;
width: 300px;
height: 90px;
margin: 0;
padding: 0;
}
#meet p {
z-index: 3;
background-color: #000000;
text-align: center;
color:
}
#meet a, #develop a, #beinformed a{
color: #ffffff;
text-decoration: none;
}
.council {
background-image: url(council.png);
}
And following HTML code:
<div id="navigation">
<div id="meet">
<p>THIS TEXT IS NOT SHOWN</p>
<span class="button council">
council
</span>
<span class="button tacticalgroup">
tactical group
</span>
</div>
For some reason the text in the Paragraph is not shown. I have tried various things (z-index etc), but it is not working.
What am I missing here?
I forgot that I had put font-size to a value of 0 and that explains all why the text in the P is not shown. I have therefore set the font-size of the P element element to a higher value and that solves the problem.
Related
I have this HTML
<div class="link">
<i class="icon" />
<div class="text-wrapper">
<span class="label">Some label which can span at most 2 lines</span>
<span class="subtext">(optional)</span>
</div>
</div>
One way of displaying is:
Notice how the label wraps to the second line while the subtext is trailing behind it.
The other way of display is:
Notice how the label here is not long enough to wrap, but the subtext is still on the second line.
Can anyone suggest how I can achieve the above with HTML/CSS only? Feel free to ignore the icon in the solution. I have that already. Thanks in advance.
The code I have so far...
.link {
position: relative;
font-size: 0.875rem;
padding-left: 26px;
text-align: left;
line-height: 1.25rem;
}
.icon {
padding: 0;
width: 18px;
height: 18px;
font-size: 18px;
border-radius: 50%;
transform: translateY(2px);
position: absolute;
top: 0;
left: 0;
}
.label {
margin-right: 4px;
color: #007dbb;
}
.subtext { color: #686868; }
Set the first span as display: block; (see css for label-element). That will display the first span as a block element, forcing the second span to begin on a new line.
.link {
position: relative;
font-size: 0.875rem;
padding-left: 26px;
text-align: left;
line-height: 1.25rem;
}
.icon {
padding: 0;
width: 18px;
height: 18px;
font-size: 18px;
border-radius: 50%;
transform: translateY(2px);
position: absolute;
top: 0;
left: 0;
}
.label {
display: block;
margin-right: 4px;
color: #007dbb;
}
.subtext { color: #686868; }
<div class="link">
<i class="icon">Icon</i>
<div class="text-wrapper">
<span class="label">Some label which can span at most 2 lines</span>
<span class="subtext">(optional)</span>
</div>
</div>
Instead of having two separate span for title and subtitle. You can have one parent for title and add subtitle span inside it.
.link {
display: flex;
flex-direction: row;
}
.link i {
margin-right: 10px;
}
.text-wrapper {
display: flex;
width: 175px;
}
.text-wrapper p {
margin-top: 0;
}
.text-wrapper .subtitle {
color: blue;
font-style: italic;
}
<div class="link">
<i class="icon">Icon</i>
<div class="text-wrapper">
<p class="title">Some label which can span at most 2 lines
<span class="subtitle">(optional)</span>
</p>
</div>
</div>
Am trying to do the same as the photo shows but I don't really know how to do that
So I should be able to have that line with any fontawesome icon in the middle.
Here my initial markup:
<h1>Welcome</h1>
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
}
h1:after {
content: '\f209';
font-family: FontAwesome;
display: block;
}
Here my fiddle
Hope you can help.
By giving your h1 a border-bottom and positioning your :after icon absolute in the center inside it. Also apply a white background to make sure the line gets interrupted.
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
h1:after {
content: '\f209';
position: absolute;
font-family: FontAwesome;
background-color: #FFF;
display: block;
margin-left: 50px;
}
Update fiddle
Well... the accepted answer works fine, but it involves set widths, and will need to be rewritten to cater for longer text in the heading. The following works regardless of width of text (it does, however, involve a little bit more HTML):
https://jsfiddle.net/jx4dv11g/3/
h1 {
font-size: 25pt;
margin: 0 auto;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
text-align: center;
display: inline-block;
}
.headericon {
display: inline-block;
position: absolute;
}
.headericon i {
display: block;
margin-top: -25%;
background: white;
transform: translate(-50%,0);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>Welcome to this page<br><span class="headericon"><i class="fa fa-hand-peace-o"></i></span></h1>
I'll suggest you to use following HTML structure for this:
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
Apply a class on h1 and use pseudo elements :before and :after to draw lines around icon.
This will allow you to have one time generic styling for all similar places in your web page. If you wants to use different icon in some other heading then all you need is just change the font awesome icon in that header.
body {
text-align: center;
margin: 0;
}
.styled-heading {
text-align: center;
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
position: relative;
overflow: hidden;
}
.styled-heading .fa {
display: block;
margin: 0 auto;
}
.styled-heading:before,
.styled-heading:after {
position: absolute;
background: black;
margin-left: 30px;
width: 999px;
height: 1px;
content: '';
bottom: 12px;
left: 50%;
}
.styled-heading:after {
margin-right: 30px;
margin-left: 0;
right: 50%;
left: auto;
}
.orange {
background: orange;
}
.green {
background: green;
}
.blue {
background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
<div class="orange">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-home"></span>
</h1>
</div>
<div class="blue">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-globe"></span>
</h1>
</div>
<div class="green">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-power-off"></span>
</h1>
</div>
I got a table and I would like to have different text boxes when hovering on cells.
<div class="plan">
<h2 class="title">Premium</h2>
<div align="center">
<p class="plan-price">499<span>€</span></p>
</div>
<ul class="plan-features">
<li><strong>Hello1</strong></li>
<li><strong>Hello2</strong></li>
<li><strong>Hello3</strong>></li>
<li><strong>Hello4</strong></li>
<li><strong>Hello5</strong></li>
</ul>
Start Now
</div>
I would like to show a box with some text when for example a user move the pointer over Hello1.
This is the css code
.plan-features {
margin-bottom: 20px;
line-height: 2;
font-size: 12px;
color: #999;
text-align: center;
}
.plan-features > li > strong {
font-weight: bold;
color: #888;
}
.box:hover{
text-align: center;
color: white;
width: 200px;
margin: 10px -12px;
height: 100px;
background-color: rgba(0,0,0, 0.8);
}
I tried to add this to the first <li> tag
<ul class="plan-features">
<div class="box"><li><strong>Hello1</strong></li></div>
but obviously the box is shown with the text "Hello1", how can i hide "hello1" and add some other text?
You can do something like this! i tried to implement according to your requirements. But do explain what are you trying to achieve from this. Should there be different text for each li element? There are other ways too. Which would be simpler than this
HTML
<div>
<strong class="overlap hoverOn">Hello1</strong>
<strong class="overlap hide">someText</strong>
</div>
CSS
div
{
position:relative;
}
.overlap
{
position:absolute;
top:0; left:0;
}
.hide {
display: none;
background: red;
}
.hoverOn:hover + .hide {
display: block;
}
JSfiddle Sample
Cheers!
Try something like this:
HTML
<li><strong hover-text="Some text1">Hello1</strong></li>
CSS
strong:hover {
font-size: 0;
}
strong:hover:before {
font-size: 12px;
content: attr(hover-text);
}
Full code here: https://jsfiddle.net/5qkruhuc/
I found this solution using JavaScript, but the <div id="mynav" class="box"> is always shown except when I click on "x". Instead I want that the box is shown only when I click on "Hello1" and closed after have clicked on the "x"
Here's the code
JavaScript:
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
CSS:
.plan-features {
margin-bottom: 20px;
line-height: 2;
font-size: 12px;
color: #999;
text-align: center;
}
.plan-features > li > strong {
font-weight: bold;
color: #888;
}
.box{
text-align: center;
color: white;
width: 200px;
margin: 10px -20px;
height: 100px;
background-color: rgba(0,0,0, 0.8);
overflow-x: hidden;
transition: 0.5s;
}
.closeButton {
color: yellow;
top: 20px;
right: 45px;
}
HTML:
<ul class="plan-features">
<div id="myNav" class="box">
x
<br />Some Text
</div>
<li onclick="openNav()"><strong>Hello1</strong></li>
<li><strong>Hello2</strong></li>
<li><strong>Hello3</strong></li>
<li><strong>Hello4</strong></li>
<li><strong>Hello5</strong></li>
</ul>
Simply do this
HTML Code:
<div class="plan">
<h2 class="title">Premium</h2>
<div align="center">
<p class="plan-price">499<span>€</span></p>
</div>
<ul class="plan-features">
<li><strong>Hello1</strong></li>
<li><strong>Hello2</strong></li>
<li><strong>Hello3</strong>></li>
<li><strong>Hello4</strong></li>
<li><strong>Hello5</strong></li>
</ul>
Start Now
</div>
CSS Code :
.plan-features {
margin-bottom: 20px;
line-height: 2;
font-size: 12px;
color: #999;
text-align: center;
}
.plan-features li strong:hover {
text-align: center;
color: white;
width: 200px;
margin: 10px -12px;
height: 100px;
background-color: rgba(0,0,0, 0.8);
}
Working example: https://jsfiddle.net/rajnikpatel/e7rrk9xy/
In each list item I have a text box within a div element.
<html>
<body>
<!-- Window -->
<div id="sample_container_id">
<div class="bucket" id="defaultBucket">
<h3>Default Bucket</h3>
<input type="button" value="Add" class="button">
<div class="innerBucket">
<ul id="tasks">
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
</ul>
</div> <!-- innerBucket -->
</div> <!-- defaultBucket -->
</div>
</body>
</html>
This is the result:
body
{
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p
{
color: #333;
}
#sample_container_id
{
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
margin: 0px;
}
.innerBucket
{
width: 290px;
height: 355px;
margin-top: 40px;
margin-left: 5px;
position: relative;
background-color: white;
}
.bucket
{
width: 300px;
height: 400px;
background-color: #ddd;
position: absolute;
}
.bucket h3
{
float: left;
padding-left: 10px;
padding-top: -10px;
}
.bucket ul
{
margin: 0;
padding-left: 30px;
position: relavtive;
list-style: none;
}
.bucket ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
display: block;
position: relative;
}
.bucket .button
{
background-color:#fbb450;
border:1px solid #c97e1c;
float: right;
margin: 5px;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
Result
As you may notice the first item is indented, and I would like the list items to all be aligned on the left. How do I fix this with the CSS (there probably is a lot of things wrong with my CSS, I was trying everything)?
EDIT
I added some more code. You should be able to replicate the problem now.
I didn't want to post a wall of code :)
Solution
I found the solution to the problem. The problem was actually the <h3> element. The bottom margin was forcing the first element off to the side.
Adding this fixed the problem:
.bucket h3
{
...
margin-bottom: 0;
}
Don't float the divs, if you do make sure to clear them or you get
what FakeRainBrigand got in his pen.
Spell relative right For that
matter take the positioning out of that code, it's pointless.
list items by definition are block elements, you don't need to declare
that either.
Close your input tags.
The float is likely the issue, pushing the divs against some invisible element.
.TaskDiv
{
margin: 0;
padding: 0;
}
ul
{
margin: 0;
padding-left: 30px;
list-style: none;
}
ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
}
Example: http://jsfiddle.net/calder12/Yw4tB/
I found the solution to my own problem. The issue was the margin of the header forcing the div over (see the end of my question). The solution was simple once I figured that out.
Simply adding this to the h3 styling fixed my problem:
margin-bottom: 0;
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?