skip to Main Content

I am making a little page as a project for school (don’t mind content, it’s in Polish). I have tried deleting CSS and it worked, but the look of it was just awful.

Here is the HTML:

<header>
    <img src="zdjecia/diablologo.png" alt="Diablo Logo">
</header>
<aside>
    <ul>
        <li><a href="bocz1.html">Pow</a>
        <li><a href="bocz2.html">Powrót do strony głównej</a>
        <li><a href="bocz3.html">Powrótony głównej</a>
    </ul>
</aside>

Here is the CSS:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header img {
    width: 350px; /* Zmienić odpowiednio */
    height: auto;
}

content {
    margin-left: 500px;
    position:relative;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

aside {
    min-height: 110vh;
    background-color: #666;
    color: #fff;
    width: 2;
    float: left;
    padding: 30px;
}

aside ul {
    list-style-type: none;
    padding:0 ;
}

aside ul li {
    text-align: center;
    margin-bottom: 30px;
} 

content {
    flex-grow: 1;
    padding: 20px;
    margin-left: 230px;
    flex-direction: column;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    clear: both;
}

a {
    text-decoration: none;
    color: white;
}

p {
    text-align: justify;
}

h3 {
    font-size: x-large;
}

I tried making <a> as a button but still nothing. I just want to open second page linked to a specific <a href>. The link to the page is valid; it worked without CSS.

2

Answers


  1. My initial assumption is the reason you’re having issues with your links is due to an invalid URI path. If you double check that the page you’re trying to go to is being linked to properly since the CSS you have here shouldn’t interfere with the link.

    As an example, I’ve recreated your code and added completely different links to illustrate my point.

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    header {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    
    header img {
      width: 350px; /* Zmienić odpowiednio */
      height: auto;
    }
    
    content {
      margin-left: 500px;
      position: relative;
      height: 100%;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    aside {
      min-height: 110vh;
      background-color: #666;
      color: #fff;
      width: 2;
      float: left;
      padding: 30px;
    }
    
    aside ul {
      list-style-type: none;
      padding: 0;
    }
    
    aside ul li {
      text-align: center;
      margin-bottom: 30px;
    }
    
    content {
      flex-grow: 1;
      padding: 20px;
      margin-left: 230px;
      flex-direction: column;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      clear: both;
    }
    
    a {
      text-decoration: none;
      color: white;
    }
    
    p {
      text-align: justify;
    }
    
    h3 {
      font-size: x-large;
    }
    <header>
      <img src="zdjecia/diablologo.png" alt="Diablo Logo">
    </header>
    <aside>
      <ul>
        <li><a href="https://www.google.com/">Pow</a>
        <li><a href="https://www.google.com/">Powrót do strony głównej</a>
        <li><a href="https://www.google.com/">Powrótony głównej</a>
      </ul>
    </aside>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search