I have a strange bug when looking at my homepage in Chrome. The bug doesn't seem to appear when I try to edit it with CSSEdit:
I attached the pictures to show you what I mean. Those "points" next to the icons are linked as well.
What could be causing this error?
Thanks for the help!
EDIT sure here's the code (the page isn't online):
<div class="rss">
<p>
<a href="http://linkto">
<img src="/images/facebook.png" alt="Find me on facebook" />
</a>
<a href="http://linkto">
<img src="/images/twitter.png" alt="Follow me on twitter" />
</a>
<a href="http://linkto">
<img src="/images/rss.png" alt="Subscribe to RSS Feed" />
</a>
</p>
</div>
which is wrapped in a div class called footer. And the CSS
.site .footer {
font-size: 80%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
}
.site .footer .rss {
margin-top: 0em;
margin-right: -.2em;
float: right;
}
.site .footer .rss img {
border: 0;
}
Sorry for the strange formatting.
Those "points" are the text-decoration:underline portion of your CSS being applied to <a> tags. The reason you only see part of it is because the image you are using is covering the majority of it.
Try putting this in your CSS:
.rss a { text-decoration:none }
.rss a img { border:none; outline:none }
Related
I'm trying to build a basic bar that contains 5 buttons, every button is consist of an icon and below text that describes the icon.
I want that all the images will be on the same line and the descriptions will be underneath.
<img src=phone.png />call office
<img src=circle.png />link to website
<img src=book.png />add to contacts
in this code for example, "call office" should be below the first img, "link to website" below the second and so on but it writes the description but the description appears in the same line with the icons, every description next to itws icon.
can you help?
thx
Do it like this:
The icons/links are placed in a list, the HTML is cleaned up, and I've added a bit of CSS to show how it can look
ul {
list-style-type: none;
}
li {
display: inline-block;
margin: 1em;
}
li a {
display: block;
text-align: center;
}
li a img {
margin: 0 auto;
display: block;
width: 3em;
height: 3em;
}
<ul>
<li><img src=phone.png><br>call office</li>
<li><img src=circle.png><br>link to website</li>
<li><img src=book.png><br>add to contacts</li>
</ul>
I would change the HTML as well. Put just the text in there, because the images have no semantic value. Using CSS you can show the icons, and you don't even need an element for that. Just use the ::before pseudo-element.
nav.social {
text-align: center;
}
nav.social a {
display: inline-block;
padding: 3px;
}
nav.social a::before {
content: "";
display: block;
height: 32px;
background: url(http://www.phonebook.com/favicon.ico) top center no-repeat;
}
nav.social a.website::before {
background-image: url(http://stackoverflow.com/favicon.ico);
}
nav.social a.vcard::before {
background-image: url(https://en.wikipedia.org/favicon.ico);
}
<nav class="social">
<a class="phone" href="tel:036781223333" title="call us">call office</a>
<a class="website" href="http://www.bgasgdhen.com/" title="website">link to website </a>
<a class="vcard" href="advbagsgadron.vcf" title="add to contacts">add to contacts </a>
</nav>
I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.
I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!
I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.
http://www.adrianhoulewebprojects.com/HomePage.html
Here is my HTML
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
Here is my CSS
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a :hover, :focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thank you for any help.
CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
Also want to make it a:focus unless you want every element to be affected.
Remove the space between a and :hover
a:hover{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
I have a margin used to space some headings down away from an image, but despite this method working on other pages, it does not in this instance.
I know there are plenty of alternative solutions, but am curious as to what is wrong with this one. Can anyone help?
<div class="column" style="width: 237px">
<img src="img.jpg" alt="" title="img" width="237" height="300" class="alignnone size-full wp-image-84" />
<h1 style="margin-top: 40px">VAL</h1>
<span class="detailhead">Heading 1</span> <span class="detail">Detail 1</span><br />
<span class="detailhead">Heading 2</span> <span class="detail">Detail 2</span>
</div>
These are all the additional class declarations:
The image class has no associated style (class was inserted by Wordpress).
h1 {
font-size: 17px;
}
span.detailhead{
font-size: 13px;
color:#000000;
}
span.detail {
position: relative;
top: 1.5px;
font-size: 14px;
color:#000000;
}
.column {
display: block;
float: left;
}
Here is the offending style i overlooked:
img {
display: block;
float:left;
margin-right:10px;
margin-bottom:10px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
z-index: 2;
}
A more specific selector fixed the issue.
Thanks to all for helping me with this seriously schoolboy error!
Could you try adding a style="display:block" to the img tag?
If your using chrome or safari for testing: use the element inspector to check wether your inline setting is not overruled by an !important; declaration in one of the classes.
Edit: To quickly test this you can also add " !important;" to your inline css.
I am having a problem with my css sprites. It looks like it is working (well, to me it looks like it should work). All the sprites just show the first icon but not the other ones.
Looked at many places and could not find an answer.
Thanks for helping me.
I put it up on a seperate page to save time.
[dead link]
And for those who aren't able to go to that page for any reason, here is the code:
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="iconFB linkIcon" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" class="iconFL linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
And the css is here (shortened):
.iconFB {background-position:0 -40px;}
.iconFL {background-position:0 -82px;}
.iconRSS {background-position:0 -164px;}
.iconY {background-position:0 -246px;}
.linkIcon {
width: 36px;
height: 36px;
background: url(iconSprite.png) no-repeat top left;
}
Thank you very much for helping!
You have a CSS specificity problem.
The CSS like this:
.iconFB {
background-position:0 -40px;
}
is being overridden by this:
.linkIcon {
..
background: url(iconSprite.png) no-repeat top left;
..
}
because background is shorthand for (amongst other things) background-position.
The easiest way to fix this is to swap around the two blocks of CSS, like this:
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align:middle;
background: url(iconSprite.png) no-repeat top left;
}
.iconFB {
background-position:0 0;
}
.iconFL {
background-position:0 -82px;
}
.iconRSS {
background-position:0 -164px;
}
.iconY {
background-position:0 -246px;
}
(I fixed the position of the Facebook icon, from 0 -40px to 0 0)
.linkIcon.iconFB and .linkIcon.iconFL and so on will solve this. Currently your linkIcon style overwrites the positions you set in .iconFB because it's further down in the CSS file.
Edit: (or just move the iconFB etc. styles below the .linkIcon styles)
The position of the background image is being overridden by the shorthand background in .linkIcon.
Either re-order the CSS, or use separate background-image and background-repeat declarations (and no background-position) in .linkIcon. I'd argue the latter is preferable.
Another way would be to use id's as these icons are probably unique and not reused on the same page. As it is used to "identify" a certain icon it makes sense to use an ID instead of a class.
<style>
#iconFB {
background-position: 0 0px;
}
#iconFL {
background-position: 0 -82px;
}
#iconRSS {
background-position: 0 -164px;
}
#iconY {
background-position: 0 -246px;
}
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align: middle;
background: url(iconSprite.png) no-repeat top left;
}
</style>
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="linkIcon" id="iconFB" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" id="iconFL" class="linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
<div class="iconDiv">
<a href="#" title="RSS Page">
<img src="./1px.png" id="iconRSS" class="linkIcon" alt=""/><span>RSS</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.youtube.com/" title="Youtube Page">
<img src="./1px.png" id="iconY" class="linkIcon" alt=""/><span>YouTube</span>
</a>
</div>