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 */
}
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 having some issues with using Bootstrap for the first time. For some reason no matter what changes I make to my custom css it does not affect the bootstrap css or the regular html of the layout. I am currently trying to build my first website in visual studio and have been advised to work with bootstrap however I cannot seem to get it to work the way I want it to. I have successfully created web elements that I want without the use of bootstrap however when I try to use bootstrap it just does not want to display any of my custom css no matter what I do.
As I stated above, the first thing I tried was editing the bootstrap css directly, which had absolutely no effect on the layout of my webpages. After this, I discovered it was a good idea to create a seperate main.css file and then link it in to bootstrap file, with any changes being made to the main.css file should change the bootstrap css without having to mess up the bootstrap file. However, using this method none of the changes alter the way the webpages are displayed in any way. After this, I decided to follow this tutorial https://websitesetup.org/bootstrap-tutorial-for-beginners/ step by step, even though it is a notepad++ tutorial and not a visual studio tutorial. Even following this tutorial step by step none of the changes made to the css are displayed on the webpage.
When I simply add the html I want to the layout page without linking the bootstrap or main.css to the layout page the features work as intended, but I cannot customize some things with html so I need to get it working with css.
I have done a few google searches for solutions to this issue and tried several, such as moving code from the body of the layout page to the footer, ensuring the file directory for the .css files is correct, including capital letters, but I cannot seem to find where the issue is.
This is how I linked my layout page to the main.css file which contains the css for altering the nav bar of my webpages:
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
this is the link to the Main.css file with my custom .css that I used in the layout view in visual studio
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
This is the link to the bootstrap file I used when following the above tutorial and added this to the head of the index.html file
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is the stuff I put in my main.css file, while also finding the .nav classes in the bootstrap.css and trying to put this information in the bootstrap file also.
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
I am trying to change the colour of the nav bar, the colour of the text, the colour of the text on scroll over, the colour of the text on the nav bar of the page that is currently being viewed, the text type/size/position and I want the nav bar to be fixed at the top of the page so that as you scroll down the page you can still see the nav bar at the top of the window. And I want the nav bar to scale with the size of the window for mobile users, a feature that is included in bootstrap. I understand everything I mentioned is not present in the above css, this is because I wanted to test it was functional before I began typing out all the css I need.
I can already do all of this without using bootstrap but for this project I am required to use it and I just can't seem to display anything other than the default bootstrap nav bar no matter what I change in the css.
First of all move your style Link after Viewport and also move your custom css file Main.css after Bootstrap.min.css. Try this I hope it'll resolve your issue. Thanks
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StyleSheet -->
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
Hi all I'm facing a problem with printing pages.I want to have same header on all the pages im printing.I read several answers from stack seems no straigt forward answer.
thanks in advance.
Add a stylesheet for the printing of the page.
<link type="text/css" href="print.css" rel="stylesheet" media="print">
Then create a div with your hidden print-only header.
<div class="printOnly">Header</div>
Hide the printOnly div in your regular CSS file.
.printOnly { display: none; }
In your print.css, do whatever you need to do to your div. This is also where you would hide otherwise visible properties.
.printOnly { /* Style */ }
This is how I managed print styles.
So, if you have a div called normalHeader that you want gone when you print, simply set the style to display: none; on the print.css file.
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.
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