I've created a list style navigation and each hyperlink can be multiple lines, after each hyperlink element I added a pseudo element 'arrow' after, would it be possible to align the pseudo element vertically regardless of the hyperlink height?
The requirement would be for this to work in IE8 & above.
The Mark-up:
<ul>
<li>
<a href="#">
<h3 class="title">Cover</h3>
<p class="subtitle">Lorem ipsum dolor sit</p>
</a>
</li>
<li class="current">
<a href="#">
<h3 class="title">Lorem ipsum dolor sit amet</h3>
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores cum!</p>
</a>
</li>
<li>
<a href="#">
<h3 class="title">Lorem ipsum dolor sit amet, consectetur</h3>
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis.</p>
</a>
</li>
<li>
<a href="#">
<h3 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit.</h3>
</a>
</li>
</ul>
The CSS:
body {
background: #666;
padding: 5em;
}
ul {
background: #fff;
list-style: none;
}
li {
border-bottom: 1px solid #ccc;
position relative;
}
.current a {
border-color: #000;
}
a {
border-left: 8px solid #ccc;
overflow: hidden;
display: block;
line-height: 1.3;
padding: .75em;
position: relative;
text-decoration: none;
color: #000;
}
a:after {
content: '>';
color: #ce4300;
float: right;
font-size: 1.125em;
line-height: 1;
position: absolute;
right: 1em;
}
h3 {
float: left;
font-size: .875em;
margin: 0 1em 0 0;
}
.subtitle {
color: #555;
clear: left;
float: left;
font-size: .875em;
font-style: itatlic;
}
The current prototype:
http://jsfiddle.net/yVJbL/
Here you go:
a:after {
content:'>';
color: #ce4300;
font-size: 1.125em;
position: absolute;
line-height: 0;
right: 1em;
top: 50%;
bottom: 50%;
}
Surprisingly simple :D
I thing best solution to make all browsers happy is to use a background-image (this little arrow won't be so big image) and background-position: right center (or so). You are open to hover efect with this solution as well. Background image can be placed also in padding area so there won`t be any overflow.
Hope this helps you.
Related
I am trying to change the color of a bullet point. You'll better understand my request with the image below.
So far, I successfully made it, but I can't find a way to change the bullet point to red.
Here's my CSS :
h3#one {
display: flex;
flex-direction: column;
}
h3#one::before {
content: '1.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;
}
<h3 id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
Is there a way to make it with CSS?
I don't think that you can achieve this with a pseudo class but you could do something like this.
h3 {
display:block;
}
h3 .red {
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;
color: red;
}
<h3>1<span class="red">.</span></h3>
<h3> Test</h3>
If you want only the dot red you can do it with a span like this: <h3>Your text<span style="color: red">.</span></h3>
You can. You just shouldn't be doing it with the '1' in the pseudo-class too. Instead, put the value inside the tag and use the ::before only to style the dot.
h3 {
display: flex;
flex-direction: column;}
h3::before {
position: absolute;
top: 0;
margin-left: 10px;
color: red;
content: '.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;}
<html>
<body>
<h3>1</h3>
</body>
</html>
If you don't want this approach, I suggest using the span tag to do the trick.
<h3>1<span style="color: red">.</span></h3>
You could do it with a gradient background and background-clip: text.
h3 {
display: flex;
flex-direction: column;
}
h3::before {
counter-reset: num var(--num);
content: counter(num) '.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;
align-self: start;
background-image: linear-gradient(90deg, red, red), linear-gradient(90deg, black, black);
background-size: 0.25em, auto;
background-position: right;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
<h3 style="--num: 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 42">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 256">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
But this isn't that reliable. The background-clip: text property is still under a prefix on some browsers. And you need to manually set the gradient cutoff between the number and the dot, depending in the font.
I want to achieve something like this:
000 Lorem ipsum
dolor
0 Lorem ipsum
dolor
This is the code I'm working with:
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul>
CSS:
li:before {
content: "0";
}
li:first-child:before {
content: "000";
}
ul {
width:100px;
list-style: none;
}
Can you help me with CSS to have the text stay equally away from the before content?
"Lorem" and "dolor" need to stay in the same "vertical line".
https://jsfiddle.net/ga6r8qsz/
Thank you.
You can do this using absolute positioning on the before elements. This will ensure that your li items will remain vertically in line.
li {
position: relative;
padding-left: 15px;
margin-bottom: 15px;
}
li::before {
content: "0";
position: absolute;
width: 35px;
left: -35px;
}
li:first-child::before {
content: "0000";
}
ul {
width: 100px;
list-style: none;
}
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul>
make the pseudoelements ::befores like blocks, in that way you can add the width of them and control the view of the list in that way
here example:
li:before {
content: "0";
display:inline-block;
width:35px;
}
li:first-child:before {
content: "000";
display:inline-block;
width:35px;
}
ul {
width:300px;
list-style: none;
}
<ul>
<li>some text</li>
<li>some text more</li>
</ul>
Using the display: flex property on li elements will not only give equal spacing between the :before pseudo elements and the li tags, but will also make the li tags left aligned on new lines as shown below.
li {
display: flex;
}
li:before {
content: "0";
width:70px;
}
li:first-child:before {
content: "000";
}
ul {
width:150px;
list-style: none;
}
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
</ul>
Here is an idea where you don't need to use any fixed value for width. Consider a table layout and it will work with any pseudo element content:
li:before {
content: "0";
display:table-cell;
padding-right:5px;
}
li:first-child:before {
content: "000";
}
ul {
width:200px;
list-style: none;
display:table;
}
li {
display:table-row;
}
<ul>
<li>Lorem ipsum dolor sit amet, sed do eiusmo</li>
<li>Lorem ipsum dolor sit amet elit</li>
</ul>
I want to place text next to an image and add padding to it. I have both text and image in one box, so that may be problem. I also need site to be mobile friendly.
Here is my code:
.content-title {
font-size: 50px;
}
#section-a ul {
list-style: none;
margin: 0px;
padding: 0;
}
#tiso {
position: static;
padding: 0px;
height: auto;
float: left;
max-width: 800px;
max-height: 800px;
}
#tiso_text {
padding: 3em;
text-align: center;
}
<section id="section-a" class="grid">
<div class="content-wrap">
<ul class="obr">
<img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
<h1 class="content-title">Jozef Tiso</h1>
<li class="textcontent">
<p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate obcaecati et porro quidem iure, odio.
</p>
</li>
</ul>
</div>
</section>
Now, it works when the browser is resized to minimum, but it doesn't work on full. I know why, see image below, I just don't know how to fix that.
Image of what I have, and what I need.
so here is my solution, i hope its that what you wanted..
.content-title {
font-size: 50px;
text-align: center;
}
.item {
max-width: 300px;
float: left;
padding: 20px 3rem;
}
#tiso {
position: static;
padding: 0px;
height: auto;
float: left;
max-width: 800px;
max-height: 800px;
display: block;
}
#tiso_text {
text-align: center;
}
<section id="section-a" class="grid">
<div class="content-wrap">
<div class="box">
<img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
<div class="item">
<h1 class="content-title">Jozef Tiso</h1>
<p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate obcaecati et porro quidem iure, odio.
</p>
</div>
</div>
</div>
</section>
I want to achieve this:
I have achieved this:
Why is the background of footer not showing correctly. Also why is the margin-bottom of 'home-features' section not working? The page is live at http://goo.gl/OpAB4V
Markup:
<section id="home-features">
<article class="home-feature-box">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
<article class="home-feature-box">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
<article class="home-feature-box-right">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
</section>
<footer>
<p>Copyright © 2014, Tellerest. All Rights Reserved.</p>
</footer>
CSS:
/* home features section */
#home-features { margin: 40px auto 0 auto; width: 950px; text-align: center;}
.home-feature-box { width: 256px; float:left; margin-right: 91px;}
.home-feature-box-right { width: 256px; float:right;}
#home-features p { font-family:Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; color: #4f4f4f;}
/* footer */
footer { background-color: #fafafa; border-top: 1px solid #e0e0e0; text-align: center; font-family:Verdana, Geneva, sans-serif; font-size: 11px; font-weight: normal; color: #a3a3a3; padding: 15px 0 30px 0;}
You must clear your floats.
After the last article, add this div:
<div style="clear:both"></div>
Of course, you should simply create a "clear" class instead of having inline styling, but you get the idea.
Upon observation, I see that your #container div also has a fixed height of 1000px. Simply remove that as well.
You have given height:1000px for #container
Remove that height and clear the div
<section id="container">
.
.
.
<div class="clear"></div>
</section>
CSS for clear
.clear {
clear: both
}
Just change your #container class to following code.
#container {
background-image: url("images/tellerest-homepage-design2_01.png");
background-position: center top;
background-repeat: repeat-x;
overflow: hidden;
}
Is possible auto align in line 2 div without size?
The goal is to get something like the image attached.
I can't set percentages (80% and 20%) because the content is dynamic. I can't use tables. Any idea?
Example: http://jsfiddle.net/hKRyG/
<html>
<head>
<style type="text/css">
.navbar {
width: 500px;
background: #ccc;
display:table;
}
.navbar .breadcrumb {
float:left;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}
.navbar .navbutton {
float: right;
}
</style>
</head>
<body>
<div class="navbar">
<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
<div class="navbutton">
<input type="button" value="BUTTON" />
</div>
</div>
</body>
</html>
Thank you!
There you go! To align without defined size you must use table display properties
.navbar {
width: 500px;
background: #ccc;
display:table;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}
.navbar ul{
display: table-cell;
}
.navbutton {
display: table-cell;
vertical-align: middle;
}
Use the following:
<html>
<head>
<style>
.navbar {
width: 500px;
background: #ccc;
display:table;
float: left;
}
.navbar .breadcrumb {
float:left;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}
.navbar .navbutton {
float: right;
}
</style>
</head>
<body>
<div class="navbar">
<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</div>
</div>
<div class="navbutton">
<input type="button" value="BUTTON" />
</div>
<body>
</html>
If you move the button to the top of the markup and give it a float: right;, then add overflow: hidden; to the <div class="breadcrumb"> the button should be flush right and the breadcrumb will take up whatever room remains on the left.
jsFiddle
HTML:
<div class="navbar">
<div class="navbutton">
<input type="button" value="BUTTON" />
</div>
<div class="breadcrumb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>-></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
</div>
CSS
.navbar {
width: 500px;
background: #ccc;
}
.navbar .navbutton {
float: right;
}
.navbar .breadcrumb {
overflow: hidden;
}
.navbar .breadcrumb ul {
margin: 0;
padding: 0;
}
.navbar .breadcrumb li {
list-style: none;
display: inline;
}