I have a <div> containing an image and some text. The image is supposed to come at the left corner and the text is supposed to come in the center of the <div>. But the text is coming off a little off-center to the right due to the width of the image.
How do i fix it??
<header>
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png">
<div class="title">RECIPE SEARCH</div>
</header>
header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; }
header .title { text-align: center; margin-left: 0 auto; }
You could set the image as background of the <div class="title"> and then set text-align:center in order to align the text properly.
The HTML could be just:
<header>
<div class="title">RECIPE SEARCH</div>
</header>
And the CSS:
div.title {
background-image:url('/resources/images/searchBoxProp.png');
background-repeat:no-repeat;
text-align:center;
}
You will also need to set a fixed height (equal to the image), and finally set the width you wish.
Set header to position:relative, and #searchBoxProp to position:absolute. Absolute positioning takes the element out of the layout, so it won't affect the text postion. The relative positioning on header makes sure that #searchBoxProp is positioned relatively to header, instead of the browser window.
header {
position:relative;
}
#searchBoxProp {
position:absolute;
left:0px; /* set to your needs */
top:0px; /* set to your needs */
}
Best practice is to use a background image however if not you can use position absolue like this.
header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }
Related
I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
My goal is to align <h1> on top of and alongside the bottom part of an <img> using css and html. When you scale the window, the size of the image will increase (both vertically and horizontally), and I want the text to be aligned on top of the image, following the bottom line. Currently I am using some percentage of the width and height to align the text, but you never know if the text will actually be aligned at the bottom.
I have also included an example with a desired result. The red box with the blue text aligned to the bottom is what I want to accomplish, and I have used an element with variable height and width.
I therefore thought if it was possible to scale the container of the <img> proportional to the image itself, I could achieve the same result.
Some extra information
I do not want to use css grid
I do not know the ratio of the images in my application.
I have the following css and html
container{
position:relative;
height:100%;
}
img{
position: absolute;
width:100%;
height:auto;
z-index:1;
}
h1{
position:absolute;
top:30vw;
left:50vw;
color:red;
z-index:10;
}
.variable-container{
position:relative;
text-align:center;
height:70vw;
width:50vw;
background-color:#de2d3d;
}
h2{
width:100%;
position:absolute;
bottom:10px;
color:blue;
}
<div class="container">
<h1>Title</h1>
<img src="https://placebear.com/g/200/100.jpg">
</div>
<!-- This is what I am trying to accomplish -->
<div class="variable-container">
<h2>
Aligned bottom of box
</h2>
</div>
So the primary issue here is that the nested img element has been positioned absolute, taking it out the normal document flow. Because of this, the outer element (containing parent element) is unable to scale according to inner element (nested element) as it is no longer relative to the document flow.
Summary of changes:
Positioning of nested img element:
The nested img element position property changed from absolute
to relative, this property could probably be removed altogether (as
it doesn't seem necessary in this scope)
Positioning of nested h1 element:
The positioning of the nested h1 element has also been reworked, to
horizontally center an absolutely positioned element you could
always simply declare left and right properties with the unit
value of 0, and since h1 is a block element, simply declare
text-align: center to center the text.
For consistent positioning relative to the containing element, use
the bottom property instead of the top property; since the
requirement is to have this element remain positioned relative to the
bottom of the containing element. If the requirement where the
antithesis (positioned relative to the top of the containing
element), then using the top property would be applicable.
Image aspect ratio issues:
The first example demonstrates some issues with image aspect ratios,
so there is also a background-image alternative to refer to as
well.
Code Snippet Demonstration:
Note: You can manually resize the containing element (bottom-right corner) for the sake of demonstration.
.container{
position:relative;
height:100%;
}
img{
position: relative; /* to scale outer el same as inner el, inner el can't be out of normal document flow */
width:100%;
height:auto;
z-index:1;
}
h1{
position:absolute;
/* rather use `bottom` property if text needs to stay at bottom, and use an absolute unit value like `px` for most consistent positioning */
bottom:30px;
/* simply center an absolutely positionied element with properties `left` & `right` with values of `0` */
left:0;
right: 0;
text-align: center; /* then center text of block element */
color:red;
z-index:10;
margin: auto; /* unset vendor margin property */
}
.bg-img {
background-image: url(https://placebear.com/g/200/100.jpg);
background-size: cover;
height: 100%;
}
/* For the sake of demonstration */
.resize-demonstration {
overflow: hidden;
resize: auto;
padding: 15px;
border: 2px dashed #ccc;
}
<h2>Embedded Image</h2>
<div class="resize-demonstration">
<div class="container">
<h1>Title</h1>
<img src="https://placebear.com/g/200/100.jpg">
</div>
</div>
<h2>Background Image</h2>
<div class="resize-demonstration">
<div class="container bg-img" style="height: 300px">
<h1>Title</h1>
</div>
</div>
JSFiddle Demonstration
I am trying to create a page footer with some text on the left, on the right, and centered on the page. I've been following examples such as this and I'm having the same problem with all of them: The content in the center div is centered between the borders of the left and right divs, not centered on the body. That is, if left/right are not the same width then the center is off-center.
I can't use fixed widths because I know neither the content nor the font size. I do know the content will be just a few words each.
I can't use explicit proportional widths either for similar reasons; I don't know the proportions of the content and e.g. the center may be short with a left or right side greater than 1/3 of the page width.
I don't actually have to use divs, I just am because that seems to be the way this is done... but anything that will get me a left + body centered + right aligned footer-style layout will work (as long as it works on all common browsers).
I don't care what happens when contents overlap; they can either overlap, or word-wrap, or do something else ugly.
Currently the closest I've gotten is this CSS:
#left { float:left; }
#right { float:right; }
#center { float:none; text-align:center; }
And this HTML:
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
</div>
But I am seeing this (an extreme example):
Here is a fiddle: http://jsfiddle.net/HCduT/
I've tried various combinations of float, display, overflow, and margin, but I can't seem to get this right.
Edit: I've also tried http://jsfiddle.net/nshMj/, recommended by somebody elsewhere, but it's got the same issue (with the disadvantage that I don't really understand what it does).
How do I make the content in the center div aligned to the page, rather than centered between the left and right divs (which have different sizes)?
I'm not 100% sure what you're after. Here's what I did get:
You want the left div on the left
You want the right div on the right
You want don't want to limit the width of those to 33%;
You want the center to always be dead center.
You don't care about overlapping content
If I got that right, then try this out: DEMO
CSS:(The color is just so you can distinguish the content, as it overlaps)
#content {
text-align:center;
}
#container {
position: relative;
}
#left {
float:left;
}
#right {
float:right;
color: #ccc;
}
#center {
text-align:center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: red;
}
After some research i ended with this:
html
<body>
<div id="content">center point V center point</div>
<div id="container">
<div id="left">L</div>
<div id="center">C</div>
<div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>
<br style="clear: left;" />
</div>
</body>
css
#content {
text-align:center;
}
#left {
width:33%;
float:left;
}
#right {
width:33%;
float:left;
overflow:hidden !important;
}
#center {
float:left;
width:33%;
text-align:center;
}
#container{
width:100%;
}
fiddle
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div