I have an image (picture of a lawn) styled with the following:
img{
width: 100%;
height: 40%;
position: fixed; <!-- top of page-->
}
I have an <h1> Putnam Lawn Care</h1> that I would like to have overlap and be centered in the image, but am unsure how to do this with css (I have tried position:fixed; top: 20%; left: 50%; but this puts the 'P' of 'Putnam Lawn Care' at 50% so this is also not centered) ? Also I am unsure if fixed positioning is correct here, should I be using absolute? Thanks in advance for any help!
Here's with a dynamic image size and wrapping element.
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
margin: 0;
}
.wrap {
position: relative;
float: left;
}
<div class="wrap">
<h1>Loreum!</h1>
<img src="https://picsum.photos/300/200" alt="Loreum Pics">
</div>
I hope this will work. This can place the h1 tag in 100% width and text inside that will be center aligned.
h1{
position:fixed;
top: 20%;
width:100%;
text align: center;
}
Since you used position:fixed for the image, it is better to use fixed position for <h1> also.This will help to stick the <h1> always with image.
why not just put both the img and the h1 tag in an enclosing div, and then do the absolute positioning on that div - this will be more maintainable because you won't have to be setting position: absolute on multiple elements
Related
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a square image that I want to have centered on the screen. Problem is that I want the image to stay a square, while being not more than 80% of both the width and the height. I have used the following code, which makes my image 80% of the height (when height < width), and centers the image vertically, but not horizontally of course. When using a fixed width, I could have used margin-left: 50%; margin-right: 50%, but with relative size, this would set the left side of the image at 50%. Any ideas?
.my_img{
max-width: 80%;
max-height: 80%;
margin-left: 10%;
margin-top: 10%;
}
Try this:
.my_img_container {
position: relative;
}
.my_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is a fiddle:
http://jsfiddle.net/l0wskilled/voubtxrt/
if your image has display: block then you can probably use margin: auto auto and remove the % margins. If its display is inline or inline-block, you can use text-align: center on the parent element of the image to make it horizontally centered. I have not tested this code. If this doesn't work, and you have no problem with jQuery, this can be done with few lines of jQuery.
You could also try:
<div class="container">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" />
</div>
With the style:
.my_img {
max-width: 80%;
max-height: 80%;
margin-left: auto;
margin-right: auto;
display: block;
}
I think this is what you are wanting anyway, maybe i'm wrong!
https://jsfiddle.net/dLozvcmo/2/
I need to dynamically display 2 graphic image files that represent opening and closing quotes as shown below in the sample screen shot.
The quotes need to appear just to the left and to the right of the upper content block as shown. Content block widths will vary on the page.
I have tried float and background image. Does anyone have a tip or trick to properly, dynamically and flexibly position 2 image files?
Here is what I have so far after working with #Utkanos answer:
HTML
<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div>
CSS
div#maincontentcontainer div#primary div div.postsPage_item_content {
position: relative;
text-align: center;
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE1.png');
content: '';
display: block;
left: 20%;
height: 28px; /* background-image natural height is 28px */
position: absolute;
top: calc(50% - 50px);
width: 36px; /* background-image natural width is 36px */
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE2.png');
left: auto;
right: 20%;
}
Display
Desired results are that (1) each of the dynamically rendered quotes align with the top of the content block, and (2) the quotes dynamically position with margin padding to the left and right of the content block as shown by the red arrows.
Pseudo elements are perfect for this sort of thing.
HTML:
<div id='my_div'>
<p>Content here.</p>
<p>Etc.</p>
</div>
CSS:
#my_div {
position: relative;
}
#my_div::before, #my_div::after {
content: '';
width: 50px;
height: 50px;
position: absolute;
display: block;
background: url('path/to/open_quote_img.png');
left: 5%;
top: calc(50% - 25px);
}
#my_div::after {
background: url('path/to/close_quote_img.png');
left: auto;
right: 5%;
}
That code assumes your quote graphics are 50px in width and height - modify as required.
Finally, to ensure your content doesn't overlay the quote images, set an appropriate padding-left and padding-right on the container (in my example, the div) so the content is sufficiently pushed in away from them.
Another possibility is using absolute positioning inside a relative container. For example:
.container { width:300px; position:relative;padding:20px}
.left-quote {position:absolute; top:10px; left:10px; font-size:30px;}
.right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}
<div class="container">
<span class="left-quote">"</span>
<span class="right-quote">"</span>
<p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p>
</div>
html:
<div id="main">
<div id="foo">foo</div>
</div>
css:
html,body{
height: 100%;
}
#main{
height: 100%;
}
#foo{
height: auto;
/* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
height: 100%;
display: block;/* or inline-block*/
}
demo
I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.
I cannot change the markup and please if possible without touching the css for #main would be great for me.
You can center an element vertically within it's container using this technique:
#foo{
position: absolute;
top: 50%; // move down 50% of parent
transform: translateY(-50%); // move back up 50% of own height
}
Set position: relative; on the #main container to make #foo relate to it.
Demo
Try this:
#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}
I have the following HTML:
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer is a narrow vertical strip. div.inner is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.
This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg) style is applied, but is somewhat offset after. This is particularly noticeable when div.outer is short.
Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of transform-origin that solve this problem.
The key is to set position top and left to 50% and then transformX and transformY to -50%.
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
see: http://jsfiddle.net/CCMyf/79/
It may be a bit late for answering that question, but I stumbled on the same issue and found some way of achieving it, by adding another div in the way.
<div class="outer">
<div class='middle'><span class="inner rotate">Centered?</span></div>
</div>
and applying a text-align: center on that middle element, along with some positioning stuff:
.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}
The .inner also gets a display: inline-block; to enable both rotate and text-align properties.
Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/
The another option to rotate text 90 degree and center on axis Y is:
.rotate-centered {
top: 50%;
right: 50%;
position: absolute;
transform: scale(-1) translate(-50%, 50%);
writing-mode: vertical-lr;
}
<span class="rotate-centered">Text<span>
Example: https://codepen.io/wwwebman/pen/KKwqErL
But because of bad support in IE/EDGE writing-mode does NOT work there:
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Can you add margin: 0 auto; to your "rotate" class to center the text.
.rotate {
-webkit-transform: rotate(-90deg);
-ff-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 16px; /* transform: rotate() does not rotate the bounding box. */
margin: 0 auto;
}
The answer from 'bjnsn' is good but not perfect as it fails when the text contains space in it. For example he used 'Centered?' as text but if we changed the text to let suppose 'Centered? or not' then it will not work fine and will take the next line after space. Ther is not width or height defined for the inner div block.
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
background: #DDD;
}
https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/
But we can make the whole text centered align properly, by setting the inner div width equal to height of the outer div, line-height of inner div equal to the width of the outer div and setting the display flex property for inner div with align-items:center and justify-content:center properties.
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content:center;
align-items:center;
line-height:40px;
}
$('#height').on('change', function(e) {
$('.outer').css('height', $('#height').val() + 'px');
$('.inner').css('width', $('#height').val() + 'px');
});
updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/
Removing : margin-top: -7px; from .inner made the vertically rotated text centered for me. It also made the horizontal text not centered.
Just remove the above code?
You could add this:
$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());
To your .on('change') function, as you can see here: http://jsfiddle.net/darkajax/hVhbp/