I'm designing a website and i'm trying to center elements vertically in a div following this tutorial https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_center-vertical.
The content technically does get centered. Problem is: the content div gets higher than the content itself, so in reality it's not completely centered, giving problems in mobile screens.
Unluckily have no idea how it happens or how resolve it.
Html section:
<div class="banner-item-content">
<img src="https://alto.7180.eu/modules/custombanners/views/img/uploads/b09df371daff098e783367d788f96a20731083b9.PNG" alt="Banner1" class="banner-img">
<div class="custom-html"> <!--div to center-->
<h1 style="text-align: left;"><span style="color: #ffffff;">Prodotto 1</span></h1>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p style="text-align: left;"><span><span>SHOP NOW</span></span></p> </div>
</div>
</div>
CSS that does the centering:
.banner-item-content div.custom-html{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's the link to the website to check it directly: https://alto.7180.eu/it/. You can see the problem in the first banner that says "Prodotto 1" (skip the slider).
I would just like to understand which way i can avoid having this empty space included in the centered div, thanks!
Add display flex to banner item content , it will align center.
.banner-item-content {
display: flex;
}
Related
unaligned images and text
I have attempted to input suggestions from previous questions but it just seems I have been able to successfully find the correct way to align these images with their text underneath.
<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/dayporter2.jpeg">
<h3>DAYPORT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box">
<h3>FLOOR CARE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<img src="./images/janitor2.jpeg">
</div>
</section>
/* boxes */
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .box img{
width: 90px;
}`
You seem to have an unnecessary div tag.
remove the div tag after your 'floorcare1.jpeg' img, here:
<img src="./images/floorcare1.jpeg">
<div class="box"> //remove this
<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box"> <!-- The probleme is here -->
<h3>FLOOR CARE</h3>
Because the .box element which is direct below the image is float left, it will force the image to be float left, because their sibling .box take 30% of the parent and there are remaining 70% width of their .box parent element. You must remove the .box element and every thing will work like you expecting.
Another problem you must close all you open markup
<section>
<div class="container">
<div class="box">
<!-- First box -->
</div>
<div class="box">
<!-- Second box -->
</div>
<div class="box">
<!-- Third box -->
</div>
</div>
</section>
While developing new website for our client (he delivered design and insisted on using flexbox), we've come to element that looks like this (the "Samochody Peugeot" section with 2 little boxes at right):
Grid starts at text in left box, and ends at end of image in right boxes. The only real solution that we can find is to create the gray background using absolute positioned :before pseudo-element, but it seems pretty hacky.
At bigger widths the gray bg should expand to left, but everything else should stay in grid.
Is there any better way to achieve this kind of layout than using :before?
<section class="boxes">
<div class="container">
<div class="boxes__box">
<h3>Samochody<br/>PEUGEOT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
<div class="boxes__box-holder">
<div class="boxes__box boxes__box--small">
<h3>PONAD 20 LAT<br/>DOŚWIADCZENIA</h3>
<a class="btn" href="">O firmie</a>
</div>
<div class="boxes__box boxes__box--small">
<h3>POZNAJ NASZE<br/>USŁUGI</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="btn" href="">Przejdź do strony</a>
</div>
</div>
</div>
</section>
.boxes {
.container {
display: flex;
}
&__box {
width: 68%;
background: orange;
position: relative;
&:first-child:before {
content: '';
height: 100%;
width: 100vw;
background: red;
position: absolute;
right: 100%;
z-index: -1;
top: 0;
}
}
&__box-holder {
width: 32%;
}
}
I have a simple page where the all the content (<h1>, <h2>, <p>, etc.) is contained within a <div>, in order to have the same width.
I like the way the body text looks and want to keep it that way, but I'd like to add a background image to the heading. It should start from the very top of the page (and window, in my case) and end at the baseline of the last line of the heading itself, while also extending in width from the left side of the window to its right. In the following image I illustrated the desired layout. Below it, I've drawn the html hierarchy that I've attempted.
In fact, I've already tried creating a child of <h1> with
width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);
but:
Since the page has z-index: -1;, for some weird bug I can't click on links with relative positioning
I'd prefer not to use vw unites because of browser support.
I still can't manage to extend the background to the top.
The font size of <h1> and its margins are defined in pixels, as you see, but the page still behaves dynamically because as I resize the window, the number of lines of <h1> increases.
HTML
<div class="page">
<h1>Heading</h1>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
body {
height: 100%;
width: 100%;
margin:0px;
}
.page {
font-size: 20px;
width: 90%;
max-width: 70ch;
padding: 50px 5%;
margin: auto;
z-index: -1;
}
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
margin-bottom: 26px;
}
p {margin-bottom: 24px;}
JS Fiddle
Two suggestions:
Separate the h1 and the rest of the body in two different divs. Apply the background to the first div.
<div class="background-here">
<div class="page">
<h1>Heading</h1>
</div>
</div>
<div class="page">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Or you could just apply the background to the body and use background-repeat: repeat-x or bakcground-size: cover. But it depends on how the image was designed.
So I can't figure out how to get this jumbotron div to have the specified background image. It worked before when I had it in another project but when I imported it to another one it just stopped showing up. Everything else works so I though that I just forgot a css style or something but I tried that and I can't seem to locate any errrors. I am using bootstrap but having edited any of the values from that library and it seem to have worked fine in the other project. One thing that might be causing would the version of bootstrap I got this segment of code from a Bootstrap Version 3.0.0 currently I am using Version 3.3.4. Not sure if that has anything to do with it though. As a last note the image works because I have it showing up for different divs on the page.
HTML
<div class="jumbotron">
<div class="container">
<div class="topTitle">
<div>
<div class="col-lg-9">
<h1>Insert <span>Topic</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
background: url('images/intro-bg.jpg') !important;
background-attachment: fixed !important;
}
.jumbotron p {
padding: 20px 0;
}
.jumbotron .topTitle h1 {
margin-top: 50px;
}
Result
So I figured it out. I used the developer tools like how Jim Garrison said to and it revealed that there was nothing overriding it so it should work. So I randomly tryed to put the style in directly into the html like so
<div class="jumbotron" style="background: url('images/intro-bg.jpg'); background-attachment: fixed;">
For whatever reason this appeared to work so I hope whoever in the future has this problem can be helped by this..... or come up with a better solution.
The issue I'm having is that my when mobile users double tap to zoom in on content in my right container, the left container which I've set as fixed, jumps in front of the zoomed content. I'm at a loss how to correct this.
CSS
#left_container{
position: fixed;
float: left;
}
#right_container{
float: left;
color: white;
width: 75%;
max-width: 600px;
font-size: 1.5em;
margin-left: 210px;
}
HTML
<div id="left_container">
<div id="header">
<center><h2>Hello World</h2></center>
</div>
<div id="globe">
<img src="http://us.123rf.com/400wm/400/400/Kmitu/Kmitu0706/Kmitu070600073/1126687-globe-isolated-on-pure-white-background.jpg" width="200" height="200">
</div>
<div id="navigation_buttons">
<ul>
<li>HOME</li>
<li>PROJECTS*</li>
<li>BLOG*</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="right_container">
<h1>Content</h1>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
There are some things you need to learn about positioning an element to fixed..
First off, any element that is set to fixed or absolute will need a value for [ top andleft ] OR [ bottom and right ]. Note: float:left; won't affect a fixed element, you meant to use left:0;
Second, a fixed or absolute positioned element will overlay any static (default position) positioned element.
SO what's happening is, when the user zooms in, the window scope gets smaller, causing your fixed element to cross over more area of the screen.
What you need to do is, either make your design responsive using Javascript/jQuery, this way you can foresee the ocation of an user 'zooming' in.
The other way you can do this is by giving your fixed element a right of 0 and nesting it inside another element with and a position of relative... this will bind your fixed element and restrict it's bounds.
You might want to read up on the position property http://www.w3schools.com/cssref/pr_class_position.asp