Thema Lieblingsfilme und Lieblingsserien, da gibt es viele.
Ich werde jetzt einfach mal die schreiben, die ich mir immer wieder anschauen könnte und versuche, das zu begrenzen.
Lieblingsfilme
Der große Trip- Wild
Dein Weg
Der Herr der Ringe
Harry Potter
Phantastische Tierwesen
Transformers
Jumanji
Stigmata
Lieblingsserien
Der Lehrer
Buffy- Im Bann der Dämonen
Angel- Jäger der Finsternis
Vampire Diaries
Game of Thrones
Supernatural
The Mentalist
Arrow
Das Thema gab es schon öffters.
Die Bilder wurden vor ca 2 Jahren "deaktiviert". wegen irgendwelchen DSVGO kram.
Eigentlich sind sie nur mit Css klein gemacht worden height:0; und width:0;
Dein Bild( Fußabdruck mit Muschel ) wurde schon hochgeladen , nur mit Css so klein gemacht das man es halt nicht sehen kann .
Hm, Schade, find ich doof, aber was solls 
Nach gut 2 Jahren interessiert das wohl niemanden mehr.
Doch, mich interessiert es schon und vielleicht auch die, die neu dazu kommen.
Das versteh ich nicht. Mit float kennst du dich doch genau so wenig aus. Du musst also beides lernen, wenn du es verwenden willst. Da ist es doch besser gleich die richtige Lösung zu lernen.
Ich weiß nicht, wie du darauf kommst? Aber gut, du hast bestimmt schon alles als Baby in die Wiege gelegt bekommen.
Dafür ist float weder gedacht noch geeignet. Ich würde CSS-Grid (display: grid;) benutzen.
Na toll, damit kenne ich mich leider noch gar nicht aus.
Hallo zusammen
Ich wollte hier mal zu meiner Hobbypage eure Meinung im bezug auf die Darstellung der Seite einholen,da Ich im Zuge von PHP7 gleich eine neue Seite aufgesetzt habe und CSS3 für mich immer noch ein rotes Tuch ist
gruß Marc
Schade, die Seite wird bei mir als nicht vertrauenswürdig angezeigt.
Bin wieder mal am verzweifeln. Ich möchte 3 div Container nebeneinander ausrichten. Das habe ich ja noch hin bekommen. Das gleiche möchte ich aber nochmal unten drunter haben. Egal, was ich probiere, alles funktioniert nicht. Die stehen alle in Reih und Glied.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="Stylesheet" type="text/css" href="css/design.css"/>
</head>
<body>
<div class="links"></div>
<div class="mitte"></div>
<div class="rechts"></div>
<div class="untenlinks"></div>
<div class="untenmitte"></div>
<div class="untenrechts"></div>
</body>
</html>
.links, .mitte, .rechts {
width: 300px;
height: 300px;
background-color: coral;
float: left;
margin: 20px;
}
.untenlinks, .untenmitte, .untenrechts {
width: 300px;
height: 300px;
background-color: coral;
float: left;
margin: 20px;
}Ja, das ist auf jeden Fall sehr hilfreich. Dein Container section#two liegt nicht überlappend über dem Container section#one sondern dahinter, so dass der Hintergrund von #one dort nicht wirksam ist.
Einfachste Lösung: Den Hintergrund dem body zuordnen.
Codebody { background-image: url(images/dia0.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; }
Dankeschön
<!--nützt das was?-->
<!DOCTYPE html>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="css/navi.css"/>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@1,700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Philosopher', sans-serif;
}
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
a {
text-decoration: none;
}
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background-color: rgba(250, 250, 250, 0.3);
text-align: center;
text-shadow: 2px 2px 1px #000000;
letter-spacing: 1px;
font-weight: bold;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.9);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.9);
}
nav li {
display: inline-block;
padding: 24px 10px;
}
nav li a {
color: rgba(213, 85, 39);
text-transform: uppercase;
font-size: 26px;
}
section {
height: 100vh;
}
#one {
background-image: url(../img/start.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: rgb(213, 85, 39);
background-color: rgba(250, 250, 250, 0.3);
padding-top: 30px;
padding-bottom: 30px;
border-style: 1px solid transparent;
border-radius: 30px;
text-align: center;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: bold;
text-shadow: 2px 2px 1px #000000;
letter-spacing: 2px;
box-shadow: inset 10px 10px 10px rgba(255, 255, 255, 0.65),
inset -10px -10px 10px rgba(0, 0, 0, 0.65),
10px 10px 20px rgba(0, 0, 0, 0.35);
}
#two {
z-index: 1;
background-color: rgba (250, 250, 250, 0.3);
}
h2 {
text-align: center;
color: rgb(121, 247, 255);
text-shadow: 2px 2px 1px #000000;
letter-spacing: 2px;
font-size: 50px;
}
.gallery {
z-index: 3;
width: 200px;
height: 200px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-image: url(..//img/gallery.jpg);
position: relative;;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-box-shadow: inset 5px 5px 10px 5px rgba(255,255,255,0.8),
4px 4px 10px 4px rgba(0,0,0,0.7);
box-shadow: inset 5px 5px 10px 5px rgba(255,255,255,0.8),
5px 5px 10px 5px rgba(0,0,0,0.5);
}
.gallery:hover {
background-image: url(../img/gallery_hover.jpg);
}
#three {
background-color: coral;
height: 30vh;
}
@media only screen and (max-width: 520px) {
h1 {
font-size:30px;
}
nav {
text-shadow: none;
}
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 16px;
}
}
</style>
<body>
<section id="one">
<h1>
LEBEN WIRD NICHT GEMESSEN AN DEN ATEMZÜGEN, <br>
DIE WIR NEHMEN, <br>
SONDERN AN DEN MOMENTEN, <br>
DIE UNS DEN ATEM NEHMEN. <br>
</h1>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">WANDERN</a></li>
<li><a href="#">PILGERN</a></li>
<li><a href="#">CHEMNITZ</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">IMBRESSUM</a></li>
</ul>
</nav>
</section>
<section id="two">
<!--<h2>DAS BIN ICH</h2>
<div class="gallery"></div>-->
</section>
<!--<section id="three">
</section>-->
</body>
</html>Das habe ich schon befürchtet. Es wäre besser, wenn man das im Zusammenhang sehen könnte. Hast Du es online und kannst die URL posten?
nein
Mein Browser, Opera, beanstandet da das Leerzeichen zwischen rgba und der öffnenden Klammer. Lösche ich dieses, ist alles in Ordnung.
hab ich probiert, klappt nicht bei mir
ich habe Google Chrome
Hallo erst mal,
ich habe zwei Container (section). Die erste section ist ein Vollbildhintergrund fixiert. Die zweite section soll sich nun weiß transparent darüber scrollen. Ich habe hier dafür background-color: rgba (250,250, 250, 0.3); verwendet. Leider wird das ganze nicht transparent vom Browser angezeigt sondern weiß. Ich möchte aber, das dass Hintergrundbild hindurch scheint. Was mache ich falsch? 
Damit die vertikale Ausrichtung funktioniert, musst Du das Flex-CSS dem umgebenden Container geben, d. h. wenn Du das h1 zentrieren willst, dem body:
CodeAlles anzeigenhtml, body { background: url(../img/Landschaft/1.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; height: 100%; display: flex; align-items: center; justify-content: center; }Und es muss freier Raum für die Zentrierung vorhanden sein, daher height: 100%;
Dankeschön, nun funktioniert es. Ich habe mich mit display:flex; noch nicht so auseinandergesetzt. Wirkt sich das jetzt auch auf alles aus oder muss ich dem jeweiligen Element das auch wieder zuordnen. Und kann ich das auch mit anderen display Angaben komponieren oder hebt sich das dann gegenseitig wieder auf?
basti1012, nein. Ich habe eine externe CSS Datei. Wieso kann ich dich nicht zitieren?
<!DOCTYPE html>
<html>
<head>
<title>blabla</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="language" content="deutsch">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="title" content="">
<link rel="Stylesheet" type="text/css" href="css/design.css"/>
</head>
<body>
<h1>DER WEG IST DAS ZIEL</h1>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Philosopher');
@import url('https://fonts.googleapis.com/css2?family=Aladin');
* {
margin: 0;
padding: 0;
}
html,body {
background: url(../img/Landschaft/1.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: #9af3fb;
/*text-align: center;
display: table-cell;
vertical-align: middle;*/
font-family: 'Aladin', cursive;
font-size: 100px;
font-weight: bold;
text-shadow: 2px 2px 1px #000000;
filter: dropshadow(color=#000000, offx= 2, offy=2);
display: flex;
align-items: center;
justify-content: center;
}Hallo Peregrina!
Das trifft zu und es sollte so auch funktionieren. Aaaber: Wenn es um Layoutfragen geht, sind gefühlte 70% der Fundstellen im Netz veraltet, so auch in diesem Fall. Verwende Flexlayout:
Codeh1 { display: flex; align-items: center; justify-content: center; }Näheres z. B. hier:
Sempervivum, hab ich probiert, funktioniert nicht. Der Text ist zwar horizontal mittig ausgerichtet, aber nicht vertikal.
Dankeschön, m.scatello
Hallo @ all,
überall im Netz wird beschrieben, das man Text mit display: table-cell; und vertical-align: middle; vertikal ausrichten kann. Warum funktioniert das bei mir nicht. Hab alles versucht. Mochte eine h1 horizontal als auch vertikal mittig ausrichten. Hab es in der style.css mit der h1 versucht und habe es auch mit einem div-container versucht, aber es geht einfach nicht. Was mach ich verkehrt. Bin nun ratlos.
Ach so, kann mir vielleicht mal jemand erklären, wie ich meinen Code nochmal hier rein stellen kann. Hab mein Zettel leider versiebt.
Dankeschön und LG
Ich verstehe das so
https://codepen.io/basti1012/pen/yLOgyVL
Wenn er aber mal das zeigen würde was er schon gemacht hat wäre es wohl einfacher
yep, genau so hab ich mir das vorgestellt. Vielen lieben Dank.