• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Foto am absolut oberen Rand andocken

M

mabu

Neues Mitglied
Hallo.
Ich bekomme zum Verrecken ein Foto nicht an den obersten Rand der Webseite, so dass da kein Zwischenraum mehr existiert.
Es geht konkret um das Bild "headerbild.jpg"
Auch eine eingebundene CSS mit dem Befehl:
.headerbild {
margin-top: 0; padding: 0;
width: 100%;
}
hat nicht den Erfolg gebracht!
Wer kann helfen?
DANKE!!!!

Quellcode:

<html><HEAD>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Autor">
<meta name="publisher" CONTENT="Autor">
<meta name="copyright" CONTENT="Autor">
<meta name="keywords" CONTENT="Schlüsselwörter">
<meta name="description" lang="de, ch, at" CONTENT="Inhaltsbeschreibung">
<meta name="page-topic" CONTENT="Sport">
<meta name="audience" CONTENT="Alle">
<meta name="robots" content="all">
<meta name="robots" CONTENT="INDEX,FOLLOW">
<meta name="Content-Language" Content="de, en, us">
<meta name="revisit-after" content="7 days">
<META http-equiv="Page-Enter" CONTENT="blendTrans(Duration=3)">
<META http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=16)">
<link rel="shortcut icon" href="http://www.webseite.de/favicon.ico">
</style>
<br>
<title>Titel bla bla</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<table width="75%" height="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25%"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><a href="https://www.webseite4.com" target="_blank"><img src="images/banner4.jpg" alt="Beschreibung" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td align="right"><a href="https://www.webseite3.com" target="_blank"><img src="images/banner3.jpg" alt="Beschreibung" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td align="right"><a href="https://www.instagram.com/name" target="_blank"><img src="images/instagram.png" alt="Beschreibung" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td align="right"><a href="https://www.webseite2.de" target="_blank"><img src="images/banner2.png" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td height="16" align="right">&nbsp;</td>
</tr>
</table>
</tr>
</table><a href="https://www.webseite.de" target="_blank"><img src="images/banner.png" width="200" height="48" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="59%"> <div align="center">
<table background="images/headerbild.jpg" width="1000" border="0" valign="top" cellspacing="0" cellpadding="0" height="615" alt="Angabe"><br>
<tr></tr>
<tr>
<td align="center" valign="top">&nbsp;</td>
</tr>
</table>
<br>
</div>
</td>
<td width="59%">&nbsp;</td>
</tr>
<tr>
<td rowspan="42">&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="42">&nbsp;</td>
</tr>
<tr>
<td align="center"><span class="Stil1"><strong>Name</strong></span></td>
</tr>
<tr>
<td align="center"><span class="Stil1">Ju-Jutsuka<br>
Longtrail Runner <br>
Taucher</span></td>
</tr>
<tr>
<td height="300">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<td>&nbsp;</td>
</tr>
<tr>
</table>
</body></html>
 
Zuletzt bearbeitet:
S

Sclero2004

Mitglied
Guten Tag @mabu und willkommen im Forum!
Für den Abstand zum oberen Rand gibt es zwei Gründe:

1. body hat standardmäßig ein margin, setze dieses auf 0 durch dieses CSS:
Code: 
body {
    margin: 0;
}

2. Du hast da einige br-Tags im HTML und eines davon rückt das Bild ebenfalls nach unten, das was ich hier auskommentiert habe:
Code: 
            <td width="59%">
                <div align="center">
                    <table background="images/headerbild.jpg" width="1000" border="0" valign="top" cellspacing="0"
                        cellpadding="0" height="615" alt="Angabe"><!--<br>-->
                        <tr></tr>
                        <tr>
                            <td align="center" valign="top">&nbsp;</td>
                        </tr>
                    </table>
                    <br>
                </div>
            </td>

Aber davon abgesehen sehe ich eine riesige Baustelle: Ein Tabellenlayout was vollkommen unübersichtlich und fehlerhaft ist. Das würde dringend eine Überarbeitung brauchen: Statt mit Tabellen mit Flex- und Gridlayout die Elemente anordnen.
 
