Warum funktioniert mein Text Decoration nicht?

CSS:

body{

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none!important;

.contact{

text-decoration: none;

}

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

</container>

<div>

Test

</div>

</container>

</body>

2 Antworten

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

09.09.2021, 20:44

Es gibt kein HTML Container Tag ... Nutze stattdessen ein div.

Dein Nav geht auf { aber die Klammer zu } fehlt

nicklas030

Fragesteller

09.09.2021, 20:52

Habe es jetzt so geändert, es funktioniert allerdings immer noch nicht:

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

Test

</div>

</body>

CSS:

body{

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none;

}

.logo{

text-align: center;

}

.contact{

text-decoration: none;

}

FaTech

09.09.2021, 20:53

@nicklas030

Bindest du das CSS denn ein? Wenn ja wie?

nicklas030

Fragesteller

09.09.2021, 20:55

@FaTech

FaTech

09.09.2021, 20:57

@nicklas030

Ist der Dateipfad korrekt?

nicklas030

Fragesteller

09.09.2021, 20:58

@FaTech

ja der Rest funktioniert ja perfekt, nur die text-decoration: none geht nicht

nicklas030

Fragesteller

09.09.2021, 20:59

@FaTech

es ist sass vielleicht macht das einen Unterschied. Habe es allerdings mit watch sass auf eine css Datei automatisch umgeschrieben

FaTech

09.09.2021, 21:05

@nicklas030

Ja, sass ist nicht zum Einbinden, man muss es kompilieren, das stimmt...

nicklas030

Fragesteller

09.09.2021, 21:06

@FaTech

hab das problem gelöst eine extension ging nicht automatisch los und mein css wurde nicht auf den live server übertragen :( Aber jetzt funktioniert es perfekt. Vielen Dank trotzdem

Niklas

11.09.2021, 15:29

Es gibt kein HTML Container Tag ...

Die Verwendung dieser ist im Rahmen von Web Components aber mittlerweile durchaus möglich: https://wiki.selfhtml.org/wiki/HTML/Web_Components/custom_elements

FaTech

11.09.2021, 15:48

@Niklas

Dann kann ich direkt mit deinem Link Kontern: Schau mal hier:

https://wiki.selfhtml.org/wiki/HTML/Web_Components/custom_elements#Regeln

Das geht nicht mit Container

Niklas

11.09.2021, 17:17

@FaTech

Warum denn "kontern"? Sind wir gegeneinander?

FaTech

11.09.2021, 17:18

@Niklas

Ne, du meintest nur, dass es möglich ist und ich habe es wiederlegt mit dem selben Link 🤣🤣🤣

Steffile

09.09.2021, 20:50

Versuchs mit

.nav a {

text-decoration: none!important;

}

oder

.Links a {

text-decoration: none!important;

}

nicklas030

Fragesteller

09.09.2021, 20:55

funktioniert leider beides nicht :(

Steffile

09.09.2021, 21:40

@nicklas030

Dann schau doch mal im Browser mit dem Inspector was deine Definitionen ueberschreibt.

Oder ueberpruef den Pfad mit dem die CSS eingebunden ist.

Oder setz die CSS mit <style>..</style> in den <head>

<html>
<head>
	<style>
	body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: auto 0;}
	.nav{ background: rgb(0, 47, 255); padding: 0.3em; color: white; text-decoration: none;}
	.logo{text-align: center;}
	.contact{text-decoration: none;}
	</style>
</head>
<body>


	<div class="nav">


		<div class="logo">


			XXX <span>XXX</span>


		</div>


		<div class="Links">


			<a class="contact" href="#">Contact</a>


			<a class="about-me" href="#">About Me</a>


			<a class="projects" href="#">Projects</a>


		</div>


		</div>


		<div class="header">
			Test
		</div>


</body>
</html>

Ähnliche Fragen

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Html Login?

Hallo, ich habe folgenden Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="center">
    <h1>Anmelden</h1>
    <form method="post">
    


<div class="txt_field">
    <input type="text" required>
    <label>Benutzername</label>
</div>


<div class="txt_field">
    <input type="password" required>
    <label>Passwort</label>
</div>
<div class="pass">Passwort vergessen?</div>
<input type="submit" value="Anmelden">
<div class = "signup_link">
  Noch kein Nutzer?  <a href="regis.html">Registrieren</a>


</form>
</div>


</body>
</html>

Dies ist der CSS Code:

body {
    margin: 0;
    padding: 0;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: linear-gradient(120deg, #2980b9, #8e44ad);
}


.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Leider klappt nicht alles. Hab ich was falsch gemacht=

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

HTML und CSS Frage?

Hallo,

ich möchte die Grüne und gelbe Kärtchen im zweiten <section> nach oben in die MITTE schieben. Jedoch hakt es bisschen bei mir. Zudem müssen wir nur Flexbox benutzen das heisst kein margin oder position etc....

HTML_CODE:

<!DOCTYPE html>

<head>

<title>Flexbox</title>

</head>

<body>

<nav>

<ul>

<li>

<a class="item2" href="#">Button</a>

</li>

</ul>

</div>

</nav>

</div>

</header>

<main>

</div>

</section>

</div>

</section>

</div>

</main>

</body>

</html>

CSS_CODE:

margin: 0;

box-sizing: border-box;

}

header {

background-color: #cae1fc;;

}

.layout2 {

display: flex;

align-items: center;

justify-content: space-around;

flex-direction: column;

}

.container {

height: 150px;

width: 1425px;

background-color:rgb(80, 98, 104);

display: flex;

justify-content: space-around;

align-items: center;

}

div ul {

width: 100%;

}

div li {

display: flex;

justify-content: space-around;

align-items:center;

list-style: none;

}

.item {

background-color: rgb(39, 185, 171);

width: 120px;

height: 50px;

color: #fff;

font-weight: bold;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: large;

display: flex;

justify-content: center;

flex-direction: column;

text-align: center;

text-decoration: none;

}

.item1 {

background-color: rgb(193, 67, 67);

width: 115px;

height: 50px;

color: #fff;

font-weight: bold;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: large;

display: flex;

justify-content: center;

flex-direction: column;

text-align: center;

text-decoration: none;

}

.item2 {

background-color: rgb(112, 29, 189);

width: 80px;

height: 90px;

color: #fff;

font-weight: bold;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: small;

display: flex;

text-align: center;

justify-content: center;

flex-direction: column;

text-decoration: none;

}

.layout2 > nav {

height: 100vh;

}

nav {

display: flex;

align-items: flex-end;

max-height: 170px;

}

/**/

.layout4 {

background-color: #cae1fc;

}

.laayout2 {

height: 1000px;

display: flex;

justify-content:space-around;

}

.sectionone {

display: flex;

justify-content: center;

align-items: flex-end;

max-height: 345px;

width: 270px;

}

.content1 {

display: flex;

flex-direction: column;

align-items: flex-end;

gap: 20px;

background-color: #cae1fc;;

}

.border {

background-color: #fff;

width: 225px;

height: 45px;

}

.border1 {

background-color: #fff;

width: 225px;

height: 45px;

}

.border2 {

background-color: #fff;

width: 225px;

height: 45px;

}

.border3 {

background-color: #fff;

width: 225px;

height: 45px;

}

.border4 {

background-color: #fff;

width: 225px;

height: 45px;

}

.brownhelp {

display: flex;

align-items: flex-end;

justify-content: center;

max-height: 345px;

width: 1200px;

}

.brownbox {

background-color: burlywood;

width: 1150px;

height: 305px;

}

/*YELLOW*/

.laayout3 {

display: flex;

justify-content: space-around;

align-items: flex-start;

height: auto;

}

.sectiontwo {

display: flex;

width: 800px;

justify-content: space-around;

align-items: center;

}

.content2 {

display: flex;

justify-content: space-around;

gap: 200px;

}

.box {

background-color: yellow;

width: 200px;

height: 190px;

}

.box2 {

background-color: green;

width: 200px;

height: 190px;

}

.box3 {

background-color: yellow;

width: 200px;

height: 190px;

}

.box4 {

background-color: green;

width: 200px;

height: 190px;

}

...zur Frage

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

CSS Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>

...zur Frage

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

HTML: Was muss ich tun, damit dieser schwarzer Strich nur bis zum Menü geht (nicht darüber) und wie kann ich das Menü zentral ausrichten?

Hallo,

was muss ich tun, damit dieser schwarzer Strich nur bis zum Menü geht und nicht darüber? Und wie kann ich das Menü zentral ausrichten, also damit die nicht links sind, sondern mittig?

Strich:

.vl {
  border-left: 2px solid black;
  height: 4000px;
  position: fixed;
  left: 18%;
  margin-left: -3px;
  top: 0;
}

Menü:

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Mods</a>
    <div class="dropdown-content">
      <a href="#">Bedrock mods</a>
      <a href="#">Java mods</a>
  <li><a href="#home">Skins</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Seeds</a>
    <div class="dropdown-content">
      <a href="#">Bedrock seeds</a>
      <a href="#">Java seeds</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Maps</a>
    <div class="dropdown-content">
      <a href="#">Bedrock maps</a>
      <a href="#">Java maps</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Texture packs</a>
    <div class="dropdown-content">
      <a href="#">Bedrock Textures</a>
      <a href="#">Java Textures</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Guide</a>
    <div class="dropdown-content">
      <a href="#">..................</a>
      <a href="#">..............</a>
    </div>
  </li>
</ul>

...zur Frage

HTML Navigationsleiste strecken?

meine navi leiste klebt aneinander also alle kästen.

wie kann ich es auseinander ziehen?

<html>
<head>
<title>X</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body bgcolor=#d9d9d9>
<style>
.container {
clear: both;
float: left;
width: 100%;
overflow: hidden;
background: ##56585b;
font-family: Verdana;
font-size: 1em;
}
#navi {
float: left;
position: center;
left: 50%;
margin: 2 auto;
padding: 40;
list-style-type: none;
}
#navi li {
float: left;
position: center;
right: 50%;
}
#navi a {
width: auto;
display: block;
padding: 5px;
line-height: 1.5em;
color: #000000;
background: ##56585b;
border:2px solid #024c68;
text-decoration:none;
}
#navi a:hover {
background: #56585b;
color: #000;
} 
{bcolor: grey} 
div.a {
text-align: center;
}
ul.horizontal li{
display:block;
float:center;
padding:0 10px;
}
</style>
<div class="a">
<u><h1>XXXXXXXXXXXXXXXXXX</h1></u>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX
 <div class="container">
