Html/CSS float tag funktioniert nicht?

Hi!

Ich schreibe gerade eine Website und wollte bei CSS das Float tag anwenden (Float: right;). Als ich die Website dann neu geladen habe ist nichts passiert und das Element ist links geblieben. Ich nutze Bootstrap für die Website, hat das vielleicht was damit zu tun? Falls ihr mehr Infos braucht, schreibt gerne.

Bild zum Beitrag

3 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

26.08.2020, 18:01

So wie ich das sehe, werden deine beiden Listeneinträge (Forum, Bewerben), so wie erwartet, nach rechts gedrückt: https://jsfiddle.net/at5rs0k7/.

Allerdings sehe ich keinen Grund, überhaupt float an dieser Stelle einzusetzen. Die a-Elemente sind doch jeweils allein in ihren Containern. Wenn du einfach nur den Text horizontal positionieren möchtest, dann verwende text-align (auf dem li-Element). Bootstrap hat dafür auch schon vorgefertigte Klassen:

<li class="text-right"><a href="#bewerben">Bewerben</a></li>

JayHey123

Beitragsersteller

26.08.2020, 18:06

Okay das werde ich probieren! Danke schonmal! Zur Info: Die Navigation soll am Ende so aussehen: https://bybilly.uk/dusk/ (Desktop website). Also Links 2 Menüpunkte und rechts 2. In der Mitte das Logo

regex9

26.08.2020, 18:14

@JayHey123

Eine horizontale Ausrichtung würde so funktionieren:

HTML:

<ul>
  <li><a href="#start">Start</a></li>
  <li><a href="#entbannung">Entbannungsantrag</a></li>
  <li><img class="logo" src="logo.png" alt="PizzaMC Logo"></li>
  <li><a href="#bewerben">Bewerben</a></li>
  <li><a class="nav-right" href="#forum">Forum</a></li>
</ul>

CSS:

.navbar li {
  float: left;
}

Die list items kommen in einen Textfluß nach links.

Eine modernere Lösung via Flexbox-Layout:

.navbar ul {
  display: flex;
}

Ganz klar, dann müssten noch einige Abstände, etc. ergänzt werden. Aber für die Positionierung wäre das die Basis.

JayHey123

Beitragsersteller

26.08.2020, 18:15

@regex9

Das hatte mir gefehlt!! Vielen Dank!

regex9

26.08.2020, 18:18

@JayHey123

Schau dir mal noch diese Seite zum Flexbox-Layout an.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Diese CSS-Technik ist ziemlich flexibel und einfacher, als die Arbeit mit float.

JayHey123

Beitragsersteller

26.08.2020, 18:24

@regex9

Ok kurze Frage noch: Wie bekomme ich das Logo jetzt in die Mitte der Website und den Text richtig ausgerichtet?

regex9

26.08.2020, 18:28

@JayHey123

.navbar ul {
  display:flex;
  justify-content: center;
  width: 100%;
}

.navbar li {
  padding: 10px; /* or some other value ... */
}

JayHey123

Beitragsersteller

26.08.2020, 18:33

@regex9

Danke

Eutervogel

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

26.08.2020, 17:13

Floats sollten nicht mehr zum layouten benutzt werden. Flexbox ist hier das Mittel der Wahl.

Wenn du mehr Hilfe möchtest, wäre ein Link oder dein Code hilfreich.

JayHey123

Beitragsersteller

26.08.2020, 17:16

Ich habe es genau nach einem YT Tutorial gemacht... Er hat auch Float genommen und es hat geklappt

Eutervogel

26.08.2020, 17:18

@JayHey123

Das mag ja sein, aber es ist ja nicht sinnvoll sich überholte Methoden anzueignen, oder? Aber meintwegen mach es mit float. Geht die Welt auch nicht von unter. Aber um dir helfen zu können müssten wir hier schon mehr sehen.

JayHey123

Beitragsersteller

26.08.2020, 17:18

@Eutervogel

Ja wird gleich geuploadet... Dann kannst du Mal gucken

JayHey123

Beitragsersteller

26.08.2020, 17:39

@JayHey123

Die Bilder sind online

Eutervogel

26.08.2020, 17:41

@JayHey123

Sollen wir uns das jetzt abschreiben? :)

Kopiere das mal bitte auf https://codepen.com und poste den Link

Eutervogel

26.08.2020, 17:41

@Eutervogel

https://pastebin.com meine ich, sorry.

Ich bin jetzt aber erstmal unterwegs...

JayHey123

Beitragsersteller

26.08.2020, 17:46

@Eutervogel

Ok https://pastebin.com/2yg7g3RN kannst du den Link so öffnen?

Eutervogel

26.08.2020, 17:46

@JayHey123

Jap

JayHey123

Beitragsersteller

26.08.2020, 17:47

@Eutervogel

Ok. https://pastebin.com/xwG17aib hier noch die CSS

xxSkopionxx

26.08.2020, 17:12

Das ist ein bisschen wenig. Schick uns mal mehr und zeig wie du es im Head reingeschrieben hast und wo du die Klasse interpretiert hast

Woher ich das weiß:Hobby

JayHey123

Beitragsersteller

26.08.2020, 17:16

Code Bilder sind gleich Online.

Ähnliche Beiträge

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 {

}

...zum Beitrag

CSS float left und right?

Ich habe drei Div-Container welche nebeneinander sein sollen. wie mache ich das? gibt ja float right und float left aber kein float center oder so ähnlich.

...zum Beitrag

CSS boxen nebeneinander positionieren?

Kann mir Jemand bitte helfen, mein Problem ist, dass ich nicht weiß wie ich die boxen wie am ersten Bild dargestellt nebeneinander positionieren soll.

ich habs mit float: right; float: right,top; .... und 10 andere varianten eine Stunde lang rum exprimentiert, aber es hat nicht geklappt.

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zum Beitrag

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zum Beitrag

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zum Beitrag

Wie kann ich iframe Cookies speichern?

Hallo zusammen, ich bin neu hier im Forum und hoffe, dass meine Frage / mein Problem hier richtig platziert ist: ich möchte für eine Auftragsarbeit (Insektenschutz-Website) eine Website mit einem iframe der url https://www.neher.de/produkte erstellen.

Zur Erstellung nutze ich bootstrap. Den iframe habe ich in die html eingebunden, es wird auch alles angezeigt und geladen - so weit so gut.

Jetzt ist es aber so, dass auf der eingebundenen neher.de Website Cookies abgefragt werden. Wie schaffe ich es möglichst mit JavaScript diese Cookies zu speichern?

Sonst muss ich ja wenn ich z.B. auf das Produkt "Pendeltür" klicke, wieder die Cookies akzeptieren, obwohl ich das ja schon getan habe - ich hoffe ihr versteht was ich damit meine.

Leider habe ich keine Ahnung von JS - ich hoffe es kann mir hier jemand helfen.

Schon mal vielen Dank dafür - VG Felix

Das ist der html Code:

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style> main iframe { width: 100%; height: 65vh; }</style>
  </head>
  <body>
    <main>
      <iframe src="https://www.neher.de/produkte" frameborder="0></iframe>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
       crossorigin="anonymous"></script>
    </main>
  </body>
</html>

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

...zum Beitrag

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>

...zum Beitrag

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zum Beitrag

HTML CSS Punkte auf Website?

Was ist der performanteste Weg, mit HTML CSS...

...solche Punkte auf der Website zu platzieren (rote Kreise)?

...zum Beitrag

Semantik und Syntax HTML?

Syntax eines Elements und Semantik eines Elements.

Wo liegt der Unterschied (HTML/CSS).

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen