I have this image: http://fs5.directupload.net/images/160602/xfrddbfa.png
and I would like to add it into my website. But, I'd also like to add a small gap in between each and every flag.
Is that somehow possible? Here is the HTML where I'd like to place it as a pseudo element before the class "headline":
<div class="bottom_dual">
<a title="title" href="#">
<span class="headline">Lorem ipsum</span>
</a>
<span class="caption">Lorem ipsum.</span>
<span class="more">
<a class="teaser_link" href="#">more</a>
</span>
</div>
Thanks for your help!
Image editing isout of the scope of HTML/CSS and I would really suggest just making separate images using image editing software for each flag if this is what you intend to do, but I will provide an ugly work around if you truly wish to do this.
Also, I'm not sure you're using pseudo element correctly.
Place the image tag 5 times - 1 for each flag.
<img id="flag1" src="example.com" />
<img id="flag2" src="example.com" />
<img id="flag3" src="example.com" />
<img id="flag4" src="example.com" />
<img id="flag5" src="example.com" />
Use CSS to crop each image to each flag.
#flag1{
position: absolute;
clip:(rect, 0px, 30px, 20px, 0px); // Position of the flag
}
etc..
I hate myself for even giving that answer. Seriously, just edit the image.
The best way to solve this problem is to use photoshop..
Cut your 5 flags out from that one single image
Then move them (space them )...
Links which You could refer to:
https://www.youtube.com/watch?v=6aMbMk9IGoM
https://www.youtube.com/watch?v=VTHudF4fo2I
The above links explain you on how to cut (crop ) an image and to move them..
Hope this helps you..
use this style :
.headline:before{
padding-left:30px;
background:url(http://fs5.directupload.net/images/160602/xfrddbfa.png) no-repeat -66px 0px;
content:" ";
}
Related
I have a forum # http://forum.banaisbul.com
If you check the site you can see there's a problem with the header background. I want to change the entire header background to the color of the logo background. But I don't know which codes to put where.
Matthew Rath gave you the correct answer to the problem that you wrote. But the bigger problem that you have revealed is that you do not know how to use your resources. Take some time and learn to use your web developer tools (web inspector, etc). Then you can solve these issues quickly by yourself.
It's #404040 - Tested in Photoshop:
HTML:
<div style="background-color: #404040;">
<a href="http://forum.banaisbul.com">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</a>
</div>
Photoshop Image:
From the looks of it you can simply add some CSS to the div that contains the header image.
<div class="imgheader">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Then in your CSS file out could do
.imgHeader{
background-color: #3D3D3D;
}
Alternatively,
<div style="background-color: #3D3D3D">
</div>
The hardest part will likely be matching the CSS color hex code (e.g. #3D3D3D) to your image. You may want to look here to try to get an exact match : Paletton.com
You need to style the container div which currently has no selector assigned to it:
http://puu.sh/blDRr.png
This being the case you could do:
.cnt-container > div {
background-color: "your colour"
}
you could also add it directly in your page-template (this is called 'inline styling'):
a couple of lines below your opening body tag you'll find
<div>
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
and you need to change it to
<div style="background-color:#404040">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
I'd like to move facebook and twitter buttons and make them more visible on my temporary site:
gaberivers.com
Now they are below the footer and no one can see them. I'd like to move it next to the 1st text column. Outside of that text box...that way people would see it much better.
Demo:
http://jsfiddle.net/ZWq8g/
Okay, so if I understand correctly, you're trying to move your Facebook and Twitter images to the left of your columns. So lets make a new column, called columnSocial and in the CSS:
#columnSocial {
line-height:120px;
background-color:#394046;/*background: url(black.jpg) no-repeat 0 0;*/
width:64px;
height:250px;
float:left;
position:relative;}
I copied most of that from your existing columns -- be sure to edit one of the other columns width down to accommodate (your column container only allows 900px, so you need to shave off 36px somewhere else) this new column. The line-height attribute is useful to get some vertical spacing, since we can't use vertical-align on div elements.
In your HTML, you will need to add:
<div id="columnSocial">
...
</div>
After your container begins and before column1 begins. Feel free to toggle any of the numbers as you like, but that should get something similar to what you were asking for.
As a general design note, having good structure (like a container for your columns) takes a lot of the work out of changes like this -- it ended up being trivial to move the images, since all we had to do was make a new column.
Here is what you need:-
your footer should be like
<div id="footer" style="text-align: center;">
<p>© 2012 Angloesfera. Todos los derechos reservados.</p>
<div id="snetworks">
<a class="show" href="https://www.facebook.com/pages/Academ%C3%ADa-AngloEsfera/190496871000029"> <!--a http-vel kell a link...vagy kulonben az en oldalamon belul fogja keresni a linket-->
<img width="36" height="36" rel="" title="" alt="facebook" src="images/facebook.png"></a>
<a class="show" href="https://twitter.com/GoE_Shop">
<img width="36" height="36" rel="" title="" alt="facebook" src="images/twitter.png"></a>
</div>
</div>
and css for #snetworks
#snetworks {
left: 100px;
position: absolute;
top: 2px;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Link into full div - html and css
I'm trying to construct CSS where the <a> tag covers an entire <div> block, so that anywhere on the <div> can be clicked.
Here's how the final div should look (image is 64×64px):
Here's the HTML:
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
Any CSS guru's help?
May be you can write like this:
<a href="#">
<img src="" alt=""/>
<h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
CSS
a{
display:block;
}
Note: as per html5 you can define block elements inside <a> tag
If you want have to anchor cover the whole block, your HTML should reflect that. While block-level anchors are a fresh idea from XHTML2/HTML5, they are working in nearly all modern browsers (even IE 7).
Just enclose all the DIV's contents with the anchor:
<div>
<a href="#nohref">
<img src="" alt="" />
<h3>On The Beach <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
</div>
div a {
display: block;
}
See also: http://html5doctor.com/block-level-links-in-html-5/
Shiny, but not new
What’s also very interesting about this technique is that actually this isn’t new: you can do it now. […] That’s one of the interesting things about HTML 5—it documents existing browser behaviour. As the browsers already handle wrapping links around block-level elements, and there is an obvious use-case, there was no reason to artificially keep the structure as invalid.
Wrap with anchor tag
<div>
<a href="#" class="cont-wrap-link">
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
<a>
</div>
CSS
div a.cont-wrap-link
{padding:0px; margin:0px;
display:block;
text-decoration:none;
}
Seeing as your doctype is HTML5 you can wrap the entire block in an anchor:
<a href="yourURL">
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
</a>
No need for any JS :)
Check out this Post
Remember: Ensure that the structure of the document still makes sense when CSS is not present.
Update
You can Achieve this using HTML5. Check this
While this probably could be done with somewhat hacky CSS I believe JS (jQuery) is easier in this case:
$('#the-div').click(function () {
$(this).find('a').eq(0).click();
});
Or something like:
var theDiv = document.getElementByID('the-div');
theDiv.onclick = function () {
window.location = theDiv.getElementsByTagName('a')[0].href;
};
I would suggest to add onclick="location.href='http://google.com';" style="cursor:pointer;" to your div tag.
I have got this div..:
<div id="logoCover" style="position: absolute;width: 341px;height: 100px;z-index: 9999;top: 0px;left: 0px;"></div>
The problem with the div, is that, it would only show in ie8, if i give it a background color.
Otherwise the div wont exist, which means the user cant click on it.. why is that behavior common in ie8 and how do I prevent it
UPDATE:
This is the element on which I try to place my div:
#logo {
float: left;
height: 93px;
}
logo is an image
FULL HTML:
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
<div> tags are not supported as content for <a> tags inside of standard HTML. Some browsers try to acommodate for this, but you really can't depend on every browser implementation to handle it the same way.
However, you can make an <a> tag a block element (it is an inline element by default) and move the style from the <div> tag to the <a> tag. This would also eliminate the need for the inner <div> tag in your example.
try adding display:block or insert a ' '
also, check that your relative div is also rendering right.
hope that helps.
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;background-image: url('images/emptyImage.png')" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
Solved the problem, What I had to do is to use a transparent image, as a background.
Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .
<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>
JSFIDDLE
Images come with a default border, that only disappears when the image is downloaded. That image comes from the src attribute of the image. If no src is set, then the image won't be downloaded, and the border will be forever there - your case exactly.
A normal img tag looks like this:
<img src="/something.jpg" />
yours looks like this:
<img />
You're adding your image through css's background-image. Not as it should be done. You can add a background image, but it's usually for other purposes. (check the aside at the bottom).
Try removing the background image and placing the image location on the src attribute of the image. Like this:
<img class="next" src="/share.png" />
You'll see the image has no border now.
Aside
When a background image is added to an img element, it's usually to provide a placeholder image for when no img src is set. Think of avatars on the comments section of a blog.
Also
When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!
Suppose your html tag is <img class="somthing" /> and in the class "something" you have defined the background position of the image.
As you select a particular image from the image sprite more accurately, a particular position where the image is. Your class is proper where you fetch the image using the background position in css.
A simple solution to remove the border is just make the img tag as a div.
if you fetch the image according to the background position why it is necessary to use a img tag.
Just write the html like ...<div class="next" ..>
you can use a base64 very small transparent image, if you would not use an external file
<img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Found it out, JOPLOmacedo was right, but you don't have to remove the background, just use the src tag. JSFIDDLE. (Sorry about the images, but I needed them to test the src)
HTML:
<a href="http://www.yahoo.com/">
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/>
</a>
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>
CSS:
img.home{width:40px;height:32px;
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;}
img.next{width:40px;
height:32px;
border:none; float: right;
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}