M

mabu

Neues Mitglied
Hey @Sclero2004
lieben Dank!
Die Änderungen haben das Bild eine Zeile nach oben gebracht, aber noch kein finales Resultat!
In Sachen der Tabelle nehme ich gerne jeden Tipp und jede Hilfe an. Ich befürchte, ich komme da an meine Grenzen, da ich bis vorhin Flex- und Grid gar nicht kannte.
Ich möchte zentral ein Foto einbinden, ganz oben an den Rand der Browserseite, links daneben wie in meinen Tabellen Links mit Grafiken platzieren und unter dem obigen Foto, dann Kurzartikel mit je einem Foto platzieren.
Quasi ein Onepager.
Wie sähe sowas mit im Flex- und Gridlayout aus? Habe damit noch nie gearbeitet. Welche Vorteile bringt das Layout gegenüber Tabellen?
Herzlichen Dank!
 
Zuletzt bearbeitet:
S

Sclero2004

Mitglied
Hm, ich hatte das getestet und die beiden Änderungen haben das Bild ganz nach oben gebracht.
Hast Du es vielleicht online? Dann poste doch bitte die URL.
 
S

Sclero2004

Mitglied
Wie sähe sowas mit im Flex- und Gridlayout aus? Habe damit noch nie gearbeitet. Welche Vorteile bringt das Layout gegenüber Tabellen?
Zum Vergrößern anklicken....
Der Vorteil ist, dass das HTML und CSS damit wesentlich einfacher und übersichtlicher wird als mit Tabellen.
Außerdem, wie der Name "flex" schon sagt, wird das Layout flexibel, d. h. es passt sich an die Breite des Browserfensters an.
Und: Heute haben i. allg. die meisten Besucher ein Smartphone im Hochformat. Die Links und das Headerbild passen da nebeneinander schlecht hinein und es ist angebracht, die Darstellung anzupassen. Mit Flex/Grid und Mediaqueries ganz leicht aber versuche das mal mit einer Tabelle ...
Aber am besten erschließen sich die Vorteile, wenn man eine Weile damit arbeitet.
Und, falls dir der Stoßseufzer "Was, ich soll jetzt auch noch Flex und Grid lernen?!" auf der Zunge liegt, hier eine kleine Episode, die mal ein Vortragender benutzt hat:

Ein Lagerarbeiter schleppt keuchend einen schweren Sack durch das Lager.
Sein Kollege: "Nimm doch eine Sackkarre."
Antwort. "Bist Du verrückt, ich soll mir zu dem schweren Sack auch noch eine Sackkarre auf die Schulter packen?"

