Problem in HTML mit nicht definierten Anker?

 - (Computer, Technik, Technologie)

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

In diesem Teil des Codes weist der letzte Link ein fehlerhaftes schließendes Tag auf.

      <h2>Videos&Kontakt</h2>

      <a href=""><i class="fas fa-video"></i>Videos</a>
      <a href=""><i class="fas fa-comments"></i>Chat</a>
      <a href=""><i class="fas fa-envelope-square"></i>Kontakt</

Aus diesem Grund kann sich der Link auf den nachfolgenden Teil der Webseite erstrecken

Es muss so sein:

      <a href=""><i class="fas fa-envelope-square"></i>Kontakt</a>

Danke Ihnen, daran lag's die ganze Zeit - Funktioniert nun einwandfrei!

Manchmal bin ich einfach schludrig beim deklarieren :D

LG Korbi

0

Hier noch CSS

/* --- ALLGEMEIN --- */


* {
  box-sizing: border-box;
}


body {
  margin: 0;
  width: 100%;
  font-family: sans-serif;
  background: #e3e3e3;
}


/* --- HEADER --- */


header {
  width: 100%;
  border: 10px solid #c80000;
  border-right: none;
  border-left: none;


}


header > h1 {
  margin: 0;
  font-size: 5rem;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  text-align: center;
}


header > h1 > a {
  display: block;
  text-decoration: none;
  color: #000;
}


header > h1 > a:hover {
  animation: bgc-change;
  animation-duration: 1s;
  background: #ff4848;
}


