CSS: Fußzeile wird nicht angezeigt?

5 Antworten

CSS hat keine "Befehle" sondern Selektoren und Eigenschaften mit Werten.

Deine float-Eigenschaft in #fußnote hat einen falschen Wert. "bottom" gibt es nicht. Hier siehst Du welche Werte möglich sind: https://developer.mozilla.org/de/docs/Web/CSS/float

Zudem würde ich dir raten auf Sonderzeichen wie ß in ID-Selektoren und Klassen-Selektoren zu verzichten. Sowas wie "#fußnote" kann gefährlich sein je nachdem welchen Zeichensatz Du in deiner Webseite verwendest.

Woher ich das weiß:
Berufserfahrung
11

Danke! Werde mir das morgen mal durchlesen.

0

Du hast ein paar Fehler gemacht.

1) Ergänze den Doctype, dieser ist für das HTML-Dokument zwingend notwendig. Für HTML kannst du diesen nutzen:

<!doctype html>

2) Entferne die doppelte (schließende) Klammer nach dem Selektor #infos.

3) Entferne das ß aus der ID fußnote. Schreibe Umlaute um, nimm für diesen Fall bspw. stattdessen ss.

4) Einige deiner CSS-Properties haben Werte bekommen, die eigentlich nicht zur Auswahl stehen. Schau in deinen Selektor für die Fußnote: clear und float.

11

Ok probiere das morgen mal aus. Danke!

0
44

Nachtrag:

a) Hier solltest du noch die Raute vor dem zweiten kopf ergänzen:

#kopf .highlight,
kopf .current a{

b) Kein Fehler, nur bessere Praxis: Nur das Festlegen, was festgelegt werden muss:

background: #35424a;
background-color: #35424a; // better

Als Referenz für HTML, CSS und weitere Webtechniken solltest du die MDN-Dokumentation nutzen.

0

Schmeiß die überzählige schließende geschweifte Klammer nach #infos } raus und benenne #fußnote in #fussnote um.

Alex

Wie platziert man zwei Objekte nebeneinander, die demselben <div> entspringen?

Hallo,

wie platziert man zwei Objekte nebeneinander, die demselben <div> entspringen? Die sind aktuell untereinander.

HTML:

<div class="container">
  <img src="weihnachtsbilder-engel.jpg" class="image">
  <div class="overlay">
    <div class="text"> Lorem </div>
  </div>
</div>
<div class="container">
  <img src="Fensterdeko.jpg" class="image">
  <div class="overlay">
    <div class="text"> Lorem </div>
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 40%;
}

.overlay {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 75;
  right: 0;
  height: 100%;
  width: 50%;
  opacity: 0;
  transition: .9s ease;
  background-color: #333;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.image {
  margin-left: 75px;
  margin-top: 30px;
  display: block;
  width: 50%;
  height: auto;
  opacity: 0.75
}

.container:hover .overlay {
  opacity: 0.5;
}
...zur Frage

CSS White Space über Text wenn ich zoome?

Hat jemand von euch eine Ahnung wie ich den White Space über dem text weg bekomme? Ich möchte das selbst wenn ich auf der Website auf 500% Zoome oder die Website auf einem Handy öffne der White Space über dem Text nicht vorhanden ist. Hat jemand von euch eine Idee wie ich das schaffen könnte? Danke für alle Antworten. LG Julian

HTML:

<div id="HeadAll">
<div id= "Head">
    <div id="Navbar">
    <ul>
    <li><a>HOME</a></li>
    <li><a>ABOUT</a></li>
    </ul>
    </div>
</div>
</div>

Css:

#HeadAll{
    height: 5vh;
}

Head{

    position: absolute;     width: 100% !important;     height: 100% !important;     margin: 0 !important;      }

Navbar{

    padding: 0;        top: 0; }

Navbar>ul{

    padding: 0 0 0 70vw;     margin: 0;     line-height: 1.25vh; }

Navbar>ul>li{

    margin: 1vw;     text-decoration: line-through;     font-size: 1.25vh;     }

Navbar>ul>li>a{

    margin:0;     padding:0; }

Navbar>ul>li:hover{

    text-decoration: line-through;     color: #777; }

...zur Frage

Dünne Linie zwischen Divs im Mobile Modus?

Ich versuche gerade meine Webseite zu designen, und wenn ich sie auf dem Handy anschaue oder im Browser in den Mobile Modus wechsle (Rechtsklick, Untersuchen, oben links im neuen fenster auf Toggle Device) sehe ich zwischen zwei Divs eine dünne dunkle Linie, und ich weis nicht weshalb.

Ich möchte dass man sie nicht sieht, weis jemand weshalb die dort ist?

Der Code ist öffentlich auf meinem Server (Falls jemand das in 2019 liest, gehört die Domain nicht mehr mir!)

https://xhascox.com/

Screenshots:

hier noch der etwas gekürzte Code: (max 3000 zeichen wird leider kanpp)

CSS:

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, sub, sup, tt, var,
b, u, i, center, footer, header {
	margin: 0;
	padding: 0;
	border: 0;
	border-color: transparent;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
	background-color: var(--background-color);
}
body {
	padding: 0;
	margin: 0;
}
h1 {
	margin: 0;
}
#center {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width-center);
	min-width:var(--min-width-center);
	width: var(--width-center);
	background-color: var(--background-color);
	overflow: hidden;
}
.main {
	padding: 20% 5% 20% 5%;
	height: 128px;
}
#main1 {
	min-width: var(--min-width-center);
	max-width: var(--max-width-center);
	background-color:var(--color-center-1);
	color: var(--font-color-h1);
}

