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;
}
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.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
How to vertically center text inside p? Thank you.
enter image description here
Flexbox solution - the more modern solution:
https://jsfiddle.net/2zqeL6g8/
The HTML:
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
The CSS:
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
CSS table solution - older method, but works in older browsers ie8+:
https://jsfiddle.net/2zqeL6g8/2/
The HTML:
<div class="todo">
<div class="todo-row">
<div class="todo-cell-left">
<p>TODO 1</p>
</div>
<div class="todo-cell-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
</div>
The CSS:
.todo {
display: table;
border-collapse: collapsed;
width: 100%;
}
.todo-row {
display: table-row;
}
.todo-cell-left,
.todo-cell-right {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
}
.todo-cell-left {
background: #ccc;
width: 100px;
}
.todo-cell-right {
background: #f5f5f5;
}
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
height:100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit .</p>
</div>
</div>
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've this code
.row {
width: 600px;
}
.row div {
display: inline-block;
width: 50%;
float: left;
}
.text {
background-color: lightblue;
}
<div class="row">
<div class="image">
<img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
I want my div .text to have the same height as the image.
I want it responsive no I can't set a height to .text
Thanks for your help !
One option is with Flexbox
body, html {
margin: 0;
padding: 0;
}
.row {
width: 600px;
display: flex;;
}
.text {
background-color: lightblue;
}
img {
vertical-align: top;
}
<div class="row">
<div class="image"><img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
Other one is CSS table
body, html {
margin: 0;
padding: 0;
}
.row {
width: 600px;
display: table;
}
.text {
background-color: lightblue;
display: table-cell;
vertical-align: top;
}
.image {
display: table-cell;
vertical-align: top;
}
img {
vertical-align: top;
}
<div class="row">
<div class="image"><img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
Here is one way using display-table:
.row {
width: 600px;
display: table;
}
.row > div {
width: 50%;
display: table-cell;
vertical-align: top; /* or 'middle' or 'bottom' etc. */
}
.text {
background-color: lightblue;
}
.image img {
display: block;
}
<div class="row">
<div class="image">
<img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
Here is one solution which just uses height:auto; :
.row {
width: 600px;
height: auto;
background-color: lightblue;
}
.image, .text {
display: inline-block;
width: 49%;
}
.image {
background-color: white;
}
.text, .image img {
vertical-align:top;
}
<div class="row">
<div class="image">
<img src="http://placehold.it/250x150">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
</div>
</div>
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.