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.
Related
i'm trying to recreate this element
I've created the following structure:
.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }
.slider-background { background: white;
position: absolute;
top: 10px;
right: 10px;
width: 90%;
height: 90%;
text-align: right;
z-index: 1; }
.slider-background a {
padding: 15px 20px;
display: block;
}
.slider-info {
padding: 45px 30px;
}
.slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }
<div class="slider-container">
<div class="slider-background">
more<br>info
</div>
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100"/>
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
</div>
</div>
But i'm not sure on how to recreate the curved angle on the top div, what would be the best solution to achieve that result?
Here is an idea with pseudo element and skew transformation.
I kept only the relevant for so we can see the trick:
.slider-info {
padding: 45px 30px;
}
.slider-content {
background:
linear-gradient(lightblue,lightblue) bottom/100% calc(100% - 200px) no-repeat;
width: 300px;
margin: 20px auto;
border-radius:20px 0 20px 20px;
position:relative;
z-index:0;
overflow:hidden;
}
.slider-content::after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
height:200px;
background:lightblue;
transform-origin:bottom;
transform:skew(30deg);
border-radius:0 20px 0 0;
}
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100" />
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
Can anyone help me out on how to achieve the following shown below in red?
From what I understand it is a div overlap but I can't seem to figure out how to get it like this.
Add the below mentioned style to .about-lower
position: relative;
padding-top: 15px;
Remove margin-top: 20px and add the following style to .lower-title-container
position: absolute;
top: -26px;
left: 73px;
Updated JSFiddle link is here.
One method using position: absolute
I've adding padding to the container below to ensure it doesn't overlap with the button
body {
font-family: "Helvetica", sans-serif;
margin: 0px 0px 0px 0px;
}
.header-img-container {
background-image: url(../Images/about-header-img.jpg);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
height: 330px;
width: 100%;
}
.header-img {
object-fit: cover;
width: 100%;
height: 100%;
}
.about-middle {
text-align: left;
margin: auto;
width: 80%;
}
.about-middle-text {
line-height: 1.3;
margin-bottom: 50px;
margin-top: 40px;
}
.about-middle-text h2 {
margin-top: 60px;
margin-bottom: 40px;
}
.about-middle-text p {
margin-bottom: 14px;
font-size: 14px;
}
.about-lower {
background-color: #FAF8F8;
text-align: left;
padding-bottom: 30px;
}
.lower-title-container {
width: 80%;
text-align: center;
vertical-align: middle;
margin: auto;
margin-top: 20px;
z-index: 10;
position: relative;
}
.lower-title {
width: 150px;
height: 50px;
background-color: #b2b0c5;
color: white;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -25px;
}
.lower-title p {
font-weight: 100;
font-size: 20px;
vertical-align: middle;
}
.about-eagles-container {
margin-top: 40px;
}
.about-eagles {
border-bottom: 1px solid lightgray;
padding-bottom: 20px;
display: flex;
width: 80%;
align-items: center;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 50px;
}
.eagle-img-container {
margin-right: 30px;
height: 150px;
width: 150px;
}
.eagle-img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 2px;
}
.eagle-img-container:hover {
background-color: rgba(225, 231, 242, 0.8);
}
.eagle-name {
margin-bottom: 30px;
font-weight: bold;
}
<div class="about-middle">
<div class="about-middle-text">
<h3>Rising Eagles</h3>
<p>Lorem ipsum dolor sit amet, populo vocent perfecto has in, phaedrum aliquando omittantur mei in, evertitur intellegebat eum ut. Vel ea nulla mentitum. Id aeterno minimum sea, at est albucius scaevola consequat. Duo facer platonem expetendis eu, eu
quando aliquip constituam sed. Ne invenire suavitate vulputate mei. Vestibulum mi sapien ac nunc vel. Pellentesque nec elit sit ac orci. Ut lectus venenatis eros diam, pellentesque natoque amet lectus felis, cursus laoreet blandit ut nulla vel libero.
Venenatis tristique cras, ut vitae, lectus ornare enim, sapien luctus lacinia, aliquam nibh libero tincidunt ut. Commodo risus amet vivamus, molestie mattis at. Mauris massa, vitae dolor etiam sed. Sit mi dignissim elementum, sit nulla nec arcu
in arcu, reprehenderit sem donec magna, nisl urna non, venenatis turpis risus duis ultrices. </p>
<p> Vitae consul quodsi ea sea, ex graeci accusam copiosae sit. Ei error accumsan mel. Quo id populo melius ceteros. Ex per magna aliquam, eos scripta integre ex. Praesent in eu tincidunt. Commodo magni porta nonummy aliquam enim neque, dapibus phasellus
sed volutpat, dui quam, parturient molestie ante massa bibendum. Pharetra in ut, aliquam pretium rutrum pretium luctus phasellus. Enim sem cras interdum, at dolor in.</p>
</div>
</div>
<div class="about-lower">
<div class="lower-title-container">
<div class="lower-title">
<p>The Eagles</p>
</div>
</div>
<!-- Iterate over accounts and build div for each -->
<div class="about-eagles-container">
<div class="about-eagles">
<div class="eagle-img-container">
<!-- Change url to link to their personal page -->
<img src="../Images/profile-img1.jpg" class="eagle-img">
</div>
<div class="eagle-text">
<p class="eagle-name">Charlie</p>
<p>Lorem ipsum dolor sit amet, nec no errem euismod ponderum. Pro no populo putant audire.</p>
</div>
</div>
<div class="about-eagles">
<div class="eagle-img-container">
<img src="../Images/profile-img2.jpg" class="eagle-img">
</div>
</div>
</div>
</div>
html:
<!-- i put the button above the first div -->
<input id="btn" type="button" value="the button"/>
<div class="about-middle">
css:
add
body {
position: relative;
}
#btn {
left: 75px;
margin: -25px 0 0 20px;
position: absolute;
top: 15px;
}
.about-middle{
border: solid 1px black; /* so it's visible. */
}
Assuming I have a container with a fixed width and height that contains a flexbox like this:
#somecontainer {
background-color: gray;
position: absolute;
left: 70px;
top: 50px;
height: 400px;
width: 400px;
}
#content {
background-color: green;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 2em;
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: stretch;
}
#content header {
background-color: yellow;
flex: 0 0 auto;
}
#content #imagecontainer {
background-color: red;
flex: 1 1 auto;
}
#content #descriptioncontainer {
background-color: cyan;
flex: 0 0 auto;
}
<div id="somecontainer">
<div id="content">
<header>Title</header>
<div id="imagecontainer"><div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Tripod.svg/306px-Tripod.svg.png" alt="" /></div></div>
<div id="descriptioncontainer">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.</div>
</div>
</div>
What do I have to do in order to make browsers reduce the height of the image in the second flex row so far that the remaining content will fit in the flexbox?
I'm not sure why you have absolutely positioned items which are display:flex but, in general, these two properties don't mix so I've removed the majority of that styling.
That said, position:absolute is the answer here but only for the image.
I've also removed an unnecessary extra div wrapping the image
#somecontainer {
background-color: gray;
height: 400px;
width: 400px;
display: flex;
flex-direction: column;
}
#content {
background-color: green;
padding: 2em;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: stretch;
}
#content header {
background-color: yellow;
flex: 0 0 auto;
}
#content #imagecontainer {
background-color: red;
flex: 1 1 auto;
position: relative;
}
#content #imagecontainer img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 100%;
max-height: 100%;
}
#content #descriptioncontainer {
background-color: cyan;
flex: 0 0 auto;
}
<div id="somecontainer">
<div id="content">
<header>Title</header>
<div id="imagecontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Tripod.svg/306px-Tripod.svg.png" alt="" />
</div>
<div id="descriptioncontainer">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.</div>
</div>
</div>
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/
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;
}