@keyframes bgc-change {
  from {background: none}
  to   {background: #ff4848}
}


/* --- NAVIGATION --- */


nav {
  width: 80%;
  margin: 0 auto;
  margin-top: 0.5rem;
}


[class*='nav-'] {
  width: 33.333%;
  background: #FFF;
  padding: 0.5rem;
  float: left;
}


[class*='nav-'] h2 {
  margin: 0;
  text-align: center;
}


[class*='nav-'] a {
  display: block;
  text-decoration: none;
  color: #000;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 1.8rem;
  border: 3px solid #c80000;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 50px;
}


[class*='nav-']  i {
  padding: 0 0.5rem 0 0;
}


[class*='nav-'] a:hover {
  transform: scale(1.025);
}


.test {
  width: 100%;
  height: 50px;
  background-color: pink;
  overflow: hidden;
}

 

Website flexible machen?

Ich habe eine Website mit HTML und CSS (header, aside, section und footer) erstellt.

Kann mir jemand erklären wie man das macht das wenn ich das Fenster kleiner mache das es sich kleiner macht und keinen Balken dazufügt.

Hier der Code :

HTML :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="style.css" type="text/css">

<title> Gaming</title>

<meta charset ="utf-8">

</head>

<body>

<div id="wrapper">

<header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="CSGOTeam.html">CS:GO Team</a></li>

<li><a href="Kontakt.html">Kontakt</a></li>

<li><a href="Bewerben!.html">Bewerben!</a></li>

</ul>

</nav>

<img src="banner.png" alt="LOGO" />

<img src="banner.png" alt="LOGO" />

</header>

<section>

<div class="article">

<img src="Vorschau.jpg" alt="LOGO" />

<a href="#">CSGO Team gewinnt Turnier</a>

<p>After several months at a discount, players have found their way to the AUG. Now that everyone has had a chance to learn to love it, the AUG has returned to its original price tag.</p

</div>

<div class="article">

<img src="Vorschau.jpg" alt="LOGO" />

<a href="#">CSGO Team gewinnt Turnier</a>

<p>After several months at a discount, players have found their way to the AUG. Now that everyone has had a chance to learn to love it, the AUG has returned to its original price tag.</p

</div>

<div class="article">

<img src="Vorschau.jpg" alt="LOGO" />

<a href="#">CSGO Team gewinnt Turnier</a>

<p>After several months at a discount, players have found their way to the AUG. Now that everyone has had a chance to learn to love it, the AUG has returned to its original price tag.</p

</div>

</section>

<aside>

<div class="sidebar">

<img src="Vorschau.jpg" alt="LOGO" />

<a href="#">Hallo there</a>

<p>ENCE’s magnificent improbable journey ends in the Grand Finals against heavily-favored back-to-back champions Astralis who won their third Major convincingly on Train and Inferno.</p>

</div>

<div class="sidebar">

<img src="Vorschau.jpg" alt="LOGO" />

<a href="#">Hallo there</a>

<p>ENCE’s magnificent improbable journey ends in the Grand Finals against heavily-favored back-to-back champions Astralis who won their third Major convincingly on Train and Inferno.</p>

</div>

<div class="sidebar">

<img src="Vorschau.jpg" alt="LOGO" />

<a href="#">Hallo there</a>

<p>ENCE’s magnificent improbable journey ends in the Grand Finals against heavily-favored back-to-back champions Astralis who won their third Major convincingly on Train and Inferno.</p>

</div>

</aside>

<footer></footer>

</div>

</body>

</html>

...zur Frage

Wie positioniere ich die Überschrift über dem Text wenn ein Bild daneben ist (HTML und CSS)?

Hallo ich arbeite für die Schule an einer Website und habe einige Bilder in die Datei einer Teilwebsite eingefügt, musste jedoch feststellen, dass die Überschrift "Ressourcen" links von dem Text lag und nicht darüber. Ich es habe versucht indem ich die Überschrift außerhalb der "div class="Eros" gestellt habe, jedoch war der Abstand zwischen dem dazugehörigem Text und der Überschrift zu groß. Ich hoffe Ihr könnt mir helfen.

HTML


<!DOCTYPE html>
<html>

<head>
<title>Asteroiden</title>
     <link rel="stylesheet" type="text/css" href="Deep-Space-Asteroiden.css">
    </head>

    <body>  
    
        <div class="wrapper">
            <nav>
                <ul>
                    <li><a href="#"><i class="fab fa-houzz"></i></a></li>
                    <li><a href="Deep-Space-Main.html">Deep-Space-Coorporation</a></li>
                    <li><a href="Deep-Space-Asteroiden.html">Asteroiden</a></li>
                    <li><a href="#">Mining</a></li>
                    <li><a href="#">&Uuml;ber uns</a></li>
                </ul>
            </nav>
        </div>
    
      
 
    
     <div class="margin">
         
         <h1>Asteroiden</h1>
         <h3>&Uuml;ber Asteroiden</h3>
         
         <p>
            LAAAAAAAAAAAAAAAANGER TEXT
         </p>
        
         
        
         
<div class="Eros">
    
      <h3>Ressourcen</h3>
        
    
         <p>
             Andererseits besitzen Asteroiden aber auch einen Immensen Vorrat an Elementen. So enth&auml;lt der Asteroid 443 Eros, welcher gerade einmal einen Durchmesser von 17 km besitzt, Rohstoffe wie Platin, Gold und Rhodium im Wert von 532 Billionen US Dollar. 
         </p>
               <img src='433eros.jpg' align="right">
          
              
         
</div>
</div>   
         
    
    </body>

</html>



CSS:



.margin{
  margin-top: 70px;
}

body {
  color: white;
  background-color: black;
font-family:"San Francisco", "Helvetica Neue Light", "Helevetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  margin:0;
  padding:0;
        
}
 
.header {
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr;
  background-color: black;
  opacity: .96;
  height: 2.7em;
  width: 100%;
  color: white;
  text-align: center;
  align-items: center;
}
 
nav a {
  height: 2.7em;
  line-height: 45px; 
  color: white;
  text-decoration: none;
  transition: 0.3s;
}
 
nav a:hover {
  color: #B8B8B8;
}
 
ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
 
li {
  padding-right: 5.5em;
  padding-left: 5em;
  display:inline;
}
 
li:hover {
  color: #B8B8B8;
}

.Eros {
    display: flex;
    align-items: center;
    text-align: left;
}

.Eros img{
    width: 45%; 
    float: right;
}




h1 {   font-size: 52px; }


h3{   font-size: 25px; } 


Konnte nicht den gesamten Inhalt der Datei eingeben, den es wäre sonst viel zu lang.

Danke

...zur Frage

Was möchtest Du wissen?