Reputation: 103
Hey guys I have an external CSS and HTML file, I am currently trying to link the two, more specifically I am trying to link the ids that are titleImage
titleLink
and webpageTitle
. Unfortunately the CSS for does not seem to register. I have tried switching the position of the type and the id such as instead of this, #titleImage img
that did not work. Is it an issue with me having multiple external CSS references? Also this is not all the code there is more to each but the ones listed below are the parts that I focus on the most. I have also tried removing the a
, img
, h1
So could someone explain why titleImage
titleLink
and webpageTitle
styles are not registering on my localhost?
UPCDATE: I have made change to reflect everyone's comments below and the site is still not updating with the new css as listed in the code below in style.css
style.css
div#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
HTML file
<head>
<link href='http://fonts.googleapis.com/css?family=Alef:400,700|Roboto+Slab' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="/css/lightbox.css" rel="stylesheet">
</head>
<body>
<section class="container">
<header class="row" id="header">
<!-- Begin grid -->
<div class="col-sm-9"><!--Top of the page-->
<a href="/" id="titleLink" style="color:#000000"><h1 id="webpageTitle">McMaster SEClub</h1></a>
<div id="titleImage"><img src="/img/logo.gif" width=150 height=110></div>
</div>
Upvotes: 1
Views: 40947
Reputation: 1
Remove all your capital letters, it doesn't work with capitals.
So instead of titleLink, and titleImage, write titlelink and titleimage.
That should fix it, it fixed it for me.
Upvotes: 0
Reputation: 216
The titleImage
ID is for the <div>
surrounding the image, not the image itself. At the moment, you are trying to find an element with a #titleImage
selector inside an image tag.
For the titleLink
, the ID is the element, so you can do this instead:
a#titleLink { ... }
However, you'd typically only have one ID on a page, so you could just target the title link by doing this:
#titleLink { ... }
The webpage title should be working as intended. However, I'd still recommend just using the ID. An element with relative positioning doesn't really appear different unless you've given it some style declarations:
#webpageTitle {
position: relative;
top: 10px;
left: 10px;
}
Hope that helps.
Upvotes: 2
Reputation: 111839
There shouldn't be any spaces in front of id so the code should be:
img#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
Upvotes: 0
Reputation: 4043
Remove the space in the selector.
img #titleImage
means: any element with id titleImage
and an <img>
element as ancestor
img#titleImage
means: an <img>
element with id titleImage
. That's what you want.
Upvotes: 1
Reputation: 1543
get rid of the space between the tag type and the id. So and make the rules:
img#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
What you have is saying "the element with an ID titleImage that id a child of an image tag, etc.
Since you are using IDs, its not necessary to even include the tag type (a, img) in front of the ids.
Upvotes: 0