main2 {

min-width: var(--min-width-center);
max-width: var(--max-width-center);
background-color: var(--color-center-2);
color: var(--font-color-h1);

}
#main3 {
	min-width: var(--min-width-center);
	max-width: var(--max-width-center);
	background-color: var(--color-center-3);
	color: var(--font-color-h1);
}

HTML:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
	<div id="widthdiv">
	</div>
		<div id="bar_side_left">
		</div>
		<div id="bar_tri">
		</div>
		<div id="bar">
		Main
		</div>
		<div id="center">
				<div class = "main" id="main3">
				<div id="main_text">
				<h1>
				XHASCOX 3
				</h1>
				</div>
			</div>	
			<div class = "main" id="main2">
				<div id="main_text">
				<h1>
				XHASCOX 2
				</h1>
				<p>
				- Python<br>
				</p>
				</div>
			</div>	
			<div class = "main" id="main1">
				<div id="main_text">
				<h1>
				XHASCOX 1
				</h1>
				</div>
			</div>
				<div class = "main" id="main4">
				<div id="main_text">
				<h1>
				XHASCOX 4
				</h1>
				</div>
			</div>				
    	</div>
</body> 

habe nur noch nichts im Internet gefunden. Vorallem, weil es nur im mobilen Modus auftaucht.

...zur Frage

CSS: div unter bild?

Hi :) Folgendes: Möchte einen div container unter einem Bild und neben meinem article platzieren, aber mir fehlt dazu jetzt einfach das wissen und konnte jetzt auf anhieb nichts finden was mir wirklich weiter hilft.

Hier das, was ich in CSS geschrieben habe:

img#imp{ float: right; margin-right: 20%;
}

article{ background-color: rgba(0,0,0,0.3); margin-right: 48%; margin-left: 20%;
padding-left: 2%; padding-right: 2%; padding-bottom: 2%; padding-top: 0.5%; }

.angebot{ background-color: rgba(0,0,0,0.3); margin-right: 20%; margin-left: 54%;
padding-left: 2%; padding-right: 2%; padding-bottom: 2%; padding-top: 0.5%; }

Habe bei beim img nicht wirklich viel stehen, vielleicht liegt ja da der Fehler. Wäre echt super wenn mir jemand helfen könnte. Danke im voraus! :)

Lg

...zur Frage

HTML, CSS: Navigation funktioniert falsch?

Hallo, ich habe ein Problem. Und zwar habe ich folgende Webseite erstellt, jedoch ist meine Navigation nicht wie gewünscht dauerhaft am oberen Bildschirmrand, sondern ist einfach nur oben an meiner Webseite.

HTML:

<!DOCTYPE html>
<html>
  <head>
  <title>Webseite 2</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
   
  </head>
   
  <body>
     
  <div class="navigation">
    <div class="wapper">
      <div id="logo"><p>S</p></div>
       
      <a target="_blank" href="#" >Kontakt</a>
      <a target="_blank" href="#" >Mehr</a>   
      <a target="_blank" href="#" >Shop</a>
      <a target="_blank" href="" >Home</a>
      
    </div>
  </div>
   
  <div id="banner">
  <img src="Bilder/banner.jpg">
  </div>
  <div>
    <p>  ....Text..... </p>   
  </div>
  </body>
</html>

CSS:

{
  margin: 0;
  padding: 0;
  font-family: fantasy;
}
.navigation {
   width: 100%;
  height: 100px;
  background-color: rgba(250,250,250,0.8);
  position: fixed;
  z-index: 10;
  flex-basis: 0px;
  flex-shrink: 1;
}
#logo{
  height: 80px;
  width: 80px;
  margin: 10px;
  float: left;
}
#logo p{
  line-height: 90px;
  color: black;
  font-size: 6em;
  font-family: Rocket Rinder;
}
.navigation a {
  color: black;
  font-family: Rocket Rinder;
  text-decoration: none;
  font-size: 2em;
  margin-right: 40px;
  line-height: 100px;
  float: right;
}
.navigation a:hover {
  color: blueviolet;
}
.wapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
}
#banner {
  z-index: 0;
  width: 100%;
  height: auto;  
  background-size: cover;
}
#banner img{
  width: 100%;
}   

...zur Frage

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%;
}
...zur Frage

Was möchtest Du wissen?