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-->
<h1 id="webpageTitle">McMaster SEClub</h1>
<div id="titleImage"><img src="/img/logo.gif" width=150 height=110></div>
</div>
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.
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.
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.
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;
}
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.
Related
Currently having an issue using a .css file in combination with an html script. Currently my index.html looks like the following:
<!DOCTYPE html>
<html>
<head>
<title>Bellamy Terminal</title>
<link rel = "stylesheet" type = "text/css" href = "../CSS/style.css">
</head>
<body class="css-theme">
<h1><strong>Bellamy Terminal</strong></h1>
</body>
</html>
To follow that up, in another directory/folder I have labeled CSS the following css script follows:
/* Theme of Site */
.css-theme {
color: lime;
background-color: black;
font-family: Lucida Sans Typewriter;
}
/* Theme of Site End */
h1 {
text-align: center;
}
The main issue is that my h1 element will not center which is a "wonderful" start for the beginning of my site lol. Would appreciate some help! Im using firefox
There is no float: center; - use text-align: center instead. And use h1 in the selector, not .h1 - that's not a class. So your complete rule is:
h1 {
text-align: center;
}
And another note: You don't have a class called css-theme anywhere in your HTML code, so you can't expect that rule to be applied anywhere.
ADDITIONS:
1.) There might additionally be a filepath issue (in the link to the stylesheet), but without knowing your file structure it's impossible to give you exact instructions for that. You might try href = ../CSS/style.css (note the two dots before the first slash), but that's just a guess.
2.) Your <style> and <title> tags should be wrapped in a <head> tag (which usually contains more than that), and the <link> tag should not be inside a <style> tag to make that valid HTML code.
First, the doctype should have the bang (!) before the word doctype.
Next, the link element does belong in the head, but not inside of style.
Also, while it's ok to add class to the body element, you can achieve the same result by setting up a CSS selector for body and eliminate the class from the HTML, which is generally preferred so that the HTML is less cluttered.
Additionally, strong is meant to convey importance semantically and usually causes the element it's used with to appear bolded. If all you are after is the bolding, strong isn't needed here because all heading elements will be bolded by default.
And, if you preface a relative URL with /, it will always look for the that resource at the root of your site, which may or may not be what you want. If the CSS folder is a child of the current page, don't preface the URL with /, just say the name of your folder as in: CSS/style.css.
/* Theme of Site */
/* If you make a tag selector, you don't have to add a class to the element */
body {
color: lime;
background-color: black;
font-family: Lucida Sans Typewriter;
}
/* Theme of Site End */
h1 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Bellamy Terminal</title>
<link rel = "stylesheet" type = "text/css" href = "/CSS/style.css">
</head>
<body>
<h1>Bellamy Terminal</h1>
</body>
</html>
I am making a hangman game. And I am working on styling everything. I am including CSS reset in my HTML and I think it is causing my tags to error out. Like my H1 tag isn't working now. Any thoughts?
The H1 tag should make my text big and bold. However that is not working. The linked stylesheet I am using is empty right now. When I remove the CSS Reset link the H1 then works correctly.
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container" id="gamebox">
<h1>Hang-Person</h1>
</div>
</body>
<script src="assets/javascript/game.js"></script>
</html>
The last script tag is outside the body tag. It should be inside
Be aware to not repeat the same properties for each object in CSS.
Example:
In reset.css:
body {
margin: 0;
text-align: center;
}
And in style.css:
body {
margin: 20px;
text-align: justify;
}
It might cause the browser to get confused, I recommend you to do CSS reset in only one of your stylesheets. You can do it in the other one as well, but it won't be as efficient.
Here you have the universal CSS reset code:
* {
margin: 0;
padding: 0;
}
After this, you can specify the margin or padding to every element, although it violates the DRY (Don't Repeat Yourself) principle.
CSS Working example:
* {
margin: 0;
padding: 0;
}
.object1 {
padding: 70px;
}
It would be more helpful if you post the CSS code for better answers.
Last but not least, the last <script src="assets/javascript/game.js"></script> tag should be inside the body tag.
EDIT: try with the universal CSS reset code and keep the linked stylesheet.
I have a div named "pos". I have 3 pages like index.php, register.php and login.php. I have defined the div property in css file and it working fine as per the content of each page. But in index page i want the same div to be displayed in little bit top. so what should i do to define the div property in the index page?
#po
{
margin-top: 12em; margin-bottom: 1.8em;
}
If you want custom styles for one page, then in the HTML for that page you can either define a custom style in some <style> tags in the head or include a custom stylesheet in the head
<head>
<link rel="stylesheet" type="text/css" href="customstylesheet.css">
<style> /* This is recommended as opposed to using a separate stylesheet */
#pos {
/* Your new styles */
}
</style>
</head>
This way you can avoid adding more classes and it reduces confusion on pages where the class is not found but the same stylesheet is used
You could add a index class to the html tag in index.php, and then in your css add the property like .index #pos{values}
<html class="index">
Or you could add the index class to the same div and call it like #pos.index{values} in your css.
<div id="pos" class="index">
Set a id or class on the body of the index page
Normal
.po{
/* your style */
}
Index Page
<body class="poindex">
body.poindex .po{
/* your style */
}
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />