nicht angemeldet
Matthias Scharwies
basti1012
marctrix
Gunnar Bittersmann
basti1012
JürgenB
JürgenB
Gunnar Bittersmann
marctrix
Benötige Hilfe bei CSS, bin absoluter Neuling.
Wollte drei Bilder mit Text über CSS positionieren so wie im Bild "BildEntwurf.JPG" aber irgendwie habe ich, da ein kleines Probleme siehe "BildBrowser.JPG" bei den ich Hilfe benötige.
mfg Thomas
inhalt.css
#inhalt {
width: 1280px;
background-color: #ffffff;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#inhalt_1 {
width: 250px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 132px;
}
#inhalt_2 {
width: 250px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 515px;
}
#inhalt_3 {
width: 250px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 898px;
}
#bild_1 {
width: 200px;
background-color: #ffffff;
height: 125px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
background-image: url(bild_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
#bild_2 {
width: 200px;
background-color: #ffffff;
height: 125px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
background-image: url(bild_2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#bild_3 {
width: 200px;
background-color: #ffffff;
height: 125px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
background-image: url(bild_3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#text_1 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
width: 200px;
padding-right: 10px;
}
#text_2 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
width: 200px;
padding-right: 10px;
}
#text_3 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
width: 200px;
padding-right: 10px;
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="inhalt.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="inhalt">
<div id="inhalt_1">
<div id="bild_1"></div>
<div id="text_1">
TestTextTestTextTestTextTestText
</div>
</div>
<div id="inhalt_2">
<div id="bild_2"></div>
<div id="text_2">
TestTextTestTextTestTextTestTextTestText
</div>
</div>
<div id="inhalt_3">
<div id="bild_3"></div>
<div id="text_3">
TestTextTestTextTestText
</div>
</div>
</div>
</body>
</html>
Hallo
Schwierig.
Hauptproblem: Dein Wissensstand ist total veraltet. XHTML wurde so bereits vor 10 Jahren offiziell begraben und sollte seitdem nicht mehr verwendet werden.
Verwende HTML5. Dann kannst du auch gleich die div-Suppe über Bord kippen.
Das Layout dann mit Flexbox oder CSS-Grid.
Für Zeilenumbrüche sind Leerzeichen erforderlich.
Gruss
MrMurphy
Für Zeilenumbrüche sind Leerzeichen erforderlich.
Jain.
Siehe:
Servus!
Benötige Hilfe bei CSS, bin absoluter Neuling.
👍 Dann hast Du dir noch nichts falsches angewöhnt!
Zum Einstieg:
Wollte drei Bilder mit Text über CSS positionieren so wie im Bild "BildEntwurf.JPG" aber irgendwie habe ich, da ein kleines Probleme siehe "BildBrowser.JPG" bei den ich Hilfe benötige.
Tipp: Verwende semantisches HTML, damit dein Markup „lesbarer“ wird:
<article class="gallery">
<figure id="inhalt_1">
<img src="bild_1.jpg" alt="Beschreibungstext">
<figcaption>
TestTextTestTextTestTextTestText
</figcaption>
</figure>
<figure id="inhalt_2">
...
Für diese drei figure-Elemente benötigst du jeweils nur den gleichen CSS-Code.
Ideen für die Präsentation findest du hier:
- Die drei (id="indalt_xx") sollten alle von oben denn gleichen Abstand haben 25px und nicht versetzt sein.
Das geht mit grid Layout:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
}
Damit legst du für das Elternelement article mit der class gallery (Kann man anstelle einer id mehrfach verwenden) 3 Spalten an, die je ein Drittel des verfügbaren Platzes einnehmen.
Kindelemente verteilen sich jetzt automatisch ohne weiteres CSS.
Was dieses Beispiel nicht macht: feste Pixelgrößen. Die kann man nämlich nicht vorhersehen.
Mehr Info:
Herzliche Grüße
Matthias Scharwies
Hallo,
danke an alle für eure Tipps. Werde mir die Sachen mal in Ruhe Anschauen und ausprobieren die ihr mir Geschrieben habt. Da ich neu in dem Bereich bin, wird es eine Weile dauern bis ich mich da eingelesen habe. Daher bitte ich Verständnis das es etwas dauern kann bis ich wieder melde.
mfg Thomas
Hier ein Vorschlag von mir wie ich es machen würde. https://codepen.io/basti1012/pen/rJoByB
Hej basti1012,
Hier ein Vorschlag von mir wie ich es machen würde.
Nicht böse sein, aber ich denke das nützt so nicht viel.
Klar kann man den code einfach übernehmen, aber ohne Erläuterungen
So ist eine informierte Entscheidung nicht möglich, um für das eigene Projekt die passendste Lösung zu nutzen.
Marc
@@basti1012
Sieht nicht gut aus.
LLAP 🖖
mhh wieso sieht das bei dir den so aus? Da habe ich keine erklärung für. Wahrscheinlich fehlt mir dazu wohl die erfahrung.☹
Hallo,
mach mal das Browserfenster schmal oder verwende ein Smartphone.
Gruß
Jürgen
Hallo JürgenB,
...Browserfenster schmal...
oder in einer aktuellen FireFox-Installation die Tastenkombination [Strg]+[Shift]+[M].
Grüße, Martl
Hallo,
aktuellen FireFox-Installation
aktuell in Sinne von „weniger als 10(?) Versionen zurück“ 😀
Gruß
Jürgen
Hallo JürgenB,
seit etwa Anfang 2014; bei dem Tempo der FF-Versionen kommt man mit dem Zählen kaum noch mit. Mehr zu Thema siehe MDN Keyboard_shortcuts.
Grüße, Martl
@@Martl
oder in einer aktuellen FireFox-Installation die Tastenkombination [Strg]+[Shift]+[M].
Da passiert nichts.
Ah, es ist [cmd]+[alt]+[M]. (macOS)
LLAP 🖖
Hallo Gunnar Bittersmann,
(macOS)
Snob;)
Grüße, Martl
Hej Martl,
(macOS)
Snob;)
Ey — uffpasse! 😉
Marc