Beiträge von Elly

Zusätzlich hat ja nicht jeder Nutzer das gleiche Dateisystem.

Hast du in deinem Dateiexplorer Dateinamenerweiterungen eingeblendet? Eventuell siehst du dann, dass es so ist wie Sempervivum es beschreibt.

Ja, also am Ende der Seite hab ich's schon, wo's hingehört. In der nav.css auch ergänzt. Aber klappen tut's nicht.

Zitat von Sempervivum

Dieses Javascript fügt dem aktuellen Link die Klasse "active" hinzu:

Code

    <script>
        const url = document.location.href;
        document.querySelectorAll('#navigation li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });
    </script>

Dann kannst Du ihn mit CSS hervor heben, z. B. so:

Code

    <style>
        #navigation li a.active {
            background-color: lightblue;
        }
    </style>

BTW: Für die Navigation kannst Du mit Vorteil auch das nav-Tag verwenden.

Das hätte ich auch grade ausprobiert, klappt bei mir leider nicht. Geht das denn auch, wenn durch den Link eine neue Seite aufgerufen wird oder funktioniert das nur innerhalb derselben Seite?

So hab ich das bei mir angepasst.

const url = document.location.href;
        document.querySelectorAll('.navigation .menu-list li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });

.navigation .menu-list li a.active {
    background-color: red;
  }

Zitat von Sempervivum

1. Padding statt margin und verschachtelte Container verwenden oder
2. die Breite mit calc berechnen, dann kann man das margin genau einkalkulieren. Einfach den Prozentwert verkleinern passt nicht präzise, man erkennt, dass auf deiner Seite mit 94.5% die Abstände links und rechts nicht ganz gleich sind.

Ich hatte tatsächlich die Version mit 94.5 raufgeladen, stimmt. Sorry. Wollte ich eig nicht. Aber habe am Handy auch grad bemerkt, dass das nicht exakt passt.

Padding würde funktionieren, dann hab ich natürlich das Problem mit der border ums Bild. Also ein Problem der Flexbox? Die Flexbox ist ja mittlerweile sehr beliebt geworden. Wenn bei mir was fuchst, dann ist es aber meistens grade wegen flex. Aber gut, sie hat auch Vorteile.

Danke, mit calc geht's tatsächlich schön.

Im Breakpoint von 700px haben die Absätze nicht mehr eine Breite von 52%, sondern 100% (habs auch schon mit auto versucht). Das float right habe ich auch rausgenommen.

Das mit dem Bild siehst du erst, wenn du das Browserfenster schmäler machst. Auf normaler Größe ist alles ok.

Da hast du Recht, so ganz ohne ist diese zwingende Höhe nicht immer. Deshalb verwende ich sie auch nicht auf allen Seiten. Doch zB beim Header macht das schon Sinn. Und bei "Über mich" will ich nicht, dass man alles gleich auf den ersten Blick sieht.

Hallo,

ich bin auf der Suche nach Galerie-Templates.

Natürlich habe ich Mr. Google schon gefragt. Die Vielzahl ist unüberschaubar. Ich suche etwas Bestimmtes und weiß nicht ganz, wie ich da fündig werde. Das Problem scheint mir nämlich das zu sein, dass man ganze Galerie-Website-Templates findet von zigtausend anbietern auch von CMS wie Wix und Wordpress. Sowas meine ich aber nicht.

Ich hätte gern nur die Galerie an sich, die ich in meine bestehende Seite einfügen kann.

Vorgestellt habe ich mir in etwa sowas wie auf dieser Seite. Das ist ein Bootstrap-Template. Das Original davon habe ich auch gefunden, das ist dieses hier. Das sieht im Galerie-Teil jedoch anderes aus. Und vor allem weiß ich nicht, welche Bootstrap-Dateien ich für diese Galerie brauche. Mit den Standard-CSS- und JS-Dateien von Bootstrap funktioniert es jedenfalls nicht.

Kennt hier jemand gute Galerien, die ähnlich aufgebaut sind und die vl nicht auf Bootstrap oder ähnliche Bibliotheken zugreifen?

Was stelle ich mir denn genau vor? Das Einfliegen von unten ist ja schön, aber nicht zwingend. Alle Bilder aneinander angepasst auf einer Seite. Bei Hover erscheint der Titel, das Bild wird heller. Und man sollte auch ein Bild anklicken können und dann durch die Galerie durchklicken können, wie das in dem Bootstrap-Template ist.

Ihr seid schon länger in diesem Bereich unterwegs. Vielleicht habt ihr ja ein paar Tipps oder Links zu Seiten, die einem wirklich nur die Galerie und nicht ein komplettes Webseiten-Template anbieten.

Vielen Dank!

Elly

Vielleicht verstehst du's nicht, weil ich das später noch geändert habe. Ich habe da jetzt unterschiedliche Klassen draus gemacht und wirklich nur die mit der freien Höhe unterhalb des Menüs als section benannt und auf Seiten wie Printdesign, wo es mehr Platz braucht, eine andere Klasse genommen.

Aber warum war vorher der Footer deswegen irgendwo? Also genauer gesagt eig genau auf der Höhe, an der ursprünglich das vh aus war. Da hat er sich reingehängt. Aber kann man im Nachhinein ws schlecht nachvollziehen.

Hallo an alle,

ich habe hier auf dem PC-Screen eine funktionierende Seite.

In der Handyversion (Breakpoint 480px) habe ich das Problem, dass das Bild und der Text beide zwar uaf 100% sind, das Bild aber dennoch über den Rand hinausragt, weil es eine margin hat. Nehme ich die weg, passt es sehr wohl rein. Aber es soll ja nicht am Rand kleben. Und padding bringt wegen dem Rahmen nichts. Ich kann das zwar lösen, indem ich die Breite auf 94.5 % setze, finde das aber nicht sehr elegant. Gibt'S da was Besseres?

Das größere Problem stellt sich bei Breakpoint 700px. Ihr seht es selbst, der Text tut nicht, was ich gerne hätte. Nehme ich das Bild in den ersten Absatz, so steht der zwar schön rechts, aber die nächsen 2 Absätze sind unter dem Bild. Ich habe hier wegen der margin-bottom 3 einzelne Absätze gewählt. Ihr seht es bei der 2. Card, dass der Absatz prinzipiell schon rechts vom Bild wäre, aber sobald der Text länger ist, dann alles unter dem Bild steht.

Ich könnte jetzt das Bild innerhalb vom Absatz setzen und den ganzen Text als 1 Absatz schreiben und mit br arbeiten, aber dann habe ich nicht mehr meine 10px zwischen den "Absätzen". Dem br eine Klasse mit einer Höhe von 10px geben... Ich weiß nicht, kommt mir alles ein wenig umständlich vor. Gibt's da nicht was Elegantes?

LG

Elly

Hallo an alle,

damit ihr euch vorstellen könnt, wovon ich rede, hier der Link: Bitteschön.

Bei "Über mich" seht ihr, dass ich 3 sections habe, die sich farblich abwechseln. Die sections sind height:100vh; Funktioniert auch alles hier wunderbar.

Das führt dann dazu, dass der Footer bei "Printdesign" irgendwo schwebt. Ich verstehe allerdings nicht warum, da er das ja bei "Über mich" nicht tut. Lösche ich den ganzen Inhalt und befülle div section mit langem Text, ist das auch noch der Fall. Demzufolge müsste es ja an section liegen, aber die ist ja auf der anderen Seite dieselbe.

Ersetze ich height durch min-height, ist der footer da, wo er hingehört, allerdings ist dann der Content innerhalb der section bei "Über mich" nicht mehr richtig platziert. Der gelbe Rahmen gehört div content, ist innerhalb des div section. Und dieses Div soll schön mittig positioniert sein und nur ein bisschen kleiner als die Höhe. Siehe Startseite.

Wenn ich bei "Printdesign" mehrere sections mache, ist der Footer auch unten, wo er hingehört. Aber der Inhalt sprengt in der ersten section den Rahmen. Daher müsste man wohl schon min-height draus machen. Aber wie löse ich dann das Problem mit der Positionierung innerhalb der section bei "Über mich"?

Jetzt stecke ich in der Zwickmühle.

Weiß da jmd Rat?

Danke

Elly

Ahhh, super! Danke schön!

Alles klar, verstehe. Danke!

Das Grid-System ist auch interessant. Da muss ich mich noch einarbeiten

Manche Dinge "fuchsen" eben...das sind dann genau die, wo man denkt, so muss es doch sein und es eben doch nicht so ist - wie die margin bei inline-Elementen wie a.

Ich habe es jetzt mit einer Flexbox und column gelöst, finde ich grad irgendwie eleganter als meine vorige Umsetzung.

Was mir allerdings noch ein Rätsel ist - wenn man bei .cell p das padding unten auf 0 setzt, sieht man, dass der Rahmen um den Linkbutton außerhalb des DIVs ist. Ich komme auch im Inspektor nicht drauf, warum das so ist. Normalerweise sollte doch alles innerhalb der Box sein? Das sind hier jetzt gefühlte 10px weniger, die ich dann zu p.button geben muss. Das geht doch sicher eleganter?

Kann ich zusätzlich diesen Button ganz unten ausrichten? vertical-align:bottom; funktioniert hier nicht. Ich schätze mal das ist wg flex-direction:column;

Am Handy werden die Links übrigens in allen Browsern linksbündig dargestellt (Firefox, Chrome, Edge und Samsung Browser).

Hallo an alle,

ich habe auf meiner Seite 2 Versionen von Link-Buttons ausprobiert.

Im ersten Block habe ich display:inline-block gesetzt und außerhalb von p platziert, da er sonst (wie man im 2. Block sieht) direkt am Text dranklebt. Bei dieser Variante greift dann auch margin-top.

Im zweiten Block habe ich bei display gar nichts gemacht und a innerhalb von p platziert. margin-top greift hier allerdings nicht und ich weiß nicht warum. Auch wenn ich br davor mache, bringt das nicht mehr Platz.

Ich will den Link auch rechts platzieren. Ich hab zig Sachen ausprobiert und das erst nicht hinbekommen, nun habe ich den gesamten ersten Block auf text-align:right; gesetzt und die h1 und den p wieder umformatiert. Ich dachte eigentlich, wenn ich bei p text-align einstellen kann, sollte das eig bei a auch gehen. Eine andere Möglichkeit wäre vl, das a doch in einen neuen p zu setzen und diesem p dann eine neue Klasse zu geben, die rechts ausgerichtet ist.

Was meinen denn die Profis hier?

LG

Elly

Hallo an alle,

ich habe 3 DIVs nebeneinander, die unterschiedlich hoch sind. Um die 3 DIVs ist nochmal ein DIV. Wenn ich dieses auf display:flex; stelle, sind alle 3 DIVs gleich hoch.

Schön, dazu ist flex unter anderem ja auch da.

Ich habe hier was gefunden, da sind auch die DIVs in der nächsten Zeile gleich hoch wie die in der ersten. https://comlounge.net/boxen-gleiche-hoehe-css-flexbox/

Das ist bei mir aber leider nicht der Fall. Ich habe mit Mediaqueries Breakpoints gesetzt, wo ich aus den 3 DIVs 2 mache und das dritte in der nächsten Zeile ist dann wieder so groß wie sein Inhalt.

Gibt's es eine Möglichkeit, dass sich das 3. dann auch an die erste Zeile anpasst? Oder ist das bei dieser Anleitung nur Zufall?

Danke!

Ah, danke! Wie cool, dass es immer wieder Sachen gibt, von denen man noch nichts gehört hat, die einen aber immer wieder retten.

Cool, danke!

Ich muss aber zugeben, die von Bootstrap und Flickity sagen mir mehr zu. Sind zwar aufwändiger, aber auch lässiger.

Ich hab ein div mit display:flex, damit ich den Inhalt vertikal und horizontal zentrieren kann.

Innerhalb dieses DIVs habe ich eine h1 und eine h2, die nun jedoch nebeneinander sind, weil das flex auf sie wirkt. Setze ich bei der h1 ein display:block, ändert das aber nichts. Auch ein br nach der h1 ändert nichts daran, auch nicht mit clear all.

Warum ist das so?

Ich habe zwar eine Möglichkeit gefunden, sie untereinander zu bringen, allerdings mit einem span statt h2 (im span ein display:table). Den Trick kann man hier nachlesen.

Das Problem mit einer background-color wie im Beispiel habe ich nicht, ich möchte einfach nur h1 und h2 wieder als Blockelement gestalten können.

Wie ich das jetzt gelöst habe, ist nämlich die zweite Zeile (also mein span innerhalb der h1) nicht zentriert unter der ersten, sondern sie sind gemeinsam zentriert in der Flexbox, aber linksbündig dargestellt.

.banner {
background:url("../images/colorsplash01b.jpg") no-repeat;
height:calc(100vh - 150px);
background-size:cover;
background-position:center;
background-attachment:scroll;
display:flex;
align-items:center;
justify-content:center;
}

.header {
background-color:rgba(255, 255, 255, 0.8);
height:80%;
width:74%;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}

.header h1 {
font-family:"Roboto Slab", serif;
font-size:;
font-weight:500;
}

.header h1 span {
display:table;
}

Das sieht auch nicht übel aus. Ich mag' nur nicht, wenn das automatisch durchklickt. Wahrscheinlich lässt sich das irgendwo ändern, hab mir jetzt nur die Seite von dem User hier angesehen.

Flickity ist mir auch schon begegnet. Für eine Slideshow sicher auch lässig - für Portfolios oder Fotoclubs.

Optisch hat mir das von Bootstrap da am besten gefallen und ist für Fotos auch toll.

Hab mir nur gedacht, vl ließe sich da rein mit Text bzw. mit Kombis auch noch was machen.