I have a set of divs (11 of them), 8 of them with an image and 3 of them with ':'.
all 11 boxes are inside a class "timer".
Something like this:
<div class="timer">
<div><img></div>
<div><img></div>
<div>:</div>
</div>
I added text over image by using p tags inside each div and using this code on css:
.text{
position: absolute;
left: 85px;
top: 185px;
}
But on resisizing the window, the boxes move but the text stays. How can I make the text move along with the boxes?
Missing a few things here: <div>:</div> should actually be: <div class="text">:</div> if you want to apply your CSS that's targeting .text to this div containing the :.
Also if you want the container to hold the absolutely positioned element, you need to set your timer to be relative position: .timer { position: relative; }
Related
I need to overlay text and images over both basic-b1.png and basic-b2.png. How would I achieve this so that it's easy to accurately position the text and images?
I do understand how to add text on images when there is only one image within the div element. However when there are two images and they both have to be center aligned with each other I cannot separate out the images into different div elements.
CSS:
.bun{
text-align:center;
position:relative
}
HTML :
<div class="bun">
<img src="basic-b1.png" height ="320" width ="212">
<span style="padding-left:200px"></span>
<img src="basic-b2.png" height ="320" width ="212">
</div>
The ::hover selector is usually used in such cases
Html:
<div class="bun">
<img src="https://images.unsplash.com/photo-1538497508301-aa6452af8400?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ca19176e4dc2bcc9269edf74c9c10d4f" height ="320" width ="212">
<img src="https://images.unsplash.com/photo-1521624928109-a794da7909a9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=48e97751d49c36e90b877ab2bbe27c3e" height ="320" width ="212">
</div>
Css:
.bun{
text-align:center;
position:relative
}
.bun::before {
content: 'hi there';
color: yellow;
position: absolute;
font-size: 40px;
left: 40%;
top: 40%;
}
You can place an image instead of text by doing content: 'url(...)'.
If you need different imgs/texts for each img, you would have to wrap them in another div and put the ::before selector on those because the img tag doesn't accept ::before.
I'm trying to achieve a look where I have all of the icons justified to the left while keeping the text centered and have the text wrap onto another line if necessary. However, I want the icon to be inline with the title. Right now it looks like this:enter image description here
I'm not sure why some of the boxes are stretching vertically and why the icons are floating on the line above the text. Also, some of the text is shifting outside of the grey boxes they are supposed to be in. How do I get every icon/title to look like the top example (ie eye glyphicon with "Look Inside This Chapter" text)?
Here is the HTML code I'm using:
<div class="text-left"><span class="glyphicon glyphicon-download">
</span> <div class="text-center">Teacher Pre-Assessment</div></div>
I also tried this code to see if that would work but I'm not having any luck:
<div style="float: left; text-align: left"><span class="glyphicon
glyphicon-download"></span> <div class="text-center"> Teacher Post-
Assessment </div></div>
In that scenario, you can set the icon position to absolute and then left:0. However, that can make the icon just go outside the .text-left div. So you need to set its position to relative, because absolute elements are positioned according to the closest ancestor that has position relative.
.text-left {
position: relative
}
.text-left .glyphicon {
position: absolute;
left: 0;
}
Then you're free to position the other elements as you want.
You could put the icons into a pseudo class, so they don't clutter up your html:
.text-center {
padding-left: 25px;
position: relative;
}
.text-center:before {
position: absolute;
content:"";
top:0;
left:0;
width: 20px;
height: 20px;
background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png) ;
background-size:100% 100% ;
}
this basically creates an absolute positioned div in .text-center , thats why .text-center needs some padding so the text doesn't run below the icon.
Example: https://jsfiddle.net/6mjscdxL/
More Details about pseudo classes: https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I get a div to float to the bottom of its container?
I have this code to float a div to the bottom right side of a div. But the span gets stuck to the upper left.
<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >
<span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span>
</div>
Is there a different way to place the span?
You should probably separate your HTML/CSS from each other properly.
Your code could look something like this
HTML:
<div>
<span>Absolute right bottom aligned to div...</span>
</div>
CSS:
div { position: relative; }
div > span { position: absolute; right: 0; bottom: 0; }
Obviously your div should have some height/width which exceeds that of the span, but generally this is a very acceptable way of doing it.
This doesn't make the content of the div 'flow' around the span but that wasn't specified clearly. As said, what you have there should work in that case and if it doesn't it is in the rest of your code.
vartical-align is very particular to get to work (which is why I almost never use it)
On the span:
position:absolute; bottom:0; right:0;
and put a height/width on the parent div and you'll be all set
<div id="popupLeft">
<h1 class="popupTittel">Title goes here</h1>
</div>
I want this text go outside the div popupLeft, but only for xx pixles. Is that possible?
Perhaps I did not explain well enough.
There are two "modes" on my website. If the content is supposed to draw a gallery I have the title, intro-text and content-text in a div called 'popupLeft' and a gallery in the 'popupRight'.
But if there is no gallery, is is supposed to be text in both the divs, and I want the title to stretch all the way from the left-div and the right-div. The right and left-div are positioned side by side.
add it position:relative
ie. to get it 10 px above, do this:
.popupTittel {
position: relative;
bottom: 10px;
}
if you want to move it right outside the div, add position:absolute like this
#popupLeft {
position: relative;
}
.popupTittel {
position: absolute;
bottom: 100%;
left: 0;
}
Like in margin-top: -10px; or similar? You should consider reading a CSS guide, since this is very elemental stuff.
Id actually use position:relative; top:-10; as that will keep all elements below that objects margins correct...
Example here :)
http://jsfiddle.net/r2bp9/
I need to create a <div> of height 200px that has some text at the very top and the very bottom. This needs to work in all major browsers. I've tried various combinations of alignment/vertical-alignment with no luck.
Use two spans (or whatever) inside the div:
<div>
<span id="top">Text at top</span>
<span id="bottom">Text at bottom</span>
</div>
Then give the div position: relative; and position the spans absolutely:
div {
position: relative;
height: 200px;
}
span {
position: absolute;
}
span#top {
top: 0;
}
span#bottom {
bottom: 0;
}
Live example:
http://jsbin.com/ucowi3
You can't do this with one single block of text, as you're talking about two separate bits of styling (ie one bit to the top and one bit to the bottom), so you'll need to put the two bits of text into their own separate elements within the main <div>. eg
<div class='maindiv'>
<div class='topofmaindiv'>This goes at the top</div>
<div class='bottomofmaindiv'>This goes at the bottom</div>
</div>
Then you can style them using CSS to position the two inner divs at the top and bottom of the main div:
.maindiv {
height:200px;
}
.topofmaindiv {
position: relative;
top:0px;
}
.bottomofmaindiv {
position: relative;
bottom:0px;
}
Obviously you will probably need to add other styles to that to suit your layout, but that should get you started.