I'm trying to get a small yellow swoosh to underline a word in some text and stay where it is as the page resizes. Right now I can get the swoosh in the right spot under the text, but when the screen resizes it all goes to hell.
Here is an image of what I'm going for
<div>
<span>
<h1>How are you doing? Hello World.</h1>
<img src="imageurl here">
</span>
</div>
div {
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
width: 40%;
position: absolute;
}
h1{
text-align: center;
}
span {
margin-left: 140px;
top: 40px;
position: absolute;
z-index: -1;
}
(I didn't want to share the image URL as it is proprietary)
Any ideas on how to achieve this type of effect responsively?
Put your image inside of the h1 tag and give your h1 tag a position property. Also make sure you are setting h1 to be a inline-block element and center it somehow.
<h1>How are you doing? Hello World.<img src="imageurl here"></h1>
h1{
text-align: center;
position: relative;
display: inline-block;
margin: 0 auto;
}
img{
left: 0;
top: 0;
position: absolute;
z-index: -1;
}
There are many different ways to achieve what you're after.
Related
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
My header image is overlapping my text and it is very much annoying me. Another thing that is buggy is how my logo text leans right of the center of the image. If someone could help me with both that would be awesome.
Here is my code:
https://jsfiddle.net/c2bom0cc/1/
Here are my tags that are probably the most relevant to this:
#index_header {
position: block;
z-index: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
#index_header img {
position: block;
float: left;
width: 100%;
height: 100%;
}
.background_title {
position: absolute;
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
left: 50%;
top: 50%;
}
<div class="page_container">
<div id="index_header">
<a href="#">
<img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg"
/>
<p class="background_title">G.F. Bakery</p>
</a>
</div>
</div>
I let myself hold a few assumptions on your code:
First, by the full height and width of the image, I figured that you want the image as a stretched background image. So I replaced the <img> with background-image (background shorthand) in CSS Backgrounds.
From your question I see that you want the title in the center of the bakery background.
I did not get what text is overlapped by the image.
If you want text below the image, please put it in an element after <div id="index_header">...</div>, as the background is all over that <div>.
I had to add display:inline-block to .background_title class, so that the vertical-align:middle; would take effect.
I removed all the absolute positioning to handle better with all the alignments.
Absolute positioning make you manually set all the top and left, and it's really difficult to do when your code gets bigger.
Here's you new HTML:
<div class="page_container">
<div id="index_header">
<a href="#">
<p class="background_title">G.F. Bakery</p>
</a>
</div>
<p>Some other content...</p> // this text will not be overlapped by
// #index_header as long as #index_header
// isn't absolutely positioned
</div>
Here's your new CSS:
html, body{ // this is instead of having top:0 and left:0 in #index_header
padding: 0;
margin: 0;
}
.page_container {
height: 100%;
width: 100%;
}
#index_header {
height: 200px;
width: 100%;
text-align: center;
vertical-align: middle;
background: url('http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg') no-repeat center center;
background-size: 100% 100%; // this does the stretching
}
.background_title {
display:inline-block; // this is to apply the vertical-align of parent
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
}
Here's a JSFiddle
Hope this helps.
If you want your text to be under your image and centered, remove the following code:
.background_title {
position: absolute;
}
Just removing the position will move your text under your image and centered.
I'm having some trouble positioning my image next to my h1. The h1 is centered, and I would like to have my image placed on the right side of it. However, The position of the h1 may not be changed (thus, the image may not affect the position of the h1).
Relevant code I have so far:
<div id="header">
<h1>Header </h1><img src="pencil.jpg" alt="">
</div>
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
}
This code doesn't work at all; the image appears on the left side of the web page and is not being positioned relative to the h1 as I would like to.
I tried fixing this by putting the image into the h1 (to make it it's parent element), but by doing this the position of the h1 element changes (because the reserved space for the image is still preserved in the h1 element).
I hope someone can help me.
Kind regards,
Nick
That's because you're using a block level tag with another block level tag.
Check out W3 Schools for more info pertaining to inline VS. block level elements. :)
And if you want a more direct example using your code, here is a jsFiddle. This has it so the text is centered and the image is next to it, centered as well.
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
}
One solution is to give #header position: relative and position: absolute to the img:
h1 {
text-align: center;
position: relative;
}
img {
position: absolute;
top: -80px;
left: 60%;
}
#header {
position: relative;
}
fiddle
You cannot absolutely position elements with position relative. You should use position absolute.
This wont resize very well though. Hope it helps. :)
img {
position: absolute;
right: 20px;
top: 0;
width: 100px;
}
Example
Since you want them right next to eachother...
Wrap the header text in a span.
<div id="header">
<h1>
<span>Header</span>
<img src="http://placekitten.com/g/400/300" alt="" />
</h1>
</div>
Set both the span and the image to display: inline-block;
h1 span, h1 img {
display: inline-block;
}
If you want the text dead center then add some padding to the left, equal to the width of the image.
h1 span {
padding-left: 36px;
}
h1 img {
width: 36px;
}
Example 1
Alternatively
Put the image inside the span
<div id="header">
<h1>
<span>
Header
<img src="http://placekitten.com/g/400/300" alt="" />
</span>
</h1>
</div>
And set it to position absolute, so it hangs out the right hand side.
h1 {
text-align: center;
overflow: hidden;
}
h1 span {
position: relative;
}
h1 img {
position: absolute;
right: -36px;
width: 36px;
}
Example 2
Neither are perfect solutions, but hopefully one will be right for you. :)
So I've been working on a page with text and an image. However, I can't find a way to put the image between the text. either it stays on the top left, or it only centers horizontally. here is the code that is of importance:
<style>
body {
margin: 0;
background-image: url("rainbowbg.png");
}
div #hype {
margin-left: auto;
margin-right: auto;
display: block;
positon: relative;
}
#hypetop {
position: fixed;
top: 0;
width: 100%;
}
#hypebot {
position: fixed;
bottom: 0;
width: 100%;
}
.hypetext {
font-family: Impact, Charcoal, sans-serif;
font-size: 64px;
text-align: center;
}
</style>
<body>
<div>
<h1 class="hypetext" id="hypetop">DIRE</h1>
<img id="hype" src="DIREHYPE.png" width="224" height="224">
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1>
</div>
</body>
If anyone knows how I could get the image centered between the text, that would be great.
You can use this responsive css code. It may be help for you. Try it.I can change only position:fixed to position:relative.
Live Working Demo
HTML Code:
<div>
<h1 class="hypetext" id="hypetop">DIRE</h1>
<img id="hype" src="http://s30.postimg.org/qnju89rkx/banner.png" width="224" height="224"/>
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1>
</div>
CSS Code:
body {
margin: 0;
background-image: url("rainbowbg.png");
}
div #hype {
margin:auto;
display: block;
position: relative;
margin-top:50px;
}
#hypetop {
position: relative;
top: 0;
width: 100%;
}
#hypebot {
position:relative;
bottom: 0;
width: 100%;
}
.hypetext {
font-family: Impact, Charcoal, sans-serif;
font-size: 64px;
text-align: center;
}
Result:
Remove position:fixed; from hypetop and hypebot. This caused these elements to have fixed positions and not relative to the image.
you have to imagine them as blocks first. From what I get .. you need 3 blocks in the horizontal order: paragraph | image | paragraph , which gives us the following structure:
<p></p><img></img><p></p>
what you are missing is.. that you need to use the span tag instead fo a tag to make them not break. Which is opposite of making the page responsive (using )
simply put them like this:
<span>
<span id="test"><h1></h1></span>
<img src="" width="200px" height="200px" />
<span id="test"><h1></h1></span>
</span>
#test {
position: relative;
height: 200px;
width: 200px;
text-align: center;
display: block;
}
giving the above css rules... puts the text into a invisible/transparent block.. because we are not declaring any backround-color value. thus all 3 blocks become equal size.. 200px by 200px .. side-by-side in one line..
Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}