I am trying to make a navbar, background, and style consistent through a few paged site. I have done a bit of research and found I might be able to use a server side include or the link property to embed a page in all the pages so I can change once and feel the effects on all the pages, I found the way to change the background is to add it to the body tag, but shouldn't the body tag be separate from the embedded file? I considered opening the body tag in the template file and closing it in each individual page, but that seems very bad.
Here is my unfinished template file.
<style>
body {
background-color: #afa7a7;
color: white;
}
.button {
background-color: #424242;
color: white;
border:none;
padding 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px; 2px;
cursor: pointer;
}
</style>
<body>
<a href="Main.shtml">
<img src="images/pentagram.png" alt="Pentagram" width="200px" height="200px" style="float: left;" />
</a>
<a href="Main.shtml">
<img src="images/pentagram.png" alt="Pentagram" width="200px" height="200px" style="float: right;" />
</a>
</body>
Related
I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.
This is the navbar before making the image clickable.
This is the HTML for it:
<div class="top_nav">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
This is the CSS for it:
.top_nav {
overflow: hidden;
background-color: #2c3e50;
border-bottom: 20px solid #ed0162;
position: fixed;
top: 0;
width: 100%;
}
.top_nav a {
float: left;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 17px;
margin-bottom: 0;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
.logo {
float: left;
margin: 15px;
}
This is the HTML and webpage after I try to make the image clickable:
There is now big spacing inbetween and the hover style now affects the image when I don't want it too.
The HTML code after:
<header>
<div class="top_nav">
<a href="https://www.ntu.ac.uk/">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
</a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
</header>
I've tried removing the 'logo' class from the image style but it doesn't really change it that much.
There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.
.top_nav {
display:flex;
justify-content:space-around;
align-items:center;
overflow: hidden;
background-color: #2c3e50;
font-size:2vw;
width: 100%;
}
.top_nav a {
width:10%;
color: white;
text-decoration: none;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
img{
width:100%;
}
#short{
width:2.5%;
}
<div class="top_nav">
<a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
I find that it's generally pretty poor practice to use element names (such as a and div) in CSS selectors at all, for this exact reason.
Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav .navigation. Then you could add a similar class to the logo <a>.
Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.
One way to solve this is to use the :first-of-type pseudo css selector. Something like that would be the correct way to handle it:
.top_nav a:first-of-type {padding: 0;}
EDIT
I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
To:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge" />
This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
I have a button which when pressed revokes a user's access token. I want to make it look like the Sign in with Slack button.
I am attaching the html code for the Sign in with Slack Button below.
<a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=373568302675.374024189699">
<img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack#2x.png 2x"
/>
What do I need to do to make my button look the same?
For now, the code for my button is as under:
<input type="button" value="Unlink Slack" onclick="location.href='#Url.Action(" RevokeAuth ","Settings ")'"/>
Is this what you were looking for I added the input to a div with the slack image and added the onclick to the div as well as the button so the pointer looks correct.
<style>
.slk {
border: 1px solid #C8C8C8;
width: 170px;
width: 170px;
border-radius: 5px;
display: flex;
height: 35px;
cursor: pointer;
}
.slkInp {
color: #383838;
background-color: white;
border: none;
padding: none;
font-size: 15px;
font-weight: bold;
}
.slkInp:hover {
cursor: pointer;
}
</style>
<div class="slk" onclick="location.href='#Url.Action(" RevokeAuth ","Settings ")'">
<img alt="Unlink Slack" height="30" width="30" style="padding-left:10px;" src="https://pbs.twimg.com/profile_images/885554951857946624/sd7GRyjY_400x400.jpg" /><input class="slkInp" type="button" value="Unlink Slack" onclick="location.href='#Url.Action("
RevokeAuth ","Settings ")'"/></div>
<a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=373568302675.374024189699">
<img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack#2x.png 2x"
/>
First off, I can't ask for clarification in a comment because of the 50 reputation requirement. Fair enough.
What it seems like you're asking is how do you want to style a button to look like the Slack button, but with only HTML? All they are doing here is using an <img> tag to throw a button on the screen. If you want to copy this behavior exactly, grab an image editor and draw a rounded rectangle with 1px black border, throw your icon on the right and some text on the left then follow the slack design:
<a href="https://linkhere.link">
<img alt="Sign in with X" height="40" width="172" src="image.png" />
</a>
If you want to be able to have a button styled similarly with just HTML and CSS you can do that too, with your input:
input {
height: 40px;
width: 172px;
border: 1px solid gray;
border-radius: 5px;
background-color: white;
content: url(image.png);
...
}
Then add your own image and move the text and image to your liking.
I have two buttons, one on the left, and one on the right. For some reason when I zoom in, I see my main button, and a bigger one behind it. They both change color when I hover, and are both clickable, but only the main one at the front links me where I want to go. I want the mysterious appearing button behind the main one to disappear. I think it may have something to do with the width, but it is set at 180px, and the height is auto.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="setupstylesheet.css">
<title>Setting up Your Website Folders</title>
</head>
<body>
<div id="body">
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div class="margin">
<div class="shading">
<h1>2. Setting Up Your Website Folders</h1>
<p>In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:</p>
<ol>
<li> Create a folder on your hard drive or a USB called "Website".</li>
<li>Open a blank Notepad++ document.</li>
<li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
<li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
<li>Inside your "Website" folder, create another folder called "Images".</li>
<li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
</ol>
<p>Your website folder should now look something like this:</p>
<img src="Images/webfolderdemo.jpg" width="80%" height="80%">
<p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
<div class="needs">
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
</div>
<div class="extrainfo">
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
.webheading {
size: 300px;
text-align: center;
color: #FFFF00;
font-family: "Arial Black", Gadget, sans-serif;
}
.needs {
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.needs:hover {
background-color: #4CAF50;
color: white;
}
.extrainfo {
float: right;
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.extrainfo:hover {
background-color: #4CAF50;
color: white;
}
.margin {
margin-left: 20px;
margin-right: 20px;
}
.shading {
border-radius: 15px;
width: auto;
height: auto;
padding: 10px 25px;
text-align: left;
background-color:rgba(0, 0, 0, 0.6)
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="setupstylesheet.css">
<title>Setting up Your Website Folders</title>
</head>
<body>
<div id="body">
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div class="margin">
<div class="shading">
<h1>2. Setting Up Your Website Folders</h1>
<p>In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:</p>
<ol>
<li> Create a folder on your hard drive or a USB called "Website".</li>
<li>Open a blank Notepad++ document.</li>
<li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
<li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
<li>Inside your "Website" folder, create another folder called "Images".</li>
<li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
</ol>
<p>Your website folder should now look something like this:</p>
<img src="Images/webfolderdemo.jpg" width="80%" height="80%">
<p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
<div class="button-wrap">
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
</div>
<div class="button-wrap">
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
css -->
.button-wrap {
display: inline-block;
width: 171px;
}
remove float:right from .extrainfo
removed width for both buttons.
You can simplify your markup like that :
<div class="container">
<a href="index.html" class="button needs">
1. Things you need
</a>
<a href="extrainfo.html" class="button extrainfo">
3. Extra Information
</a>
</div>
And CSS could be something like that :
.container {
text-align: center;
}
.button_test {
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.button_test.extrainfo {
// CSS for .extrainfo
}`
It is because your buttons are 'floating'. you should not have the same class on the button and container as mentioned above in the comments.
Once you have your button/div class situation fixed, you can use clear: both; on the containers and/or display: block; or display: block-inline; and that should stop the buttons from overlapping.
As long as you change the "float" attribute in the class that binds onto the buttons, the buttons would not be overlapping anymore.
If i am not mistaken, you can keep your "float" if you add "padding " attribute to your buttons
OK. I fixed it.
I stupidly had the same class name for my divs and my buttons, so thats why it was doubling up. I also found a much easier solution for aligning my buttons on the same row as eachother. Rather than having a div around each button, I did this instead:
HTML:
<div>
<a href="index.html">
<button type="button" class="needs">1. Things you need</button>
</a>
<a href="extrainfo.html">
<button type="button" class="extrainfo">3. Extra Information</button>
</a>
</div>
As for the CSS, nothing needed to be changed:
.needs {
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.needs:hover {
background-color: #4CAF50;
color: white;
}
.extrainfo {
float: right;
display: inline-block;
font-weight: bold;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #FFFF00;
background-color: #00FF00;
border-radius: 10px;
height: auto;
width: 180px;
}
.extrainfo:hover {
background-color: #4CAF50;
color: white;
}
I am styling a landing page for a facebook campaign on a wordpress website. It is not my own website and I do not want to change in the general css for the whole website when I style the landing page. Therefore I'm styling all the elements of my entry right in the text editor for that entry, if that makes sense.
When people click the link on facebook they get to the page I'm making. Basically the page should consist of two buttons that redirects people further on the page. I styled two anchor tags like squared buttons and so far so good, but to really get the "clickable" feel I want the background to change when the a tag is hovered.
Here is how I created the buttons:
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
If I had a stylesheet I could just style the a:hover with another background color and I would be done, but since I'm styling the individual elements on the page I dont know how to style the :hover property of the element within style="".
How do I style the :hoverproperty of an html element right in html? Or is there a way to create a stylesheet inside of the entry in wordpress?
I've tried to add this in to the entry, but it did not work:
<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>
Could someone point me in the right direction? Thanx!
You need to add !important to your CSS rules to override backgroound-color directly in HTML.
a:hover.green {background-color: #799f34!important;}
a:hover.blue {background-color: #2c8cba!important;}
If OP wants to do it in HTML, not in CSS, there is some examples I found: exaple one and related post
I think you should put these code in any other block/ div which will identify this page from the rest of the page. i create a snippet of your code this will clear everything to you.
#land-pg .green:hover {background-color: #799f34 !important;}
#land-pg .blue:hover {background-color: #2c8cba !important;}
<div id="land-pg">
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
</div>
ANOTHER SAME DIV BELOW which are not affected
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>