I have an image that is using absolute positioning on my site. It is positioned to appear over a css-background-image. It works fine in gecko based browsers and webkit. I was surprised to see the same problem in BOTH versions of IE including 8. I am currently using a png for the image but tried it with a jpg and that made no difference. Relevant markup and css below....Any ideas ?
<div id="have_vid">
<div id="click_here">
<a href="/services"<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>
</div>
</div>
#have_vid {
width: 328px;
height: 152px;
background-image: url(images/havevid.jpg);
background-repeat: no-repeat;
float: right;
margin-right: 10px;
margin-top: 10px;
padding-bottom: 14px;
border-bottom:1px dotted #616161;
}
#click_here{
position: absolute;
top: 50px;
right: 24px;
}
Your 'A' element is wrong. Try
<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png" />
Also use fiddler to watch and see that IE is downloading the image correctly.
You're missing a closing angle on your <a> tag:
<a href="/services"<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>
Should be:
<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img>
Related
I'm facing an issue with Internet Explorer 11 (Version 11.0.9600.18204) on Windows 7. The website I'm developing seems to be having a problem displaying correctly:
However, the same error does not appear on Internet Explorer 11 (Version 11.0.9600.18205) on Windows 8.1:
Is there any way to fix this?
Edit: This is the CSS code in question:
div[Attributes Style] {
text-align: -webkit-right;
}
user agent stylesheetdiv {
display: block;
}
#footer {
clear: left;
margin-top: 1em;
margin-left: 0px;
margin-right: 0px;
background: #efefef;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
}
div {
display: block;
}
for this piece of html code:
<div id="footer_container" align="right">
<div id="footer">
<b>
Impressum
</b><img id="j_id_t" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces"><b>|</b><img id="j_id_v" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces">
<b>
Datenschutzerklärung
</b><img id="j_id_x" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces"><b>|</b><img id="j_id_z" width="10px;" height="" alt="" src="/ivy/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces">
<b>
AGB
</b>
</div>
</div>
Please check the parent div-container and set:
position: static
This should avoid the perceived behavior.
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I want to have a button with an image and a link. Here is my style-code:
<style>
twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30%;
height: 30%;
}
</style>
and my body code:
<twitter href="#"> </twitter>
But it doesnt show any image. I tried a lot of different image-paths, but it just will not show...
oh. why not
<img src= "cima/social/twitter.png" />
<style>
a img {width:30%;height:30%;}
</style>
You HTML is invalid as you are using custom (non-valid) elements. Try
HTML
<a class="twitter" href="#"> </a>
CSS
.twitter{
display:block;
background-image: url('CIMA/Social/Twitter.png');
width: 30px; /* or whatever value */
height: 30px;
}
I have some <img> tag which will be load some images via the php code.
The following code :
<div class="images_cd">
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image9'); ?>" alt="" />
<img src="<?php the_field('case_image10'); ?>" alt="" />
</div>
I would like to add 50 px padding-bottom for each img tag, but for the last one i don't one that padding.
Here is my CSS :
.images_cd{
}
.images_cd img{
margin-bottom: 50px;
}
.images_cd img:last-of-type{
margin-bottom: 0px;
}
But the last img still get the 50px padding as well as 0 padding.
And the thing is the -50 px is also not working for that.
What is the problem?
I copied your code as written, but added some outlines so you could see things and it's working just fine.
.images_cd{
width:400px;
border:1px solid blue;
}
.images_cd img{
margin-bottom: 50px;
width:100px;
height:100px;
border:1px solid red;
}
.images_cd img:last-of-type{
margin-bottom: 0px;
}
You can see it here and verify that there's no margin-bottom on the last img.
My guess is that something else must be overriding that CSS rule.
use
.images_cd img:last-child { }
instead
I have a set of small images which is working fine in Firefox but not in Google Chrome. The html code is this:
<li class="links">
<img src="<?php bloginfo('template_directory'); ?>/images/taxNero.jpg">
<img src="<?php bloginfo('template_directory'); ?>/images/eco.jpg">
<img src="<?php bloginfo('template_directory'); ?>/images/pet.jpg">
<img src="<?php bloginfo('template_directory'); ?>/images/diverability.jpg">
</li>
And the css styles:
#nav-bar li.links a {
display: block;
float: left;
margin: 0 1px;
width: 40px;
}
Here's the link to the webpage to see it: http://www.alcappellorosso.it
You should see the images right below the left navigation menu.
Add in your CSS:
#nav-bar li {
height: 35px;
}
Or value more situable for your design.