I am learning HTML and CSS and I am having difficulty centering a button within a <div>. Here is the code I currently have:
.box-information {
border: 2px solid #000000;
margin: 0 auto 15px auto;
padding: 0 10px 60px 10px;
width: 80%;
background-color: #ffffff;
position: relative;
}
.button-blue:link,
.button-blue:visited {
width: 7em;
display: block;
padding: 10px 15px;
background-color: rgba(66, 85, 123, 1);
font-size: 1.0em;
text-indent: 0;
text-align: center;
color: #ffffff;
position: absolute;
bottom: 10px;
left: auto;
}
<div class="box-information your-business">
<p class="title-information">
Your Business
</p>
<p class="text-information">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<a class="button-blue learn-more" href="#">Learn More</a>
</div>
I am able to offset the button from the bottom, and I can offset the button horizontally if I use anything but AUTO.
Please help me understand what I am doing wrong.
To center a block element in it's parent, all you need to do is add:
margin-left:auto;
margin-right:auto;
to the button's CSS properties.
(You will need to remove the position: absolute and the absolute positioning properties first.)
Take a look at this codepen: https://codepen.io/anon/pen/qXYEpd
Update
.box-information {
border: 2px solid #000000;
margin: 0 auto 15px auto;
padding: 0 10px 60px 10px;
width: 80%;
background-color: #ffffff;
position: relative;
}
.button-blue:link,
.button-blue:visited {
width: 7em;
display: block;
padding: 10px 15px;
background-color: rgba(66, 85, 123, 1);
font-size: 1.0em;
text-indent: 0;
text-align: center;
color: #ffffff;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
<div class="box-information your-business">
<p class="title-information">
Your Business
</p>
<p class="text-information">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<a class="button-blue learn-more" href="#">Learn More</a>
</div>
Set margin-left:50%;. This set my button to the middle of its parent control.
Related
My website is bigger than I wanted it. It created a scroll bar on the bottom to scroll left and right but I want it only as big as my screen, something went wrong while doing CSS.
* body {
margin: 0;
padding: 0;
font-family: Arial;
}
nav {
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #fff;
margin: 0;
padding: 10px 90px;
top: 0;
left: 0;
box-sizing: border-box;
position: fixed;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
nav ul li a:hover {
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
/* pri hoveri spraví z ostrého rámčeka okolo položky menu oblý */
}
section {
width: 100%;
height: 100vh;
background: url(background.jpg);
background-size: cover;
background-position: center;
}
.container {
width: 100%;
height: 100vh;
padding: 0 8%;
}
.container h1 {
text-align: center;
padding-top: 10%;
margin-bottom: 60px;
font-weight: 800;
position: relative;
}
.container h1::after {
content: '';
background: #303ef7;
width: 100px;
height: 5px;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* zoradí jednotlivé services vedla seba*/
grid-gap: 30px;
}
.service {
text-align: center;
padding: 25px 10px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background: transparent;
transition: transform 0.5s, background 0.5s;
}
.service i {
font-size: 40px;
margin-bottom: 10px;
color: #303ef7;
}
.service h2 {
font-weight: 600;
margin-bottom: 8px;
}
.service:hover {
background: #303ef7;
color: #fff;
transform: scale(1.05);
}
.service:hover i {
color: #fff;
}
<html>
<head>
<title>WEBTERAZ Prvy Pokus</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/227b5da2e1.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">Webteraz.sk</div>
<ul>
<li>O nás</li>
<li>Portfólio</li>
<li>Kontakt</li>
</ul>
</nav>
<section></section>
<div class="container">
<h1>Our Services</h1>
<div class="row">
<div class="service">
<i class="fa-solid fa-code"></i>
<!--Ikona </> z font awesome -->
<h2>Web Design</h2>
<p> Lorem ipsum WEB DESIGN sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-palette"></i>
<!--Ikona palety z font awesome -->
<h2>Logo pre firmu</h2>
<p> Lorem ipsum LOGO sit amet, consectetur adipisciring.</p>
</div>
<div class="service">
<i class="fa-solid fa-screwdriver-wrench"></i>
<!--Ikona kluča a šrobovaku z font awesome -->
<h2>Údržba vašej stránky</h2>
<p> Lorem ipsum ÚDRŽBA sit amet, consectetur adipisciring.</p>
</div>
</div>
</div>
</body>
<!--Video koniec na 3:34-->
</html>
Your issue here is that the container is 100% + 8% padding each side, so 116% of total screen width. That creates a scrollbar on the X axis.
To overcome this you've got two solutions:
add box-sizing: border-box to the .container. Read more about box-sizing here.
calculate the total width of the .container to be 100% - 16%, because padding takes 16%. You could use width: calc(100% - 16%) to do that.
I prefer the box-sizing solution myself. It's actually not a bad idea to put that into the * selector so it matches every element you create.
I am having trouble getting my code to look like the one provided by the link.
http://prntscr.com/pqrax8 If anyone could help me to do that, that would be greatly appreciated and helpful. Thank you in advance. Thank you in advance.
.testimonials {
font-family: 'Roboto Slab', serif;
max-width: 250px;
border-radius: 40px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
padding: 20px;
margin: 20px 0 0 0;
position: relative;
top: 20em;
left: 100px;
background-color: #fff;
}
.ellipse {
position: static;
max-width: 4em;
vertical-align: middle;
padding-right: 1em;
}
.test {
padding-right: 1em;
vertical-align: middle;
line-height: 20px;
text-align: right;
}
h2 {
color: #60AF64;
text-align: right;
}
<body>
<div class="greensidebox">
<div class="testimonials">
<h2>Judith Cooper</h2>
<img class="ellipse" src="images/Ellipse.png" alt="testimonialpic1">
<div class="test">Lorem ipsum dolor sit amet.Sagittis convallis ligula metus.</div>
</div>
<div class="testimonials">
<h2>Julie Howard</h2>
<img class="ellipse" src="images/Ellipse-1.png" alt="testimonialpic1">
<div class="test">Lorem ipsum dolor sit amet. Sagittis convallis ligula metus.</div>
</div>
<div class="testimonials">
<h2>Kevin Adams</h2>
<img class="ellipse" src="images/Ellipse-2.png" alt="testimonialpic1">
<div>Lorem ipsum dolor sit amet. Sagittis convallis ligula metus.</div>
</div>
</div>
</body>
Flexbox...I put that shhh on everything.
* {
padding: 0;
margin: 0;
line-height: 1;
}
.wrapper {
background-color: lime;
padding: 1rem;
width: 320px;
}
.box {
display: flex;
background-color: #FFF;
border-radius: 32px;
padding: 1.5rem 0.5rem;
margin: 1.5rem 0;
box-shadow: 0 8px 4px rgba(0, 0, 0, 0.2)
}
.box img {
border-radius: 50%;
margin-right: 1rem;
}
.box strong {
font-size: 1.25rem;
display: block;
margin-bottom: 0.25rem;
}
<div class="wrapper">
<div class="box">
<img src="https://via.placeholder.com/80">
<div>
<strong>Judas Priest</strong>
<p>I'm made of metal my circuits gleam I am perpetual I keep the country clean</p>
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/80">
<div>
<strong>Judas Priest</strong>
<p>I'm made of metal my circuits gleam I am perpetual I keep the country clean</p>
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/80">
<div>
<strong>Judas Priest</strong>
<p>I'm made of metal my circuits gleam I am perpetual I keep the country clean</p>
</div>
</div>
</div>
I am trying to place 2 div elements containing background-image on the top of each other using the z-index property, but I'm struggling to make this work.
Ideally, I would like the div banner-image element to sort of slide underneath the div banner-image-overlay element as the screen is going smaller.
Here is my fiddle
HTML:
<div id="banner-container">
<div class="banner-image-overlay"></div>
<div class="banner-image"></div>
<div class="banner-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet
</p>
<button class="banner-button" onclick="location.href='http://www.example.com'">
Button
</button>
</div>
</div>
CSS:
#banner-container {
width: 100%;
position:relative;
}
.banner-image {
height: 375px;
background-image: url('http://via.placeholder.com/502x375');
background-repeat: no-repeat;
background-position: left top;
}
.banner-image-overlay {
height: 375px;
background-image: url('http://via.placeholder.com/399x375');
background-repeat: no-repeat;
background-position: right top;
z-index: 99;
}
.banner-text {
max-width: 240px;
font-family: 'Helvetica Neue Light', arial;
color: #fff;
font-size: 1.6em;
float: right;
position: absolute;
right: 35px;
top: 15px;
z-index: 199;
}
.banner-button {
max-width: 240px;
font-size: 0.9em;
background-color: #fff;
border: none;
border-radius: 4px;
font-family: 'Helvetica Neue Light', arial;
color: #000;
text-decoration: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
I just can't figure out how to position them on the top of each other.
I've already had this working with the regular img tag and then using the position: absolute property, but this doesn't seem to work with the background-image: url
Any ideas?
You need to have position: absolute for z-index work.
I have a better solution by using flex box:
.banner{position:relative; display:flex;width:375px;height:500px; background:left top url(https://picsum.photos/300/300) no-repeat}
.banner-bg{flex:1 1;background:right top url(https://picsum.photos/200/280) no-repeat}
.banner-title{font-size:30px}
<div class="banner">
<div class="banner-bg">
<div style="position:absolute;width:150px;right:10px;top:100px">
<div class="banner-title">HERE IS LONG TEXT...</div>
<button>GET IN TOUCH</button>
</div>
</div>
</div>
As you see right background is placed above left background.
div elements by default are positioned relatively which means they will be next to each other. z-index will not change their positioning. If you want to stack them you'll have to change their positions. Positioning one of them absolutely with left and top set to 0 will stack them.
add position:absolute to .banner-image-overlay.
In this fiddle , the parent <p> tag contains an <img> tag which is floated left float: left however the parent <p> tag does not expand to fully encompass the floated img element although I have clear:both set on parent <p> tag.
I know that adding an extra div with clear:both before closing </p> or overflow:auto on <p> will do the job but I am at wits end as to why clear:both set on <p> tag does not work as I expect.
Can anybody explain this behavior?
.thumbnail-desc h2 {
display: inline-block;
background: blue;
color: #fff;
padding: 5px 7px;
margin-bottom: 0;
}
.thumbnail-desc img {
float: left;
width: 200px;
max-height: 200px;
margin-left: initial;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.thumbnail-desc p {
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
padding: 15px;
font-size: 18px;
clear: both;
margin-bottom: 20px;
margin-top: 0;
}
<div class="thumbnail-desc">
<h2>Some title</h2>
<p>
<img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text</p>
</div>
It seems you may misunderstand how clear works.
Setting clear:both on the <p> tag is telling the p to clear anything that comes before it - not the child items within it.
You can add overflow: hidden; for <p>. Here is example: https://jsfiddle.net/hnL0gLy2/
Instead of covering the image with a p tag, use a class and a div.
Fiddle.
HTML:
<div class="thumbnail-desc">
<h2>Some title</h2>
<div class="outer">
<img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text
</div>
</div>
CSS:
.thumbnail-desc h2 { display: inline-block;
background: blue;
color: #fff;
padding: 5px 7px;
margin-bottom: 0; }
.thumbnail-desc img {
float: left;
width: 200px;
max-height: 200px;
margin-left: initial;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
overflow: hidden; }
.thumbnail-desc .outer {
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
padding: 15px;
font-size: 18px;
height:150px;
}
Why your code does not work as you thought?
Because the p tag is for the text. It's height is as much as the text inside the div. For more height, you need to switch to a div or span.
You need to set your .thumbnail-desc p to the display of inline-block.
Site: http://tripleo.biz/test/index.html
Please shrink browser to mobile view.
Header:
I have problems with the alignment. They don't seem to align all to the middle of the header. The Android logo seems ot be the only thing aligned. The text and dash image aren't. :/
Navigation:
The Navigation Drop Down is in effect when you mouse-over "ALL" but the links after Link 2 are hidden behind the image. I tried to use z-index to fix this issue but nothing still.
Content Area:
Another problem with Vertical align. For some reason there is more space at the bottom of the content.
Index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="css/styled.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<div class="image_carousel">
<img src="images/menu.png" style="width: 15px; height: 22px;" />
<img src="images/android_icon.png" style="margin-top: 10px; width: 26px; height: 46px;" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>
</body>
</html>
CSS
img {
width: 100%;
}
header {
background: #83aa01;
width: 100%;
height: 76px;
/*position: fixed;*/
top: 0;
left: 0;
vertical-align:middle;
}
.image_carousel {
padding: 5px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
.image_carousel img {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
}
.clearfix {
float: none;
clear: both;
}
div.bround {
background-color: #FFF;
color: #000;
padding: 20px;
margin-top: 10px;
margin-right: 0px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
img.imgleft {
position:relative;
float: left;
margin: 0px 5px 5px 0px;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83aa01;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
font-size: 20px;
}
div.nav {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
color: #FFF;
}
div.nav ul, div.nav:active ul {
display: none;
position: absolute;
padding: 0px;
background: #444;
color: #FFF;
top: 50px;
width: 20%;
border-radius: 4px 0 4px 4px;
}
div.nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0px;
border-bottom: 1px dotted #FFF;
z-index:1000;
}
div.nav:hover ul {
display: block;
}
div.nav ul, div.nav a {
color: #FFF;
font-size: 17px;
font-weight: normal;
letter-spacing:2px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
-
Please Help!
Thanks.
For Header :
set your .image_carousel padding-top value to 15px and remove margin-top from your android icon. which looks like this
.image_carousel {
padding: 15px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
Content Area :
You have Given margin-bottom :20px to your p tag Just remove that .
Regarding the Navigation issue, You need to add z-index for the dropdown menu. Update your css like below it will resolve.
div.nav ul, div.nav a
{
color:#fff;
font-size:17px;
font-weight:normal;
letter-spacing:2px;
z-index:10;
}
Regarding the Content Area padding is coming from the following class
section
{
margin:80px auto 40px;
max-width:980px;
position:relative;
padding:20px;
}
If you remove the margin bottom 40px, it will work fine in mobile. But the problem is you wont get enough space on bigger screens. So you can use media query and apply this class only on mobile versions.
#media all and (max-width: 399px)
{
section
{
margin-bottom:0px;
}
}
Test css copy code
header {
background: none repeat scroll 0 0 #83AA01;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
}
.image_carousel {
text-align: center;
vertical-align: middle;
}
.image_carousel img, .image_carousel > .nav {
border: 1px solid #DDDDDD;
display: inline-block;
height: 74px;
line-height: 74px;
padding: 0 30px;
position: relative;
vertical-align: middle;
}
.image_carousel > .nav:hover {
background-color: #FF0000;
}
.image_carousel > .nav ul li {
line-height: normal;
}
.clearfix {
clear: both;
float: none;
}
div.bround {
background-color: #FFFFFF;
border-radius: 15px;
color: #000000;
margin-right: 0;
padding: 20px;
}
img.imgleft {
float: left;
margin: 0 5px 5px 0;
position: relative;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83AA01;
}
#menu-icon {
display: inline-block;
font-size: 20px;
height: 40px;
width: 40px;
}
div.nav ul, div.nav:active ul {
background: none repeat scroll 0 0 #444444;
border-radius: 4px 0 4px 4px;
color: #FFFFFF;
display: none;
left: 0;
padding: 0;
position: absolute;
width: 100px;
margin-top:30px;
}
div.nav li {
border-bottom: 1px dotted #FFFFFF;
margin: 0;
padding: 5px 0;
text-align: center;
width: 100%;
z-index: 1000;
}
div.nav li:hover{
background-color:red;
}
div.nav:hover ul {
display: block;
top: 43px;
}
div.nav ul, div.nav a {
color: #FFFFFF;
font-size: 17px;
font-weight: normal;
letter-spacing: 2px;
}
ul {
list-style: none outside none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
//yes test html
<header>
<div class="image_carousel">
<img src="images/menu.png" />
<img src="images/android_icon.png" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>