Good Morning, I am currently working on portfolio and I am trying to make my cover elements completely center vertically and horizontal. I have managed to do this with margin: 0 auto and display: table-cell, vertical-align and for some reason when I am added my CSS3 triangles it began to push my logo to the left. Is there any tricks to fix this?
.cover {
background-size: cover;
background-color: white;
display: table;
width: 100%;
padding: 0 20%;
height: 1900px;
}
.logo-container {
margin: 0 auto;
background-size: cover;
height: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 40px;
padding-bottom: 40px;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #84cfc5;
border-left: 100px solid transparent;
padding-top: 1500px;
margin-left: 850px;
margin: 0 auto;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #84cfc5;
border-right: 100px solid transparent;
margin-right: 1000px;
margin-left: -200px;
position: relative;
left: -1000px;
right: -1000px;
top: 150px;
}
<div class="cover">
<div class="logo-container">
<img class="logo" src="images/personal-logo.png" alt="logo-brand" />
</div>
<div id="triangle-topright"></div>
<div id="triangle-bottomright"></div>
</div>
The triangles are causing a shift because they are taking up space in the page flow. You should position them using position:absolute to get them out of the page flow, with position:relative set on the parent .cover div. Example below.
html, body {
height: 100%;
margin: 0;
}
.cover {
background-color: white;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.logo-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid #84cfc5;
border-left: 100px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #84cfc5;
border-right: 100px solid transparent;
position: absolute;
left: 0;
top: 0;
}
<div class="cover">
<div class="logo-container">
<img class="logo" src="http://placehold.it/240x80" alt="logo-brand" />
</div>
<div id="triangle-topright"></div>
<div id="triangle-bottomright"></div>
</div>
Related
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
I have a an image, 500 px height and width. I used border-radius to make it a circle image. I also have a solid background color that I use border-radius on to make it a circle as well.
I am trying to create an overlay on hover by reducing the opacity of the image, letting the background image peer through. I have it basically working, although there is about a 1px overlap of showing the background image on the bottom of the actual image.
Snippet:
.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<div class="image-wrapper">
<img class="testing red" src="img.jpg">
</div>
As you can see from the example there is about one pixel of the background showing at the bottom of the image before any hover.
I think the issue here is that img has display: inline by default.
You can fix it by setting your img to display: block in your CSS
.image-wrapper {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}
<div class="image-wrapper">
<img class="testing red" src="http://lorempixel.com/400/400">
</div>
Try adding this css:
.image-wrapper{
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
Here is the sample example for you question,hope this will help you.
http://jsfiddle.net/z3rLa/1/
.image-overlay {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
border:2px solid #000;
}
.image-overlay:hover {
width: 100%;
height: 100%;
background-color: #000;
border-radius: 50%;
margin: 0;
padding: 0;
opacity:0.5;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border-radius: 50%;
}
<div class="image-overlay">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSODZIzJ1LLVMxlyd4RKB8TmvAeufTRGolSlX64IagMNtWvo4ij">
</div>
I read this post but still ain't able to center the inner <div> :
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
It must be related to the position: absolute; property but it is required in order to insert absolute-position <img> elements in the inner <div>.
Simple, add this:
.game {
right: 0;
left: 0;
margin: 0 auto;
}
Since the width is given left and right will not affect your elements width. margin: 0 auto; will do the positioning
Example:
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right:0;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
Just add
left: 0;
right:0;
To the game class, and it will be horziontally centered. The trick here is to set the position to left 50%, and margin left to minus 1 half of the container width. Let me know if this solves it for you.
EDIT: helpful comments have shown me that we do not need the margin left negative, we can just set the left and right attribute for horizontal alignment. This is better because it will work regardless of the width of the element
Here's another approach..
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
http://www.codeply.com/go/E0xL0KyOkU
you can use the image as the background of the class game
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
height:300px;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position:relative;
left: 0;
top:28%;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
try this
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
}
.game {
border: 5px solid black;
width:30%; margin:0 auto;
position: absolute;
left: 0;
right: 0;
padding: 0 20px;
}
<div>
<div class="game">
test
</div>
</div>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
I know this html is sloppy, with some extra divs that are unnecessary, but regardless, I can't understand why the div with ID "info_box_right" is aligning to the bottom of the parent div (you can see the "text" aligned to the bottom at the below jsfiddle example).
Any ideas how I can get it to align to the top of its parent?
http://jsfiddle.net/taddme0y/1/
HTML:
<div id="info_container" >
<div id="info_box">
<hr class="info_box_hr" noshade>
<a id="info_box_title"></a>
<hr class="info_box_hr" noshade>
<div id="info_box_wrapper">
<div id="info_box_left">
<div class="info_box_sub_wrapper">
<a id="info_box_logo">
<img class="info_img" id="info_img_logo" alt="logo">
</a>
<a id="info_box_screenshot">
<img class="info_img" id="info_img_screenshot" alt="screenshot">
</a>
</div>
</div>
<div id="info_box_right">
<div class="info_box_sub_wrapper">
<a id="info_box_right_text">
Text
</a>
</div>
</div>
</div>
</div>
</div>
CSS:
#info_container {
z-index: 500;
position: relative;
top: 0;
left: 0;
width: 80%;
height: 0;
margin: 0 auto;
background-color: #000000;
}
#info_box {
z-index: 500;
position: relative;
top: 50px;
width: 100%;
background-color: #FFFFFF;
text-align: center;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
#info_box_wrapper {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_left {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
}
#info_box_right {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
/* margin-bottom: 20px; */
}
.info_box_sub_wrapper {
position: relative;
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_right_text {
position: relative;
color: #4D4D4D;
}
#info_box_logo, #info_box_screenshot {
position: relative;
width: 100%;
margin: 0 auto;
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-style: transparent;
border-color: #4D4D4D;
border-width: 2px;
cursor: pointer;
}
.info_img {
width: 100px;
margin: 20px;
background-color: #000;
}
You can specify how you want an element to vertically align using the vertical-align CSS property.
#info_box_right {
vertical-align: top;
}
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp