First of all, this is the guideline aswell as what I want to achieve:
It doesn't need to look a 100% alike but at least one space at each EndOfLine should be given. Well, this is what happens when I try to do it:
As you can see, the end of the first line as well as the beginning of the second line have no space to the border. The start of the first line and the end of the second line on the other hand, do have a space.
Here is my HTML- & CSS-Markup.
<div class="headline-h2">
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h2>
</div>
h2 {
background-color: #000000;
clear: left;
color: #FFFFFF;
display: inline;
float: left;
font-size: 14px;
font-weight: normal;
padding: 4px;
position: relative;
}
.headline-h2 {
float: left;
margin-bottom: 28px !important;
width: 100%;
}
I already tried a few things but I cannot for my life work this thing out.
I also have to add that the text is variable, therefore it could be something completely different if the customer wants it.
Also it needs to be said that we EXPLICITLY need this for an inline-element. I know that it works with block.
Why not just add padding to your h2:
h2 {
background-color: #000000;
clear: left;
color: #FFFFFF;
display: inline-block;
float: left;
font-size: 14px;
font-weight: normal;
position: relative;
padding-left: 5px;
padding-right: 5px;
}
Related
I am currently facing a problem. My grid items move around or the layout doesn't appear as intended when I resize the browser window or activate a different toolbar. How can I change this for a desktop page so that the layout stays the same, i.e. adapts to the browser window and not everything shifts? Especially the text and buttons. Hier meine Testseite: test
I've tried all possible widths and heights. vh, vw, rem, em and various blogs and forums searched but the solution was not there. Media queries also did not lead to success.
CSS
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
font-size: calc(12px + (22 - 12) * ((100vw - 1024px) / (1920 - 1024)));
color: #000;
overflow: scroll;
}
.wrapper {
height: 100%;
width: 100%;
max-width: 1920px;
margin: 0 auto;
}
p {
text-align: left;
}
.loading {
margin: 0 auto;
width: 100%;
height: 100%;
}
.loading:hover {
background-image: url(img/loading.gif);
background-repeat: no-repeat;
background-size: 25% auto;
background-position: center center;
padding-top: 5%;
}
.header {
display: grid;
grid-template-rows: 5.25% 34.4% 29% 13.3% 5.2%;
grid-template-columns: 58.7% 23.45% 17.85%;
grid-template-areas:
". . ."
". a ."
"b a ."
"c a ."
". . .";
background-image: url(img/test_header.jpg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
max-height: 1080px;
}
.header_a {
grid-area: a;
}
.header_b {
grid-area: b;
padding: 0 3% 0 13%;
}
.header_c {
grid-area: c;
padding-left: 13%;
}
input[type=text], input[type=button] {
padding: 0.5em;
background: #000;
border: 1px solid #000;
outline: none;
font-size: 1em;
color: #fff;
}
input.button {
width: auto;
cursor: pointer;
}
input.button:hover {
background: #fff;
border: 1px solid #000;
color: #000;
transition: all 0.5s ease;
}
HTML
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Demo.</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="header_a"><div class="loading"></div></div>
<div class="header_b"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing.</p></div>
<div class="header_c"><input class="button" type="button" name="download" value="Download" onClick="window.open('https://www.eazyrogue.de/test.html', '_blank')"; /></div>
</div>
</div>
</body>
</html>
<header_a> is not valid HTML
check https://developer.mozilla.org/en-US/docs/Web/HTML/Element for valid HTML tags or run through HTML validator.
How can I style a blockquote such that there is a vertical bar at the side? I'm looking for something like Stack Exchange's blockquote. Screenshot:
This is what I have tried so far:
blockquote {
position: relative;
margin: 1em;
padding: 0.5em 1.5em;
color: gray;
}
blockquote:before {
display: block;
position: absolute;
content: " ";
bottom: 5px;
top: 5px;
left: 0;
border-left: 4px solid gray;
}
This seems to work, but I'm not too sure because I am not very familiar with CSS. Are there bugs in my solution? How can it be improved?
Just add border-left to the blockquote css and color it grey.
blockquote {
background: #f9f9f9;
border-left: 3px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
blockquote p {
display: inline-block;
}
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>
This is my code:
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
div {
height: 100vh;
}
#one {
display: flex;
width: 100%;
}
#two,
#four {
width: 45px;
background-color: blue;
}
#three {
width: 100%;
display: flex;
}
#button,
#text {
border: 1px solid blue;
margin: 10px;
}
#text {
width: 100%;
/* overflow: auto;
white-space: nowrap; */
}
<div id="one">
<div id="two">
</div>
<div id="three">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div id="button">Button</div>
</div>
<div id="four">
</div>
</div>
I want to add white-space: nowrap; for the text (#text), but it destroys the layout, the areas with the blue backgrounds get lost. I saw that adding min-width: 0; or min-height: 0; could help, but it doesn't work in this case.
Has somebody an idea to fix that? Would be very thankful. :)
For clarifying: The text from #text should stay in one line, that's all.
What is happening?
The divs two, three and four are had the flex property set to its default values:
div {
flex-grow: 0;
flex-shrink: 1;
flex-base: auto
}
Which means that for each div should: calculate the "best" width (flex-base: auto), if there is enough space for the three divs there is no need to grow to fill it (flex-grow: 0), if there isn't enough space shrink them proportionally (flex-shrink: 1).
When you put white-space: nowrap; in the three div, there is not enough space (since it "best" width will be as much as is needed to hold the single long line of text.
Solution:
Add flex-shrink: 0 to the blue divs, and flex-grow: 1 and overflow: auto to the central div. This way, the blue divs will always have 45px width, and the central one will always fill the remaining space.
UPDATE
Since you now have a new div and button inside div three, there is a few additional changes: We'll make div three also a flex container, and set flex-grow and flex-shrink to appropriate values for the inner text and button.
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
div {
height: 100px; /* You'll probably want a lower height */
}
#one {
display: flex;
width: 100%;
}
#two,
#four {
flex-shrink: 0; /* no shrink */
width: 45px;
background-color: blue;
}
#three {
display: flex;
flex-grow: 1; /* fill all available space */
width: 0px; /* will grow from 0px to fill all space*/
}
#text {
flex-grow: 1; /* fill all available space */
border: 1px solid blue;
margin: 10px;
white-space: nowrap; /* moved from "#three" */
overflow: auto; /* moved from "#three" */
}
#button {
flex-shrink: 0; /* no shrink */
border: 1px solid blue;
margin: 10px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div id="button">Button</div>
</div>
<div id="four">
</div>
</div>
According to MDN, setting white-space: nowrap "suppresses line breaks (text wrapping) within the source." This means that all of your line breaks will be gone for that element and it will go on horizontally as long as there is text.
But to keep everything within the viewport and keep the blue bars around the text, you should first wrap your Lorem Ipsum text in a p tag or other text element, and then change your CSS to something like this:
:root {
--bar_width: 45px;
}
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
div {
height: 100vh;
}
#one {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100vw;
}
#two,
#four {
width: var(--bar_width);
background-color: blue;
}
#three p {
max-width: calc(95vw - (2 * var(--bar_width)));
white-space: nowrap;
overflow: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div id="one">
<div id="two">
</div>
<div id="three">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="four">
</div>
</div>
</body>
</html>
This adds an overflow property set to scroll so that the text can be reached without it streching out the viewport. I also set the max width the element can take up so that CSS knows when to start cutting off the text. I also added flex-direction: row; justify-content: space-between; to your #one selector so that the elements space out horizontally.
You can now change the max-width property set in the #three p selector to any value you want and the text (with scroll) will be centered between the blue bars.
You need to set the flex-basis property of div#three, div#two, and div#four to something like 33.3%
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
You're also setting the height of all divs to 100vh, and when the overflow occurs on your inner block elements, it doesn't know where to stop unless you truncate the text: https://css-tricks.com/flexbox-truncated-text/
* {
font-size: 40px;
font-family: Arial;
color: blue;
text-transform: uppercase;
}
#one {
display: flex;
width: 100%;
}
#two,
#four {
flex-basis: 33%;
width: 45px;
background-color: blue;
}
#three {
width: 100%;
flex-basis: 33%;
white-space: nowrap;
overflow-x: hidden;
/* white-space: nowrap; */
}
<div id="one">
<div id="two">
</div>
<div id="three">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div id="four">
</div>
</div>
I want to create a custom alert box with bootstrap.
But the vertical aligment of the text and the icon, does not work. So here`s the code:
HTML:
<div class="alert-box alert-box-info text-center clearfix" style="display: inline-block;">
<i class="fa fa-info text-info pull-left"></i>
<div class="text text-info"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
</div>
CSS:
.alert-box
{
margin: 20px 0;
border: 1px solid #dbdbdb;
display: inline-block;
height: 100px;
}
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
display: table-cell;
vertical-align: middle;
}
.alert-box .text {
margin: 0px;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.alert-box-info
{
background: #f4f8fa;
border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4
{
color: #5bc0de;
}
The jsFiddle Demo
Can somebody tell me, why the vertical alignment does not work and how I can fix that?
Answer was completely updated as a result of the answer to this question.
Your layout should be achievable with flex-box. Just add on the container:
display: flex;
align-items:center;
Anything table related of vertical align related should be removed from all places. You can create your desired layout by forcing table layout on some elements, but that is not the way to go here since you don't have a real table and tabular data.
Note: We need to explicitly add flex-shrink: 0 on the small columns on the edges because of a Chrome bug (just fixed for FF 34) that causes incorrect shrinking. According to the specs, there should not happen any shrinking by default.
Demo:
.alert-box
{
margin: 20px;
border: 1px solid #dbdbdb;
display: flex;
align-items:center;
height: 100px
}
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
flex-shrink: 0;
}
.alert-box .text {
margin: 0px;
flex-grow: 1;
}
.alert-box-info
{
background: #f4f8fa;
border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4
{
color: #5bc0de;
}
.alert-btn {
flex-shrink: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert-box alert-box-info text-center clearfix">
<i class="fa fa-info text-info"></i>
<div class="text text-info"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
<div class="alert-btn">Test</div>
</div>
Simplest way is to change style of div:
<div class="alert-box alert-box-info text-center clearfix" style="display: table-cell; vertical-align: middle;">
JavaScript is the best option here. I've added transition for line-height for smooth alignment.
Fiddle
function doMath() {
document.getElementsByClassName('fa-info')[0].style.lineHeight = document.getElementsByClassName('text')[0].clientHeight + 'px';
}
doMath();
window.onresize = doMath;
.alert-box {
margin: 20px 0;
border: 1px solid #dbdbdb;
display: table;
}
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
display: table-cell;
transition: line-height 0.1s;
}
.alert-box .text {
padding: 20px;
margin: 0px;
display: table-cell;
width: 100%;
vertical-align: middle;
}
.alert-box-info {
background: #f4f8fa;
border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4 {
color: #5bc0de;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="alert-box alert-box-info text-center clearfix" style="display: inline-block;"> <i class="fa fa-info text-info pull-left"></i>
<div class="text text-info">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
The easiest way to vertical align a text if it has only 1 row is the line-height properties:
.alert-box .fa {
font-size: 40px;
padding-left: 20px;
line-height: 100px;
}
http://jsfiddle.net/Clear/qnj3ohqh/15/
I wanted to add a multiple column layout to one of my parent div's to display small widgets. I started of with 3 columns left, middle and right.
I tried to get the columns to display next to each other by using:
display: inline-block;
vertical-align: top;
But it didn't work JS Fiddle
I also tried to use:
float: left;
But again no success JS Fiddle
I got it right by using:
display: table-cell
Now my problem is that when using this last method it sets a minimum width after which it would not scale any smaller and it adds a scroll bar to the bottom of the page which I do not want.
I would like to know why the first two methods did not work in my scenario as I have found other answers on SO that shows that the first two methods are possible solutions.
CSS
#left_widget_column {
border: 0px;
margin: 10px 65% 10px 2%;
padding: 0px;
width: 32%;
}
#middle_widget_column {
border: 0px;
margin: 10px 34% 10px 34%;
padding: 0px;
width: 31%;
}
#right_widget_column {
border: 0px;
margin: 10px 2% 10px 65%;
padding: 0px;
width: 32%;
}
HTML
<div id="left_widget_column">
<h2>Widget 1:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>
<div id="middle_widget_column">
<h2>Widget 2:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>
<div id="right_widget_column">
<h2>Widget 3:</h2>
<p>Fusce felis nisl, egestas a dolor sit amet, mollis cursus diam. Nulla malesuada ullamcorper ante. Vestibulum pulvinar, metus a congue eleifend, magna eros mattis lectus, sed vestibulum neque augue vel risus.</p>
</div>
you should not using:
margin: 10px 34% 10px 34%;
http://jsfiddle.net/Whysg/2/
when using float:left the next Div location inside previous div so that's not need margin or ...
You should not use 3 id's: 1 class for the layout is enough. You can add id later on to use it in js, for example.
DEMO
.col {
box-sizing: border-box;
float: left;
width: 32%;
padding: 10px;
margin-left: 2%;
}
.col:first-child {
margin-left: 0;
}
Have you not thought of using floats instead? Remove the margins.
#left_widget_column {
border: 0px;
padding: 0px;
float: left;
width: 32%;
}
#middle_widget_column {
border: 0px;
padding: 0px;
width: 32%;
float: left;
}
#right_widget_column {
border: 0px;
padding: 0px;
width: 32%;
float: right;
}
See it here LIVE: http://jsfiddle.net/Whysg/3/