I want to put text in "p" into center of my "div". My html is like this:
<div class="picture">
<img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image">
</div>
<p class="textik"">Hello handsome.</p>
But i cant change html tags. I can only us CSS. Is there a way to do this? I tried some ways, but none seems to work.
The only way to do this without changing the HTML is to artificially align the p tag above the div tag like so.
p.textik {
margin-top: -5px;
}
Adjust as needed, and test for mobile devices.
If you don't want the elements underneath to move up as well, you can use either padding-bottom to prevent this.
p.textik {
padding-bottom: 5px;
}
I'm assuming you actually want to make the p tag appear in the centre of your image, so you can position it absolute and transform it's location using css. By using absolute positioning and transforming the location you don't need to reposition should the size of your image/outer elements change. Something like:
<div class='someOuterElement'>
<div class="picture">
<img src="http://placehold.it/500/500" width="500" height="500" >
</div>
<p class='textik'>Hello handsome.</p>
</div>
and style it with:
.someOuterElement {
position: relative;
width: 500px
}
.textik {
text-align; center;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
There's more info about css transform here
Related
I have two images, one on the left and one on the right. I am facing issues in writing text onto both images.
I am pasting HTML code and CSS code. Please correct it.
#container {
width: 400px;
height: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 999999999;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
}
<div id="header">
<img src="images/banner-img1.jpg" class="left">
<p id="text"> jhcjdhdjshdjdhjd</p>
<img src="images/banner-img2.jpg" class="right">
<p id="text"> jgdhdgdhddhhsd</p>
</div>
Both of your paragraphs refer to the same ID, but ID's must be unique. Try using a class here instead.
.text {
...
}
and
<p class="text"> ... </p>
Also, you use class="left" and class="right" on your image tags, but these classes don't yet exist in your css code.
Create a container for the image and make it’s position relative. (to get along with the rest of the page)
Place the image within the container.
Place the text immediately below the image within the container and make it’s position absolute (to overlay text on the image) and place it as you please.
Finally, add some CSS tricks to suit your needs.
I have the code below to display the image and the code as a hyperlink. But I would like the image placed behind the text and person can click on either
<h1>test</h1> <img scr="#"/>
Use CSS to achieve this:
test
Here you can see more info about background-image: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
You have syntax error in your code, you must use <h1> outside the <a> tags, like this:
<h1> test </h1>
You can also use position: absolute so the text will be on the top of the image.
HTML
<a href="#">
<h1>test</h1>
<img src="http://spi3uk.itvnet.lv/upload2/articles/54/542197/images/Jauka-vasara-8.jpg"/>
</a>
CSS
a {
position: relative;
}
a h1 {
position: absolute;
z-index: 100;
color: #FFF;
}
Demo Fiddle
I recommend you to use background:
<h1>test</h1>
But if you want, you can use another variant (negative margin):
<h1 style="height: 24px;">test</h1><img style="margin-top: -24px;" src="..."/>
Or absolute position:
<h1 style="position: absolute; z-index: 9;">test</h1><img src="..."/>
P.S. You have some typos in code: scr -> src and <\h1> -> </h1>
Well, it depends how you'd be using this.
Either set is as a background image instead of adding an img-tag.
But that would mean you'd have to set the height. Otherwise your image would crop.
...or you can set the (wouldn't use h1 in this case for semantic reasons) span with the text to:
CSS
span {
display: block;
position: absolute;
}
and then position it wherever you want inside the image.
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
See js fiddle here http://jsfiddle.net/Ws8ux/
Is it possible to keep the text under logo without hiding it using display:none or text-indent? I want to bring the image up and keep logo behind it. Like is PSD layers. And Don't want to use Logo Image as a CSS background
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" />Logo Text
</a>
Like this (fiddle)?
HTML:
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" /><span>Logo Text</span>
</a>
CSS:
a { display: block; position: relative; }
a span {
display: block;
position: absolute;
top: 40%;
}
What's the purpose of keeping the text if it's to be hidden? If your goal is to hide the text underneath the image for the purposes of accessibility, you may be interested to know that most search engines won't fault you if you just leave the text as an alt attribute on your image. In contrast, you might find some techniques for deliberately hiding content could prove detrimental to your cause.
If it's important to have both the image and text present, you may want to try wrapping the text in a <span>, using an accessible style on that and then disabling it in your print stylesheet.
#jitendra; may be you have to play with css:
CSS:
a { position:relative; }
img { position:absolute; top:0; left:0 }
HTML:
<a href="/" title="Return to the homepage" id="logo">
Logo Text<img src="http://lorempixum.com/100/100" alt="Nike logo" />
</a>
check the fiddle may that's help your http://jsfiddle.net/sandeep/Ws8ux/11/
You can do this by setting position: absolute for the image. You should probably also make sure the anchor is the same size as the image, so that it doesn't break the layout of other elements on the page.
img {
position: absolute;
}
a {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
}
The updated fiddle: http://jsfiddle.net/Ws8ux/7/
I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}