I have three different elements. Two divs and 1 button. I'm trying to make them look nice, and not overlaps each other, but when the content of one div is bigger, everything is ruined. I tried to use overflow and min-height properties, but it didn't work. Any advice?
.lk .popup .popup-masterclass {
position: relative;
height: 48px;
}
.lk .popup .masterclass-text {
position: absolute;
top: 0;
left: 138px;
}
.lk .popup .popup-roundtable {
position: relative;
height: 48px;
}
.lk .popup-close-text {
font-size: 12px;
color: rgba(14, 17, 22, 0.5);
text-align: center;
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: 80px;
left: 0;
right: 0;
}
#media screen and (min-width: 768px) {
.lk .popup .close-mobile {
display: none;
}
}
Inside .twig they all are next to each other like this:
<div class="popup-masterclass"></div>
<div class="popup-roundtable"></div>
<div class="popup-close-text close close-mobile">{{ t("lk.close.popup") }}</div>
And all of that looks like this:
Related
I am trying to understand the position in html and css by playing around with an example I have made up. In this example what I have created 3 divs which show color blocks. I am trying to make the first 2 blocks span the width of the screen and the third do just sit as it is on screen. I am trying to have all 3 blocks just stacked on top of each other.
in my html i have created 3 classes:
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
In my css i have defined the colors, shapes and positions of these blocks:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: static;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
The red block is on top followed by blue then green. It looks like the following picture:
The problem comes when I try and change the positioning in order to make red and box span the width of the screen. i change the red box css as follows:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
what happens is the redbox spans the width of the screen but the other two boxes shift upwards. how can i stop the blue box and the green box from shifting upwards?
The problem is caused by position: fixed; which you don't even need.
I think what you actually want is to set body { margin: 0; }.
According to W3Schools:
Most browsers will display the <body> element with the following
default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
You can see in the snippet below, that if you add this to your CSS (i.e., remove the margin from the body), all three boxes become full viewport width (even though the width is set to 100%!).
See the snippet below.
body {
margin: 0;
}
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred"></div>
<div class="color-stripblue"></div>
<div class="color-stripgreen"></div>
you could add margin-top:20px; to .color-stripblue
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
.color-stripblue {
margin-top:20px;
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
So I have two <div> next to each other and I want to make it so when you have little space (Phone for example) it puts the second <div> under the first one with some space. When you're on a 16:9 ratio computer it has them next to each other.
body {
background: #FFFFFF;
}
.box {
float: left;
margin: 10px;
padding: 25px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
div {
max-width: 2480px;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 50px;
top: 0px;
color: #2D2E32;
background: #2D2E32;
}
/*Box1*/
div2 {
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
left: 200;
}
div3
/*Box2*/
{
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
right: 10%;
}
img {
max-height: 800;
max-width: 2480;
z-index: 1;
width: 100%;
height: 63%;
left: 10%;
}
div4 {
max-height: 59%;
z-index: -1;
position: absolute;
width: 100%;
height: 59%;
top: 5%;
color: #17181A;
background: #17181A;
left: 0;
}
div5 {
max-width: 2480;
max-height: 25;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 25px;
color: #2D2E32;
background: #2D2E32;
}
<body>
<div id="page1">
<!--Task-->
<a id="Task" class="smooth"></a>
</div>
<div2 id="page2">
<!--Box1-->
<a id="Info1" class="smooth" class="box"></a>
</div2>
<div3>
<!--Box2-->
<a id="Info1" class="smooth" class="box"></a>
</div3>
</body>
CSS Media Queries will solve this problem by allowing you to create styles that will be conditionally applied based on a query that you specify. Here's an example:
/* Develop "mobile-first, meaning that your normal styles should reflect how you want
the content to look on a mobile device
div elements will normally appear on their own line, but let's add a little space between
the lines
*/
div { margin:1em; }
/* When the viewport is not bigger than 760px and it is rotated to be wide
put divs next to each other and only move them down when the full width
of the viewport is used up */
#media screen and (max-width:760px) and (orientation:landscape) {
div {
float:left;
margin:auto; /* reset margins back to normal */
}
}
<div>Some div content</div>
<div>Some div content</div>
I recently built a slide-out menu using jQuery, but the list containing the menu items has been behaving strangely. No matter how I change the CSS, the various list elements always stay in the same place, right on top of each other. The page in question is this.
.slide-menu {
width: 30%;
left: -30%;
position: absolute;
z-index: 1;
background-color: white;
}
.dlink {
font-size: 16px;
position: absolute;
width: 30%;
display: block;
}
#slide-list{
list-style: none;
top: 0%;
margin-left: 0px;
}
.sli-list-item {
width: 30%;
}
#slide-panel {
height: 100%;
top: 0%;
}
This is the relevant CSS.
Change your .dlink class to this:
.dlink {
font-size: 16px;
position: relative;
width: 30%;
display: block;
}
position: absolute; made them line up on top of each other.
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
I am trying to change the positions of the buttons which will scale down to mobile relative to the image div. I tried position/absolute; but it didn't take effect. Neither did the buttons stay relative inside the image div. I am not sure if the media queries will do the job or not. Any solutions?
<div id="hero-wrapper" class="main_wrapper hero">
<img src="images/home-hero-image.jpg" alt="fruute">
<div class="herobuttons"><div id="hero-shop-cookies" class="hero-btn">shop cookies</div>
<div id="hero-shop-gifts" class="hero-btn">shop gifts</div></div>
</div>
CSS
#hero-shop-cookies {
top: 398px;
left: 550px;
}
#hero-shop-gifts {
top: 398px;
left: 715px;
}
.main_wrapper hero{
width: 100%;
}
#hero-wrapper{
position: relative;
}
.hero-wrapper > .hero-btn a{
position: absolute;
left: 0;
right: 15px;
bottom: 20px;
top: 0;
background-color: red;
}
#media screen and (min-width: 768px) {
#nav-menu{
display: none;
}
#navigation li, #navigation a{
float:left;
}
.main_wrapper hero, .hero-btn{
width: 100%;
}
.herobuttons{
position: relative;
left: 0;
top: 0;
}
#slideshow-area{
width: 300px;
}
}
Change min-width: 768px; to max-width: 768px;