<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div> 
</body>
</html>

...zur Frage

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

Html/CSS Text neben Bild?

Hallo, ich arbeite seit ungefähr drei Monaten mit html und habe jetzt ein Problem: Ich will einen Text neben mein Bild platzieren, doch immer wenn ich alles nach links floate zerstört das meine navigationsleiste. Möchte noch anmerken, dass meine Skills zu diesem Thema ziemlich beschränkt sind. Hier findet ihr mein CSS - unten html. Danke für eure hilfe! 😊

.topnav {

background-color: rgb(245, 245, 245);

overflow: hidden;

}

.topnav a {

float: left;

display: block;

color: #1d1d1d;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #3f79e6;

color: white;

}

.topnav .icon {

display: none;

}

@Media screen and (max-width: 600px) {

.topnav a:not(:first-child) {display: none;}

.topnav a.icon {

float: right;

display: block;

}

@Media screen and (max-width: 600px) {

.topnav.responsive {position: relative;}

.topnav.responsive a.icon {

position: absolute;

right: 0;

top: 0;

margin-left: 30px;

}

.topnav.responsive a {

float: none;

display: block;

text-align: left;

}

@Media screen and (min-width: 601px){

#produkte {

margin-left: 20%;

float: left;

}

.produkt {

width: 200px;

border: solid #dedcd9;

background-color: #f6f8fa;

padding: 10px;

margin: 20px;

display: block;

text-align: right;

height: 200px;

}

.produkt img {

width: 180px;

padding: 10px;

display: block;

}

p, a, h1, h2, h3, h4, h5, h6 {

font-family: Arial, Helvetica, sans-serif;

font-display: block;

}

a {

font-size: x-large;

color:#3f79e6;

}

Das ist mein html:

<!DOCTYPE html>

<head>

function myFunction() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

</script>

</head>

<body>

<a href="#contact">Contact</a>

<a href="#about">About</a>

</a>

</div>

<div class="desc"><a>Nike Air</a></div><p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>

</div>

</body>

</html>

...zur Frage

Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen