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;
}
Related
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'm looking for some help. I'm in a project where i need to upload images to a freemarker template(.ftl) which is coded with html. I'm using hippo cms console to create sitemaps, etc. I need to use local images in my project (from the project directory) but the URL they take is from localhost:8080/site/images. But I don't know where localhost:8080/site is in my project or where it refers.
Here is the code:
So,
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>
here I was using an Internet image and it works correctly, but I need to use the image at my site/freemarker/images/agoraLogo.PNG.
Here is the project structure:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
font-family: Verdana;
}
.login {
color: white;
padding: 1%;
background-color: #2B516B;
}
.contButton {
padding: 0.5%;
padding-left: 4%;
padding-right: 4%;
color: white;
background-color: black;
text-align: center;
font-family: Verdana;
border-radius: 10px;
}
.agoraIcon {
height: 50px;
width: 200px;
}
.content {
text-align: center;
}
.credentials {
padding: 0.5%;
font-family: Verdana;
border-radius: 10px;
}
#year {
text-align: center;
}
</style>
</head>
<body>
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon" />
<div class="login" id="year">2018</div>
<div class="content">
<p><b>Inicia sesión con tu <br>cuenta de concesión</b></p>
<input type="text" class="credentials" placeholder="Email" />
<input type="password" class="credentials" name="psw" placeholder="Contraseña" />
<div>
<a href="http://localhost:8080/site/welcome" type="button">
<button class="contButton" type="submit"> Continuar </button>
</a>
</div>
</div>
</body>
</html>
Directory to the image
Change this :
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>
to :
<img src='../images/agoraLogo.PNG' class="agoraIcon"/>
It is best to have binary links generated. You can use the #hst.link tag to do this.
I think you need:
<#hst.link path="/freemarker/images/agoraLogo.PNG" var="image"/>
The var image will contain the link.
See the documentation for more details:
https://www.onehippo.org/library/concepts/links-and-urls/hst-2-urls.html
May I also suggest you work through our tutorials?
https://www.onehippo.org/trails/demo-tutorials-and-download.html
I'm getting into the field of web design, and for practice purposes, I'm trying to create responsive HTML and CSS websites modeled after real websites so I only worry about the development, not the design. As of now, I'm redesigning apple.com. My problem is that in the apple.com navigation bar, the Apple logo is consistently around an inch away from the links to other parts of the site. As you resize the browser, it stays around an inch away. The problem is that on my (unfinished) version of the site, the apple logo stays fixed in one position as you resize the browser.
Here's my code:
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
}
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
.font {
font-family: San Francisco;
}
.logo {
position: absolute;
left: 5em;
top: .5em;
}
.center {
display: inline;
text-align: center;
}
.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}
header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}
.ul-header {
margin: .8em;
}
.li-header {
display: inline;
}
.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}
.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}
.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}
.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}
#media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>
</html>
Someone suggested this solution:
How to horizontally center a <div> in another <div>?
The problem is that I'm trying to figure out how to work with the differences between images and text to center them, so simply throwing them in a div won't work.
I've tried putting the text and the image in a div and centering it, % values, messing with the display property, and a few other things, but nothing seems to work.
I'm also a newbie web dev, so if there's anything else I should fix, feel free to let me know.
Thanks,
Lyfe
Run an inspect element on the Apple page and you'll see they place their image as another list element. You on the other hand are placing it outside your list.
Here is your code, with the Apple logo placed as the first list element:
<ul class="ul-header">
<li class="li-header"><img src="apple_logo.png" width='20px'></li>
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
</ul>
EDIT
To ensure your apple logo aligns vertically with the other elements in your list, add this to your CSS:
#app_logo {
margin-top: -10px;
}
.center ul img {
vertical-align: middle;
}
Note I added an ID to the image. Also, your settings may be slightly different.
if we have an actual look at the CSS and HTML of the apple page this is how you do it:
html:
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
<span class="ac-gn-link-text">Mac</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
<span class="ac-gn-link-text">iPad</span>
</a>
</li>
... There are More...
</ul>
css:
#media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}
.ac-gn-apple{
position:absolute;
width:48px;
top:0;
left:50%;
margin-left:-24px;
text-align:center;
z-index:1
}
Comment:
I would bet the
position:absolute;
does the trick, however, I cut out allot of the webkit code. If yo ureally want to make a dynamic page/responsive page, you need to learn the Bootstrap Library, it is honestly super easy to use and to start using. Makes everything dynamic and responsive.
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}
Here is my website.
http://www.gtaresources.net/
The css makes anchor elements have certain css properties and i just want it for like a navigation bar. just the login button and when i add a menu. But for now you can see that green behind the image at the top right. It's not supposed to go behind every anchor i just want it for certain ones and i can't or don't know how to do inline css for only the menu with the a:visited and a:hover and stuff. What's the solution? I just need to make some of the css only work for a certain elements or elements.
I made notes of where the css that is interferring begins and ends.
Here my source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}
ul { <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
a:hover, a:active {
background-color: #7A991A;
} <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["admin"];
var pwArray = ["password"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}
}
</script>
</head>
<body>
<ul background="/victoria/cutiepie2.jpg" hidden>
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
<img src="/victoria/logo.jpg" width="250" height="75" class="logo">
<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text- decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>
<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>
<p id="p">Username: <input type="text" name="username">
Password: <input type="password" name="pword">
<input type="button" value="log in" onclick= "validate()"></p>
</form>
<center><h1 style="color: #003300;">GTA Resources</h1></center>
<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg"
width="1000" height="500"></center>
<br><br>
<p id="para">
Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics
on anything Gta related. And just have a good time. Enjoi!!:)
</p>
<center>Click here for help</center>
<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>
</body>
<!--MTD(c) 2014-->
</html>
The clean method to do this would be using CSS classes. In your HTML, add a class to the css elements that should have the green background.
HTML:
my link
CSS:
a.green-on-hover:hover {
background-color : green;
}
Note: The class name, is just like a variable-name can be anything, even 'hyphens' are allowed in the class-name. I gave 'green-on-hover' you can call it anything you want.
Found this very simple tutorial to help you with classes:
http://www.tizag.com/cssT/class.php
Hope that helped. Let me know if you have questions.
One Suggestion: Try to make your question, more generic next time.
You background the anchor with green and you put inside the image on it and you see the result of yours.
try this
html:
<a href="/index.html">
<img width="250" height="75" class="logo" src="/victoria/logo.jpg">
<span></span>
</a>
css:
a,a:link, a:visited {
color: #ffffff;
position:relative;
display: block;
font-weight: bold;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a span{
position:absolute;
width:100%;
height:100%;
background-color:#98bf21;
z-index:2;
left:0;
top:0;
}
a img{
position:relative;
z-index:0;
}