Conflicting a href links?

Question

So I'm trying to make a website with two different links- however, the CSS that I'm editing them with recognizes them both as "a" and puts them in the same spot. This is aggervating, I've tried basing the css off of the they're in, but that doesn't seem to be working. Here's my code:

<html>

<h1>
<div id = "firstbutton">
<a href="http://google.com">GOOGLE</a>

    <style type="text/css">
        a {
            color: rgb(255,255,255);
            font-size: 60;
            font-family: Arial;
            text-decoration: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -85px;
            margin-left: -145px;
        }
    </style>
    </div>



    <div id = "forumbutton">
        <a href="http://www.google.com">Forum</a>
        <style type="text/css">
         a{
            color: rgb(255,255,255);
            font-size: 30;
            font-family: Calibri;
            position: fixed;
            text-decoration: none;
            top: 50%;
            left: 50%;
            margin-top: 260px;
            margin-left: -45px;
        }
    </style>
    </div>

</h1>




<body>


    <audio src="goingdown.mp3" autoplay></audio>

    <style type="text/css">
   body {

    background-image: url('spacewallpaper.jpg');

}
    </style>

</body>
</html>

Daniel A. White · Answer 1 · 2015-05-17T00:43:57.733

0

This is where classes come in handy. You should add a class attribute to each a and define your CSS with that class. Or you could use an ID.

Styles can get overridden with multiple style blocks or declarations. It doesn't apply the the closest tag.

edited May 17 '15 at 00:43

answered May 17 '15 at 00:38

Daniel A. White

187,200
47
362
445

Your "cascading" definition is partly true, but more accurately, https://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css – Kristján May 17 '15 at 00:40

score 0 · Answer 2 · answered May 17 '15 at 00:40

0

Set ID for each a element

Then css should look like:

a#name1{ ... }
a#name2{ ... }

answered May 17 '15 at 00:40

Somachr

464
1
8
21

score 0 · Answer 3 · answered May 17 '15 at 00:44

Here is your fixed code JS Fiddle - Working

 .GClass a {
            color: rgb(255,255,255);
            font-size: 60;
            font-family: Arial;
            text-decoration: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -85px;
            margin-left: -145px;
        }
.FClass  a{
            color: rgb(255,255,255);
            font-size: 30;
            font-family: Calibri;
            position: fixed;
            text-decoration: none;
            top: 50%;
            left: 50%;
            margin-top: 260px;
            margin-left: -45px;
        }


<html>

<h1>
<div id = "firstbutton">
<a href="http://google.com" class="GClass">GOOGLE</a>

    </div>



    <div id = "forumbutton">
        <a href="http://www.google.com" class="FClass">Forum</a>

    </div>

</h1>




<body>


    <audio src="goingdown.mp3" autoplay></audio>

    <style type="text/css">
   body {

    background-image: url('spacewallpaper.jpg');

}
    </style>

</body>
</html>

score 0 · Answer 4 · answered May 17 '15 at 00:46

You should set and ID for each element you are trying to add (implement), then you can call that element easily inside the CSS.

Also Element div cannot be nested inside element h1!

The font-size should be marked in pixels. Example font-size: 30px;.

score 0 · Answer 5 · answered May 17 '15 at 01:00

The structure of your document is slightly scattered...

it is better to put all your styles in the head section an not scattered through the body section

<html>

  <head>
    <style type="text/css">
    body
    {
      background-image: url('spacewallpaper.jpg');
    }
    a
    {
      color: #FFFFFF; 
      text-decoration: none;
      top: 50%;
      left: 50%;
    }
    .FirstLink
    {
      font-size: 60; 
      font-family: Arial; 
      position: fixed;
      margin-top: -85px;
      margin-left: -145px;
    }
    .SecondLink
    {
      font-size: 30;
      font-family: Calibri;
      position: fixed;
      margin-top: 260px;
      margin-left: -45px;
    }
    </style>
  </head>

  <body>
  <h1>
    <div id = "firstbutton">
      <a class="FirstLink" href="http://google.com">GOOGLE</a>
    </div>

    <div id = "forumbutton">
      <a class="SecondLink" href="http://www.google.com">Forum</a>
    </div>
  </h1>

  <audio src="goingdown.mp3" autoplay></audio>
  </body>
</html>

Try the code above and compare it to your own for reference to see the differences. Good luck.

Conflicting a href links?

5 Answers5