Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}
Related
I'm trying to put a logo on the top left corner, and text parallel to the logo (top center).
The text should have the same distance from both sides of the page regardless of the logo.
I tried adding around "display: table; display: table-cell; position: relative; position: absolute;"
But the best I can get is text being centered but not on the same line as the logo but a bit low.
html:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
css:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
example image:
You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.
I've also added some margin to show you the title stays centered
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
use flexbox!
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}
<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>
There a numerous ways to go about this; I'll describe one method here.
Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.
Thus, a complete example might look like:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
A JSFiddle Example: https://jsfiddle.net/g01z27tv/.
Keeping Proper Alignment
If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.
First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.
Next, create a wrapper <div> for your logo. In your case:
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
</div>
<!-- ... -->
</header>
Now, add some styles for .logo-wrapper. Namely:
cause it to expand to fill the height of the header,
make it a flex container,
make its items' vertically centered,
make it position: absolute, and
position it to the left of the header:
.logo-wrapper {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
}
Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.
Lastly, in order to properly align the text, we'll use flexbox on .header:
.header {
display: flex;
justify-content: center; /* Use this instead of text-align: center */
align-items: center;
}
You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.
An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.
Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.
.header {
border: 2px solid black;
width: 100%;
}
.logo {
float: left;
}
.header-text {
text-align: center;
position: absolute;
width:100%;
margin: auto;
}
.header::after {
content: "";
clear: both;
display: table;
}
<header class="header">
<div class="logo">
<img src="https://via.placeholder.com/75" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
As suggested in comments I have edited the text to be centred to 100% width.
I am trying to assign the button : called 'go to form' right at the bottom of the grid i have done in CSS.
I have messed around with the relative position but this seems not to want to work. Any ideas guys ?
.item {
border: 1px rgb(160,160,255) solid;
}
img {
border-radius: 2px;
border: 1px solid #ddd;
height : 100px;
width : 80%;
}
p {
font-size: 18px;
}
h1 {
font-size: 14px;
}
</style>
<div class="grid-container">
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> Sheep Dipper </p>
</div>
<div class="item"><img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> Laptop Request </p>
<h4> Use this form to request a new laptop</h4>
<button>Go to Form</button> </div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> New User Request </p>
</div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>
<p> Permissions Management </p>
</div>
<div class="item">
<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/> <br/><br/><br/><br/><br/></div>
</div>
try this one :
.grid-container{
position: relative;
}
.youBtnClass {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
Try this. Position absolute will place the button with respect to its immediate parent, and bottom attribute makes sure it starts at the very bottom of the parent.
You may add top margin in case your button lacks a gap on top of it.
.grid-container{
position: relative;
}
.youBtnClass {
position: absolute;
bottom: 0;
margin: 0 auto;
}
I have referred this question but it dint help me out . I am trying to change span tags height and width inside image tag but it's not working and this is my code:
html
<img class="profile_pic" alt="Sumanth Jois" src="file/someimage">
<span class="changePicture">HelloThere</span>
</img>
Css
//There are many spans so I am using the . operator to specify
span.changePicture{
width: 100px;
height:200px;
background-color:red;
margin-left: -150px;
color: white;
margin-top: -20px;
}
I am not able to change the width and height using this code.Can I know how I can solve this?
ThankYou
First, span is a single line element. So no height.
Second, image is not : <img> </img>
Image tag is a single tag <img />
Try using a div instead of the span. And may be add span within it.
span is by default an inline element which cannot take width and height properties but you may use display: block; or display: inline-block; to set height/width to it.
Snippet to overlay span over image :
div {
top: 10px;
left: 20px;
position: absolute;
color: #FFF;
}
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="image" />
<div>
<H1>Text </H1>
</div>
First of all the way you use img tag was wrong the html must be like this:
<img class="profile_pic" alt="Sumanth Jois" src="file/someimage" />
<span class="changePicture">HelloThere</span>
and just add display:block; to css to set height and width
span.changePicture{
width: 100px;
height:200px;
background-color:red;
margin-left: -150px;
color: white;
margin-top: -20px;
display:block; /*added*/
}
EDITED:
To do that you need to put the image into div like this one:
<div class="container">
<div class="background-img">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1tKSY61_ZLpmpR0PWO784otZulHIMgrNLECJ-Te8HwvqoXMJZv8GYDo" alt="Generic placeholder image">
<div class="overlay">
<span>Text</span>
</div>
</div>
</div>
Here is the css:
.background-img .overlay{
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.background-img .overlay {
opacity: 1;
width: 100%;
height: 100%;
background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
max-width:300px;
}
.container img{width:100%;
display:block;
}
Here is the jsfiddle:
DEMO
Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?
<img src=".\pncwelcome.png"
style="float:right; clear:right; margin-top:-40px;"
alt="PNC Welcome Logo"/>
<hr color="black"
style="margin-top:30px;" />
Use position: absolute;.
Check the fiddle.
Something like this should work.
The CSS:
.parent {
position: relative;
}
img {
width: 200px;
}
hr {
position: absolute;
z-index: 50;
top: 30px;
right: 0;
left: 0;
}
HTML:
<div class="parent">
<hr>
<img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>
Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index
on it so that it will still overlap the image.
If you float the <hr> you will have to set a width on the parent element.
Use:
<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/>
<hr color="black" style="z-index: 2; margin-top:30px;" />
If that doesnt' solve it use this instead:
<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/>
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />
Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...
Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:
#example {
display: block;
position: relative;
width: 100%;
height: 92px;
}
#example hr {
position: absolute;
z-index: 0;
top: 46px;
bottom: 46px;
margin: 0px;
width: 100%;
border: 5px solid #8fcbf1;
}
#example img {
position: absolute;
width: 272px;
height: 92px;
z-index: 5;
left: calc(50% - 136px);
}
<div id="example">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
<hr />
</div>
Here is the Fiddle: https://jsfiddle.net/z517fkjx/
Also, this uses calc() for centering, which is CSS3-only.
I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:
HTML:
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS:
.gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}
.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
position: relative;
z-index: -1;
}
Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:
/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]
Here's a fiddle:
http://jsfiddle.net/pureux/Er9eG/
You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.
.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}
.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}
Is this what you're trying to do:DEMO
HTML
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS
.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
z-index: -1;
}