Um das zu demonstrieren habe ich mal ein Gerüst deines Layouts mit Flex und einer Mediaquery gemacht:
CSS: 
    <style>
        body {
            margin: 0;
            /* Elemente mit Flex anordnen: */
            display: flex;
            /* Elemente untereinander anordnen: */
            flex-direction: column;
        }

        header {
            display: flex;
            /* Elemente nebeneinander anordnen: */
            flex-direction: row;
        }

        nav {
            /* Soll 1/4 des Platzes einnehmen: */
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        nav a {
            height: 50px;
            display: inline-block;
            margin: 20px 0;
        }

        nav a img {
            /* Das Bild soll das a-Element vollständig ausfüllen : */
            height: 100%;
            width: 100%;
            min-height: 0;
        }

        header img.logo {
            /* Soll 3/4 des Platzes einnehmen: */
            flex: 3;
            min-width: 0;
        }

        main {
            display: flex;
            flex-direction: column;
        }

        main section {
            padding: 2em;
        }

        /* Ist das Browserfenster schmal? */
        @media (max-width: 600px) {

            /* Elemente im Header untereinander anordnen: */
            header {
                flex-direction: column;
            }

        }
    </style>
HTML: 
<body>
    <header>
        <nav>
            <a href="seite1.html">
                <img src="images/dia1.jpg">
            </a>
            <a href="seite2.html">
                <img src="images/dia2.jpg">
            </a>
            <a href="seite3.html">
                <img src="images/dia3.jpg">
            </a>
            <a href="seite4.html">
                <img src="images/dia4.jpg">
            </a>
        </nav>
        <img class="logo" src="images/dia0.jpg">
    </header>
    <main>
        <section>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </section>
        <section>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </section>
        <section>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </section>
    </main>
</body>
 
Zuletzt bearbeitet:
T

ThomasF

Neues Mitglied
HTML5 wäre toll.
HTML: 
<!DOCTYPE HTML>
Die richtige Zeichencodierung wäre auch nicht schlecht, sowie die Angaben zum viewport.
HTML: 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
und wie soll das gehen wenn Du die Formatierung mit css weglässt. (Sclero2004 war schneller)
 
Oliver77

Oliver77

Mitglied
CSS: 
header img.logo {
    flex: 3;
    min-width: 0;
    height: fit-content;
}
nav a img {
    height: 100%;
    width: 100%;
    min-height: 0;
    height: fit-content;
}
fit-content erledigt es.
Also, dass es nicht gestretcht wird.
oder
CSS: 
header img.logo {
    flex: 3;
    min-width: 0;
    object-fit: contain;
}
 
M

mabu

Neues Mitglied
Was hat es mit dem Punkt vor content auf sich?
Vor nav und header steht ja auch keiner? Sorry, ich versuche die Funktion des Punktes zu verstehen, ich lerne noch.
nav und header sind nun super, stehen aber maximal voneinander entfernt. Ich mag beides zueinander im center der Seite platzieren.

Mit:
header {
display: flex;
flex-direction: row;
justify-content: center;
}

funktioniert es nicht. Habe justify-content hinzugefügt, aber es hat sich nichts geändert.
Und mein header Bild schließt immer noch nicht an den obersten Rand an, obwohl
body {
margin: 0;
gesetzt ist.
 
Oliver77

Oliver77

Mitglied
nav und header sind HTML Tags, content ist eine Klasse, da muss ein Punkt davor.
Bei einer ID muss eine Raute: # davor. Kannst du die Seite, die du hochgeladen hast mal aktualisieren, dann kann man sich das angucken.
 
S

Sclero2004

Mitglied
Last but not least ist auch noch nicht gefunden, wie ich innerhalb der <section> zwei oder drei Spalten entstehen lassen kann, um ein Foto in der einen und einen Text in der anderen einzufügen.
In einer Zeile würde ich drei Spalten setzen.
Wäre das für mein letztes Anliegen richtig? Habe mal ein wenig experimentiert, nur entstehen keine Spalten und Zuordnung.
<ul class="content">
<li>
<img src="../images/Finisher-Markus-Buthe-Halbmarathon-Osterlauf-Paderborn.jpg" alt="Finisher nach dem Halbmarathon des Paderborner Osterlaufes" class="logo">
<h4>Paderborner Osterlauf</h4>
<p>Es ist der &auml;lteste Volks- und Stra&szlig;enlauf in Deutschland. Das Finisherfoto von Markus rechts entstand nach Zieleinlauf des Halbmarathons bei der 75. Ausgabe des Paderborner Osterlaufes 2023. Der Start und das Ziel befinden sich zentral am Heierswall, direkt neben dem Maspernplatz.<br>
<br>
Die l&auml;ngste Distanz des Laufes ist der Halbmarathon. 1947 startete der Osterlauf mit einer Distanz &uuml;ber 3,35 km. Heutzutage gibt es zwei Bambinil&auml;ufe, den 5K, 10K und Halbmarathon. Von 1961-1992 wurden sogar 25 km gelaufen.
</p>
</li>
</ul>
Zum Vergrößern anklicken....
Ein ul mit nur einem li darin ist in diesem Zusammenhang nicht so gut geeignet. Für das Bild mit dem Text darin bietet sich eher ein figure Element an. HTML würde dann so aussehen:
Code: 
        <section>
            <figure>
                <h4>Strongman Run</h4>
                <img src="https://www.markusbuthe.de/images/markus_buthe_strongman_run.jpg">
                <figcaption>
                    Glücklicher Finisher des Strongman Runs
                </figcaption>
            </figure>
            <p>Glücklicher Finisher des Strongman Runs Laut Veranstalter ist der Strong Man Run ein jährlich in mehreren
                Ländern
                stattfindender Extrem-Hindernislauf.
                Markus Buthe lief den Strongman Run auf der »grünen Hölle« am Nürburgring in Deutschland. Es geht über
                eine
                Halbmarathondistanz auf unterschiedlichen Untergründen über oder durch 40 Hindernisse, wobei das
                Überwinden der
                Hindernissen im Vordergrund steht.
                Schlammige Strecken, durch 50m Autoreifen, über Container klettern, unter Netzen robben, die
                Stromschläge austeilen,
                durch ein Eisbecken, in dem sich Schuhe mit Wasser vollsaugen und die Beinmuskelatur zumacht uvm.!
                Ins Ziel kommt man wie ein dreckiges Schwein (siehe Bild) und hat deutlich mehr geleistet, als nur eine
                Halbmarathon zu
                laufen.
                <br>
                Hier werden unterschiedlichste Muskeln durch vielfältige Anforderungen angesprochen. Die Rumpfmuskulatur
                steht neben der
                Beinmuskulatur im Vordergrund.
            </p>
<!-- Hier kannst Du natürlich weitere Elemente einfügen wenn Du, wie gefragt, möchtest, dass auch drei Elemente nebeneinander angeordnet werden sollen -->
        </section>
Code: 
        section {
            /* Elemente nebeneinander anordnen */
            display: flex;
        }

        figure {
            margin: 0;
            /* Elemente untereinander anordnen */
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        figure img {
            /* Das Bild soll sich responsiv verkleinern aber nicht
                über seine natürliche Größe hinaus wachsen */
            max-width: 100%;
        }

        section p {
            flex: 1;
        }
Jedoch, was ich hier im Kommentar versprochen habe:
Das Bild soll sich responsiv verkleinern aber nicht über seine natürliche Größe hinaus wachsen
Zum Vergrößern anklicken....
funktioniert in diesem Zusammenhang nicht. Ich habe da viel probiert und es nicht hin bekommen.
 
S

Sclero2004

Mitglied
PS: Mit ein wenig Nachhilfe von Stackoverflow habe ich auch die zuletzt genannte Einschränkung beheben können. Der Trick besteht darin, um das Bild noch einen div-Container zu legen, unschön aber hilft.
HTML: 
        <section>
            <figure>
                <h4>Strongman Run</h4>
                <div>
                    <img src="https://www.markusbuthe.de/images/markus_buthe_strongman_run.jpg">
                </div>
                <figcaption>
                    Glücklicher Finisher des Strongman Runs
                </figcaption>
            </figure>
            <p>Glücklicher Finisher des Strongman Runs Laut Veranstalter ist der Strong Man Run ein jährlich in mehreren
                Ländern
                stattfindender Extrem-Hindernislauf.
                Markus Buthe lief den Strongman Run auf der »grünen Hölle« am Nürburgring in Deutschland. Es geht über
                eine
                Halbmarathondistanz auf unterschiedlichen Untergründen über oder durch 40 Hindernisse, wobei das
                Überwinden der
                Hindernissen im Vordergrund steht.
                Schlammige Strecken, durch 50m Autoreifen, über Container klettern, unter Netzen robben, die
                Stromschläge austeilen,
                durch ein Eisbecken, in dem sich Schuhe mit Wasser vollsaugen und die Beinmuskelatur zumacht uvm.!
                Ins Ziel kommt man wie ein dreckiges Schwein (siehe Bild) und hat deutlich mehr geleistet, als nur eine
                Halbmarathon zu
                laufen.
                <br>
                Hier werden unterschiedlichste Muskeln durch vielfältige Anforderungen angesprochen. Die Rumpfmuskulatur
                steht neben der
                Beinmuskulatur im Vordergrund.
            </p>
        </section>
CSS: 
        section {
            display: flex;
        }

        figure {
            margin: 0;
            display: flex;
            flex-direction: column;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
        }

        figure img {
            /* This image should shrink in a responsive way
            but not grow above it's natural size */
            max-width: 100%;
        }

        section p {
            flex-basis: 50%;
            flex-grow: 1;
            flex-shrink: 0;
        }
 
S

Sclero2004

Mitglied
Was 1. betrifft, fehlen auf https://www.markusbuthe.de/flex_and_grid/index.htm nur wenige Pixel. Du schreibst zwar:
Der Befehl ist mit "margin: 0;" für den Body gesetzt, dennoch ist das Bild nicht gnaz oben.
Zum Vergrößern anklicken....
Das kann ich jedoch im HTML-Inspektor nicht wieder finden. Der Grund ist, dass Du in page/design.css die style-Tags am Anfang und am Ende drin hast. Die brauchst Du nicht, da der Browser schon durch die Anweisung für das Einbinden weiß, dass es sich um CSS handelt. Setze ich das margin:0; für body im HTML-Inspektor, geht das Bild sofort bis an den oberen Rand.
 
Zuletzt bearbeitet:
M

mabu

Neues Mitglied
Ich kann dir nicht ganz folgen.

Aktuell ist das meine CSS:
<style>
body {
margin: 0;
/* Elemente mit Flex anordnen: */
display: flex;
/* Elemente untereinander anordnen: */
flex-direction: column;
}

header {
display: flex;
/* Elemente nebeneinander anordnen: */
flex-direction: row;
justify-content: center;
}

nav {
/* Soll 1/4 des Platzes einnehmen: */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

nav a {
height: 50px;
display: inline-block;
margin: 20px 0;
}

nav a img {
/* Das Bild soll das a-Element vollständig ausfüllen : */
height: fit-content;
width: 100%;
min-height: 0;
max-width: 200px;
}

header img.logo {
/* Soll 3/4 des Platzes einnehmen: */
flex: 2;
min-width: 0;
height: fit-content;
max-width: 1000px;
}

main {
display: flex;
flex-direction: column;
}

main section {
padding: 2em;
}

section {
/* Elemente nebeneinander anordnen */
display: flex;
}

figure {
margin: 0;
/* Elemente untereinander anordnen */
display: flex;
flex-direction: column;
flex: 1;
}

figure img {
/* Das Bild soll sich responsiv verkleinern aber nicht
über seine natürliche Größe hinaus wachsen */
max-width: 100%;
}

section p {
flex-basis: 50%;
flex-grow: 1;
flex-shrink: 0;
}

.content {
display: grid;
grid-template-columns: 7em 1fr;
grid-template-rows: 2em 3em;
gap: 1em;
margin-bottom: 1em;
}

.content >img {
grid-row: 1 / 3;
width: 6em;
}
/* Ist das Browserfenster schmal? */
@media (max-width: 600px) {

/* Elemente im Header untereinander anordnen: */
header {
flex-direction: column;
}

}
</style>

Was kann raus?
Zudem denke ich, dass ich die CSS mal aufräumen könnte, also alles thematisch zusammenpacken, statt so verstreut. Vermutlich dem »alles auf einmal« geschuldet.
 
S

Sclero2004

Mitglied
2. kannst Du sowohl mit Flex als auch mit Grid lösen. Du schreibst, dass Du beim Tabellenlayout alles optisch schön sehen kannst durch die Rahmen. Das kannst Du aber auch mit Flex und Grid wenn Du den HTML-Inspektor verwendest: Im Browser Rechtsklick auf das Element, das dich interessiert und dann "(Element) untersuchen". Dann werden die Elemente auch sehr schön mit Linien markiert.
Man könnte daran denken, den Header mit Grid zu gestalten aber das hätte den Nachteil, dass die Navigation völlig zerrissen würde, also besser mit Flex.

Edit:
Das Top-Foto (header) und die 6 Links sind je ganz außen angeordnet, obwohl es bei beiden den Befehl "justify-content: center;" gibt!
Zum Vergrößern anklicken....
Der Grund ist, dass "justify-content: center;" nur greift, wenn leerer Raum da ist. Das ist jedoch in dem Fall nicht der Fall, da durch "flex: 1;" und "flex: 2;" die beiden Elemente den Raum horizontal vollständig ausfüllen. Den freien Raum links und rechts kannst Du leicht durch "margin: 0 5%;" erreichen.

Edit2: Ich habe mal ein CSS gemacht in dem selben Stil wie die Sections: Die Bilder in der nav schrumpfen aber wachsen nicht über ihre natürliche Größe.
Code: 
        header {
            display: flex;
            /* Element nebeneinander anordnen: */
            flex-direction: row;
        }

        nav {
            /* Soll nicht über die natürliche Größe der Bilder wachsen
            aber schrumpfen können */
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
            /* Die Elemente darin sollen untereinander angeordnet werden*/
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        nav a {
            display: inline-block;
            /* Zwischenraum 2% der Höhe */
            margin: 2% 0;
        }

        nav a img {
            /* Die Bilder sollen schrumpfen aber nicht über ihre natürliche
            Größe hinaus wachsen */
            height: auto;
            max-width: 100%;
            min-width: 0;
            min-height: 0;
        }

        header {
            margin: 0 2em;
        }

        header img.logo {
            /* Soll 80% des Platzes einnehmen und
            darüber hinaus wachsen können */
            flex-basis: 80%;
            flex-grow: 1;
            flex-shrink: 0;
            min-width: 0;
            align-self: flex-start;
        }
Code: 
    <header>
        <nav>
            <a href="seite1.html">
                <img src="https://www.markusbuthe.de/images/youtube.jpg">
            </a>
            <a href="seite2.html">
                <img src="https://www.markusbuthe.de/images/facebook.jpg">
            </a>
            <a href="seite3.html">
                <img src="https://www.markusbuthe.de/images/instagram.png">
            </a>
            <a href="seite4.html">
                <img src="https://www.markusbuthe.de/images/komoot.png">
            </a>
            <a href="seite5.html">
                <img src="https://www.markusbuthe.de/images/www.jujutsufighting.de.jpg">
            </a>
            <a href="seite6.html">
                <img src="https://www.markusbuthe.de/images/strikingmedia.png">
            </a>


        </nav>
        <img class="logo" src="https://www.markusbuthe.de/images/headerbild.jpg">
    </header>
 
Zuletzt bearbeitet:
M

mabu

Neues Mitglied
Zu Edit1:
"margin: 0 5%;" war ein guter Tipp, danke. Da lässt sich mit den Werten ja auch noch ein wenig spielen.
Dennoch orientieren sich die Container header und nav von der Außenseite und nicht vom center aus.
Ich möchte, dass beide im center mit einem kleinen Abstand zueinander angeordnet sind.
 
S

Sclero2004

Mitglied
Hast Du auch mein Edit2 versucht? Das funktioniert in meinen Augen perfekt:
flex layout.png
Ich habe mal Ränder darum herum gemacht, damit man die Elemente besser erkennt.
 
M

mabu

Neues Mitglied
Danke @Sclero2004
Habe jetzt auch Edit 2 umgesetzt. Es fehlt nur, dass Header und Nav zusammen mittig ausgerichtet sind, wie es bei www.webseite.de ebenfalls über Tabellen gemacht ist.
Habe es mit »justify-content: center;« im header der css dann final geregelt. Das fehlte noch. Prima!! #freu

ABER: Schaue ich mir die Seite auf meinem Smartphone an, sind die Grafiken mit den Links (nav) komplett verschwunden, vermutlich von dem Header Bild verdeckt. Das bedeutet vermutlich, dass das header img sich auch kleiner runterregeln - der Mediumgröße entsprechend - muss. Wie regel ich das denn jetzt?

Jetzt muss ich das nur noch für die Container mit Bild und Text (secion p, figure img) mittig ausrichten.
Da habe ich es überall mit "justify-content: center;" versucht, es veränderte sich nur nichts.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Werbung:

Neueste Beiträge

Oben