I want the header to align at the top-left-corner of the centered div element. The only way I can think of doing this is setting position to relative and using top with a value of 20%. The problem with this is that it causes the header to stretch the page further to the right as can be see in the fiddle.
body {
font-family: Europa;
}
.header {
position: relative;
left: 20%;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Simply give your header block the same width as your box.
body {
font-family: Europa;
}
.header {
position: relative;
width:500px;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Using a .centered wrapping div you can more easily obtain your desired results w/ keeping the elements fluid if wanted.
<div class="centered">
<h4>header</h4>
<div class="speech-bubble"></div>
</div>
<style>
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width: 100%;
border-radius: 20px;
background:#6441a5;
margin: auto;
}
.centered{
width:500px;
margin: 0 auto;
position: relative;
}
</style>
Try giving your header h4 the same width as your speech-bubble:
https://jsfiddle.net/hxjdy720/
h4 {
font-size: 5em;
margin: 0 auto;
width: 500px;
}
The simplest solution is to put your two elements in one div, like this:
body {
font-family: Europa;
}
.header {
display: block;
margin: auto;
width: 500px;
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width:500px;
position: relative;
border-radius: 20px;
background:#6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="header">
<h4>header</h4>
<div class="speech-bubble">
</div>
</div>
Related
I'm building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.
This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
I wonder why mainCountainerHeadLogo does not stretch parent div mainCountainerHead height?
If I scale the page, both mainCountainerHeadTitle and mainCountainerHeadMenu stretch mainCountainerHead just fine.
Sorry for my english and thanks in advance!
http://jsfiddle.net/gvcs0r6b/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.mainCountainer {
min-height: 100%;
width: 70%;
margin: 0 auto;
}
.mainCountainerHead {
background-color: aqua;
height: auto;
}
.mainCountainerHeadLogo {
height: 100px;
width: 20%;
background-color: blue;
float: left;
position: relative;
overflow: hidden;
}
.mainCountainerHeadLogo img {
position: absolute;
width: 100%;
height: auto;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
margin: auto
}
.mainCountainerHeadTitle{
margin-left: 20%;
width: 80%;
height: auto;
text-align: center;
padding-top: 3%;
}
.mainCountainerHeadMenu{
margin-left: 20%;
text-align: center;
background-color: orange;
width: 80%;
height: auto;
padding-top: 2%;
text-align: center;
}
.mainLink {
display: inline-block;
padding: 5px;
}
.mainLinkButton {
width: 90px;
height: 30px;
background-color: green;
font-size: 16px;
border: none;
color: white;
padding: 5px;
}
.mainLinkButton:hover {
background-color: darkgreen;
}
.mainLinkDropdown {
position: relative;
display: inline-block;
padding: 5px;
}
.dropdownContent {
display: none;
position: absolute;
min-height: 30px;
min-width: 130px;
text-align: left;
background-color: #f1f1f1;
z-index: 10;
}
.dropdownContent a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.mainLinkDropdown:hover .dropdownContent{
display: block;
}
.dropdownContent a:hover{
background-color: #ddd;
}
<div class="mainCountainer">
<div class="mainCountainerHead">
<div class="mainCountainerHeadLogo">
<img src="https://i.ibb.co/cYzWJFM/logo-Copy.jpg" title="logo" />
</div>
<div class="mainCountainerHeadTitle">
<h4>Welcome aboard!</h4>
</div>
<div class="mainCountainerHeadMenu">
<div class="mainLink">
<button class="mainLinkButton">Main</button>
</div>
<div class="mainLinkDropdown">
<button class="mainLinkButton">Dropdown</button>
<div class="dropdownContent">
Link 1
Link 2
Link 3
</div>
</div>
<div class="mainLink">
<button class="mainLinkButton">Contacts</button>
</div>
</div>
</div>
</div>
In answer to your question:
That's because the float property puts the HTML elements out of the normal page flow, and this causes what you're experiencing. Its effect is similar to position: absolute which is to move the element to "a different layer".
How to solve it?
Well... there are a lot of ways to achieve what you want, and almost all of them requires to refactorize your code. Actually, you have a lot of code that makes it difficult to achieve your goal. You should get rid of float and start using other technics like Flexbox.
I could show you a solution if you provide a sketch of the layout you want.
change the CSS for img to this
.mainCountainerHeadLogo img {
width: 100%;
height: 100%;
margin: auto
}
I just started learning HTML. In my HTML there is a div containing an image and an h1 tag. Now the h1 is coming under the div. How to position that h1 on the center of the image?
<div class="headwrap">
<div class="headimage"><img src="images/Header-image1.jpg">
<h1 class="headtxt"> I Love Photography</h1>
</div>
</div>
Css:
.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
margin: 0 auto;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
float: left;
}
You can use position: relative on the parent element and then put position: absolute on the H1 tag:
.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
position: relative;
}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
position: absolute;
top: 0;
}
I added a widget area below my header and I try to center it just under the logo.
I tried to add display: block and margin:0 auto or text-align: center on #header-sidebar, but it doesn't work. Also, I tried to change the structure of the HTML code and not only make CSS tweaks, but still, the #header-sidebar stack on the left and not centered.
Here is my code:
HTML code:
<header id="header">
<div class="header-container">
<img style="vertical-align: middle;" src="#">
<nav> //here is the navigation, hidden in mobile view </nav>
<div id="header-sidebar" class="header-widget-area">
<div class="textwidget">
//some widget here
</div>
<div class="mlp_language_box">
// some other widget here
</div>
</div>
</div>
</header>
CSS code:
header#header {
position: relative;
z-index: 300;
height: 70px;
line-height: 70px;
display: block;
}
header#header #phone-toggle-menu {
left: 20px;
margin-left: 0;
position: absolute;
}
header#header .header-container {
max-width: 1200px;
margin: 0 auto;
}
header#header .logo {
width: 100%;
float: none;
box-sizing: border-box;
text-align: center;
position: absolute;
}
display:table and margin:auto for both logo and widget area will do the trick... So toggle button alone can stay absolute.
header#header {
position: relative;
z-index: 300;
height: 70px;
line-height: 70px;
display: block;
}
header#header #phone-toggle-menu {
left: 20px;
margin-left: 0;
position: absolute;
}
header#header .header-container {
max-width: 1200px;
margin: 0 auto;
}
header#header .logo {
box-sizing: border-box;
display: table;
margin: auto;
}
header #header-sidebar{
display: table;
margin: auto;
}
Replace your css code with following :
header#header {
position: relative;
z-index: 300;
height: 70px;
line-height: 70px;
display: block;
}
header#header #phone-toggle-menu {
left: 20px;
margin-left: 0;
position: absolute;
}
header#header .header-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
header#header .logo {
box-sizing: border-box;
text-align: center;
position: absolute;
}
Hey I can't figure out why my divs are overlapping and what i should do...
You can watch the site here: http://hersing.dk/job/
I would like for the div carrying the hr to appear underneed the header-info div
Heres is the code from the site:
#font-face {
font-family: hersing;
src: url(lmroman10-regular.otf);
}
html,
body {
font-family: hersing;
height: 100%;
margin: 0px;
}
.container {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
background: green;
position: absolute;
display: block;
clear: both;
}
.info-name {
left: 5%;
top: 10%;
position: absolute;
display: block;
}
.info-picture {
min-width: 250px;
min-height: 250px;
padding: 4px;
position: absolute;
top: 10%;
right: 5%;
background: black;
display: block;
}
.info-picture img {
height: 100%;
width: 100%;
}
#info-header {
font-size: 400%;
}
#info-title {
font-size: 150%;
font-weight: bold;
}
.header-info {
display: block;
padding: 20px;
position: relative;
width: 100%;
}
.stang-1 {
display: block;
width: 100%;
color: blue;
position: relative;
}
#hr-1 {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
background-color: #f1a857;
}
<div class="container">
<div class="header-info">
<div class="info-name" id="info-name">
...
</div>
<div class="info-picture" id="info-picture">
<img src="images/picture.png" />
</div>
</div>
<div class="stang-1" id="stang-1">
<hr id="hr-1">
</div>
</div>
I hope someome can figure this out, cause i'm pretty lost
Both .info-name and .info-picture are absolute positioned and .header-info has no height defined.
You'd rather use relative positioning + float + clear and/or display: inline-block for both .info-* rules and everything will be fine.
<div class="container">
<div class="header-info">
<div class="info-name" id="info-name">
.....
</div>
<div class="info-picture" id="info-picture">
<img src="images/picture.png" />
</div>
</div>
<div class="stang-1" id="stang-1">
<hr id="hr-1">
</div>
</div>
<style>
#font-face {
font-family: hersing;
src: url(lmroman10-regular.otf);
}
html,
body {
font-family: hersing;
height: 100%;
margin: 0px;
}
.container {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
background: green;
position: absolute;
display: block;
clear: both;
}
.info-name {
left: 5%;
top: 10%;
position: absolute;
display: block;
}
.info-picture {
width: 250px;
height: 250px;
padding: 4px;
position: relative;
top: 10%;
left:70%;
background: black;
display: block;
}
.info-picture img {
height: 100%;
width: 100%;
}
#info-header {
font-size: 400%;
}
#info-title {
font-size: 150%;
font-weight: bold;
}
.header-info {
display: block;
padding: 20px;
position: relative;
width: 100%;
}
.stang-1 {
display: block;
width: 100%;
color: blue;
position: absolute;
}
#hr-1 {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
background-color: #f1a857;
}
</style>
I think this will solve your problem...
In this case, although very impractical, the solution would be to add a line break <br> after the .header-info div.
I repeat, this solution is not the best one by far, and you should, as pointed out in the comments by Paulie_D, change your positioning layout method.
Everything inside the absolutely positioned .container would be better positioned relative. Use css float:left; or float:right; to position elements and clear:both; when you want the next element to start below all floated elements. Use padding on the container and margins on the floated elements for positioning.
Also give .container css class of overflow:auto; to wrap around all elements inside without having to set the height every time.