I have a very newbie problem with my page: I cannot center my div-image in the header and I can't vertical-center the content. This is what it looks like:
As you can see, the position I want it to be is POS. I tried margin:auto, using flex and I can't seem to fix it! I also tried with bootstrap, but I'm very confused.
This is the "code":
<body>
<header>
<div class="logo-holder"></div>
</header>
<div class="container align-middle">
<div class="row">
<div class="col">
<img src="{{ object.image.url }}">
</div>
<div class="col">
<div class="container">
<h1>{{ object.title }}</h1>
</div>
</div>
</div>
</div>
</body>
CSS:
body{
font-family: 'Lato', sans-serif;
}
.container img{
border: 1.5px solid rgb(138, 137, 137);
width: 400px;
}
header{
height: 10em;
display: flex;
align-items: center;
justify-content: center;
}
header .logo-holder{
margin:auto;
position: absolute;
background: url(../img/main-logo.png) no-repeat center center;
width: 104px; height: 85px;
position: absolute;
top: 30px;
left: 10%;
}
.container h1{
text-align: center;
text-transform: uppercase;
color: #353738;
letter-spacing: 3px;
font-size: 30px;
font-weight: 600;
}
I know this should be easy for you, but don't to frontend. I tried to investigate, but what it works in a code snipped online won't seem to work in my code somehow. Do you have any idea on how to center the logo and how to vertical-align the product div (the div that contains the image and the title)?
I changed some things in your CSS and it works for me.
I removed the Flex elements in the header
and gave the logo-header a display:block; and margin:auto auto;. Also removed the absolute positioning of the logo-header.
body{
font-family: 'Lato', sans-serif;
}
.container img{
border: 1.5px solid rgb(138, 137, 137);
width: 400px;
}
header{
position:relative;
display:block;
width:100%;
height: 10em;
}
header .logo-holder{
display:block;
margin:auto auto;
background: url('../img/main-logo.png') no-repeat center center;
width: 104px; height: 85px;
}
.container h1{
text-align: center;
text-transform: uppercase;
color: #353738;
letter-spacing: 3px;
font-size: 30px;
font-weight: 600;
}
Related
I am coding a Facebook clone with some changes to enhance my skills, but I have ran into a problem.
I have an image(profile picture) and text(user name) under the <h1> of Home. I am trying to align the text exactly to the center to the right of the image
example:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
I am not getting the result I want. Instead, the image the text is at the top to the right of the image.
example:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
The HTML:
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="icons\my profile.jpg">
<p class="my-user-name">Said User</p>
</div>
</div>
The CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
Flexbox is perfect for these cases. Change the .personalInfo div to a flexbox by adding the display: flex property. Then you have access to many other properties for centering, etc.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personal-info">
<img class="sidebar-profile-picture">
<p class="my-user-name">Said User</p>
</div>
</div>
Not sure I understand your requirement correctly.
You can use flex to achieve the below result.
Let me know if this works
.personnal-info {
display:flex;
align-items: center
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="//via.placeholder.com/50x50">
<p class="my-user-name">Said User</p>
</div>
</div>
hey Mihai T thanks for the response ! It actually worked.
But didn't put it in an ideal position.
I actually fixed the problem by putting position: relative; on personnal-info.
Then I put in my-user-name
position: absolute; top: -8px;
PS: It also worked with bottom: -8px; instead of top: -8px.
Thanks !
I've set a blue background image, added some content and was done. I've tried zooming in the site, and whenever I zoom in, the background image automatically pushes itself up and does not cover the founders and half of the yellow arrow.
How it looks normally
How it looks when I zoom in
Any idea on how to fix this?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.post-header {
background-color: #20cfcf;
background-image: url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 60Vh;
text-align: center;
}
.post-header h2 {
text-align: center;
padding-top: 2em;
font-weight: 800;
font-size: 1.7em;
color: #172025
}
.post-header h1 {
font-size: 92pt;
font-weight: 900;
color: white;
margin: 0;
margin-top: em;
}
.founders {
margin-top: -6em;
}
.arrow-box {
position: relative;
background: url("https://i.imgur.com/gp3z7z5.png") no-repeat center center;
background-size: contain;
margin: auto;
width: 400px;
height: auto;
margin-top: -3em;
}
.arrow {
position: relative;
display: flex;
text-decoration: none;
align-items: center;
justify-content: center;
font-size:1.7rem;
height:80px;
color: black;
}
.dev-description {
font-size: 1.4em;
font-weight: 300;
line-height: 1.3em;
}
.recognize {
margin-top: 3em;
text-transform: uppercase;
font-weight: 700;
}
.images {
padding: 1em;
display: inline;
margin-top: 2em;
}
.images:hover,
.images:focus {
color: white;
}
.img-container {
margin-top: 1.3em;
}
<section class="post-header">
<div class="wrapper">
CHYBA TU
<h2>HI. WE'RE TILDE.</h2>
<h1>WE LIVE AND <br> BREATHE CODE.</h1>
<img src="img2/founders.png" class="founders" height="294px" width=425px alt="">
<div class="arrow-box">
Meet the team
</div>
<div class="container">
<p class="dev-description">
We're a small team of developers who are passionate about crafting great software.
We're some of the faces behind Ember.js, Ruby on Rails, jQuery and more. <br>
We're here to help you build the products and tools of the future.
</p>
<p class="recognize">
you may recognize us from around town
</p>
<div class="img-container">
<div class="images">
<img src="img2/rails.png" alt="">
</div>
<div class="images">
<img src="img2/jquery.png" alt="">
</div>
<div class="images">
<img src="img2/ember.png" alt="">
</div>
<div class="images">
<img src="img2/handlebars.png" alt="">
</div>
<div class="images"></div>
<img src="img2/bundler.png" alt="">
</div>
</div>
</div>
</div>
</section>
Thanks in advance. Let me know if something is unclear.
I think you can do like this.
.post-header {
background-color: #20cfcf;
background-image:
url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 582px;
text-align: center;
}
An alternate solution is to adjust the markup of your hero so that the people and arrow images are positioned at the bottom of the background, this means it will work on mobile/desktop and all heights, widths and zoom levels.
In this solution, we create a .hero container and place everything that is meant to be in front of the blue background inside of it. We position the images absolutely, from the bottom, transforming the arrow down 50%.
If you run into issues with the hard-coded height from the other answer then this will work for you.
.hero {
background-color: #20cfcf;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100px 0 200px;
position: relative;
text-align: center;
}
.preheading {
font-size: 1.7em;
font-weight: 800;
text-transform: uppercase;
}
.heading {
color: #fff;
font-size: 92pt;
font-weight: 900;
text-transform: uppercase;
}
.people {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
img {
border: 1px solid black;
}
<div class="hero">
<div class="preheading">Hi. We're Tilde.</div>
<div class="heading">We live and<br>breate code.</div>
<img class="people" src="https://via.placeholder.com/400x300">
<img class="arrow" src="https://via.placeholder.com/200x80">
</div>
I am trying vertical align an image in a div. I have a div which displays a coloured background and I need to place other objects inside that div, but centred vertically.
I have craeted a sjfiddle to try and explain.
JSFiddle
First of all you should get rid of the margin-top: -60px in .room-name . Then there are two texts, not just one. Take a look at the settings below, I think that might be what you want (?) The essential part for the centering is the relative position, to: 50% and transform: translatey(-50%), but also the background position for the background image.
#wrapper-new {
width: 100%;
}
#record-section {
width: 100%;
float: left;
height: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
height: 80px;
}
#room-section {
width: 20%;
background-color: #E9E9E9;
display: inline-block;
float: left;
height: 80px;
}
.direction-image {
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://s2.postimg.org/te7o9w9ix/orbitor_small_17.png);
background-position: 0 center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.room-name {
font-family: Tahoma, Geneva, sans-serif;
font-size: 30px;
font-weight: bold;
color: #006;
display: inline-block;
margin-left: 100px;
width: 200px;
float: left;
margin-right: 30px;
}
.floor-name {
font-family: Tahoma, Geneva, sans-serif;
font-size: 26px;
font-weight: bold;
color: #666;
}
<div id="wrapper-new">
<div id="record-section">
<div id="room-section">
<div class="direction-image">
<div class="room-name">Box
<div class="floor-name">Ground</div>
</div>
</div>
</div>
</div>
</div>
To vertically center children you just need to add display: flex and align-items: center for element immediate parent and all its children will be centered vertically.
Using your markup it will be something like (also removed negative top-margin from your styles):
#wrapper-new {
width: 100%;
}
#record-section {
width: 100%;
float: left;
height: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
height: 80px;
}
#room-section {
width: 20%;
background-color: #E9E9E9;
display: inline-block;
float: left;
height: 80px;
}
.direction-image {
margin-top: 8px;
vertical-align: middle;
background-repeat: no-repeat;
background-image: url(https://s2.postimg.org/te7o9w9ix/orbitor_small_17.png);
}
.room-name {
font-family: Tahoma, Geneva, sans-serif;
font-size: 30px;
font-weight: bold;
color: #006;
/* remove display: inline-block; */
display: flex; /* new */
align-items: center; /* new */
/* remove margin-top: -60px; */
margin-left: 100px;
width: 200px;
float: left;
margin-right: 30px;
}
.floor-name {
font-family: Tahoma, Geneva, sans-serif;
font-size: 26px;
font-weight: bold;
color: #666;
}
<div id="wrapper-new">
<div id="record-section">
<div id="room-section">
<div class="direction-image">
<div class="room-name">Box
<div class="floor-name">Ground</div>
</div>
</div>
</div>
</div>
</div>
If you don't want to use flexbox (which is not supported by older browsers) you can add line-height: 100px (or some other number) (if parent has height 100px)
.box{
height:100px;
width:100px;
color:white;
background-color:red;
line-height:100px;
}
<div class="box">
Text inside box
</div>
Try flexbox: JSFiddle.
<div id="wrapper-new">
<div id="record-section">
<div id="room-section">
<div class="direction-image">
<div class="room-name">Box
<div class="floor-name">Ground</div>
</div>
</div>
</div>
</div>
.wrapper {
width: 200px;
height: 200px;
display: flex;
align-items: center;
background-color: #FFFFFF;
}
You can change how you vertically align inner items by changing the wrapper's align-items property to center.
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
I have three main main div in a main div and each these three div have small button at the bottom, because they look and feel is same so i have same class "readMore_button" for all three of them is styling them in css. now the button from first block behave fines with hover but rest of two not (mouse has to be very at bottom of div button to behave). I cant figure out why!!
many thanks in advance.
<div id="HighLight_blocks_Wrapper">
<div class="highlight_Block" id="Management_block_01">
<div class="highLight_block_label">Management</div>
<div class="readMore_button">Read More</div>
</div>
<div class="highlight_Block" id="valuation_block_01">
<div class="highLight_block_label">Valuation</div>
<div class="readMore_button">Read More</div>
</div>
<div class="highlight_Block" id="SelectGreen_block_01">
<div class="highLight_block_label">Select Green</div>
<div class="readMore_button">Read More</div>
</div>
</div>
css
#HighLight_blocks_Wrapper {
position: relative;
width: 100%;
height: 400px;
margin-top: 10px;
}
.highlight_Block {
position: relative;
float: left;
width: 321px;
height: 370px;
margin-left: 15px;
margin-top: 15px;
background-color: #F5F5F5;
border: solid;
border-width: 1px;
border-color: #E8E8E8;
}
.readMore_button {
width: 75px;
height: 26px;
position: absolute;
right: 10px;
bottom: 10px;
background-color: grey;
background: url("/assets/Images/view_more_01.png") no-repeat;
}
.readMore_button a {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica;
font-size: 13px;
color: #464444;
margin-left: 6px;
line-height: 26px;
text-decoration: none;
}
.readMore_button:hover {
background: url("/assets/Images/view_more_02.png") no-repeat;
}
.readMore_button:hover a {
color: #fff;
}
I am using squarespace CMS and i am using content block in each of them, issue has arises-ed because of that.
<squarespace:block-field id="BlockField_Management" class="BlockField_02" columns="10"/>
this line creates many div blocks and i have notice through web inspector that in 2nd and 3rd some of div are over-lapping read more button, that is why mouse hover is not behaving correctly.
Solution use z-index to .readMore_button class.
.readMore_button {
width:75px;
height:26px;
position:absolute;
right:10px;
bottom:10px;
background-color:grey;
background:url("/assets/Images/view_more_01.png") no-repeat;
z-index:100;
}