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;
}
Related
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>
I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?
HTML:
<footer>
<div id="footercontent">
<div id="logobox">
<img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION
</div>
<div id="social">
</div>
</div>
</footer>
CSS:
footer {
width: 100%;
height: 200px;
background-color: white;
position: relative;
margin-top: 70px;
}
#footercontent {
width: 70%;
height: 100%;
background-color: black;
margin: auto;
}
#logobox {
width: 30%;
height: 100%;
margin-right: 0;
float: left;
}
img {
height: 70%;
position: absolute;
margin: auto;
display: block;
}
#social {
width: 70%;
height: 100%;
background-color: white;
float: left;
}
Remove position: absolute and apply margin: 0 auto to img. When position: absolute is applied on some element, it is taken out from the normal flow of DOM
img {
height: 70%;
margin: 0 auto;
display: block;
}
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;
}
I have a div that is 50% the width of the screen and 100% height.
I want to have an image placed at the bottom of the div that will adjust with the width.
To set the position I use position: absolute; but this removed the auto width:
code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
}
.bottomImage {
width: auto !important;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
width: auto;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="events_bottom.png" />
</div>
</div>
Is there any way to have an image positioned absolute and adjust to container width?
Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
position: relative;
}
.bottomImage {
width: 100%;
position: absolute;
bottom: 0px;
left: 0;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="http://placehold.it/300x50" />
</div>
</div>
You could try this:
.aaaaa {
position: relative;
}
.bottomImage {
position: absolute;
left: 0;
right: 0;
}
https://jsfiddle.net/1oxy7odv/
HTML
<div>
<img />
</div>
CSS
div {
display: block;
position: relative;
width: 500px;
height: 500px;
background: black;
margin: 50px auto;}
img {
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: red;
height: 25px;}
you could use another positioning for your bottomImage to size with its parent container:
.bottomImage {
position: absolute;
top: 0; //or whatever position from top
left: 0;
right: 0; //important !!! this way its always on the rightest(?) position of the parent)
bottom: 0;
}
You can also try this:
.bottomImage {
width: inherit; /*inherits width from div.aaaaa*/
max-width: 100%;
position:absolute;
bottom:0;
}
I know there have been plenty of questions regarding sticky footers, but I can't seem to get them to work on my page.
Can anyone help me make my footer sticky, not fixed?
My HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
My CSS
#container {
width: 980px;
min-height: 100%;
margin-left: auto;
margin-right: auto; }
#content {
width: 100%;
min-height: 100%;
margin: 40px 0; }
#footer {
width: 3000px;
min-height: 185px;
background-color: rgb(0,173,239);
margin-left: -1000px; }
I have tried various positions (relative, fixed etc) but it doesn't work. I seem to get my footer fixed and covering content. Any suggestions?
Try this CSS:
body {
min-height: 100%; }
#container {
width: 980px;
min-height: 100%;
margin-left: auto;
margin-right: auto; }
#content {
width: 100%;
min-height: 100%;
margin: 40px 0;
margin-bottom: 290px; }
#footer {
width: 100%;
min-height: 185px;
background-color: rgb(0,173,239);
position: fixed;
bottom: 0;
left: 0;
right: 0; }