nicht angemeldet
Logo und Titel in einem Div
0 
Matthias Apsel
0 
Rolf B
Logo und Titel in einem Div
Matthias Scharwies
Gunnar BittersmannHallo zusammen,
ich möchte eine Landing-Page bauen auf die ich im IIS umleite wenn der Zugriff auf eine Unterseite direkt erfolgt.
Es ist unglaublich, ich finde nicht den richtige Weg um folgendes per CSS in meiner Index.HTML zu machen:
Banner als Div-Container, 100% Weite und 80px Höhe, Hintergrund Blau. Im Banner ein Div in dem das Logo links vom Rand 25px und vertikal zentriert ist. Daneben ein Titel mit eigener Schriftart, 80px von links und ebenfalls vertikal zentriert.
body {
margin: 0px;
}
.header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
background-color: #00BFFF;
color: #ffffff;
}
.header img {
position: absolute;
left: 25px;
}
.header p {
font-style: normal;
font-family: Intern Web;
font-size: 3.6rem;
position: absoulte;
left: 80px;
}
Ich schaffe es nicht das der Text auch Links und vertikal zentriert angezeigt wird, ausserdem wird meine Schriftart (eingebunden mit @font-face) ignoriert.
Nehme ich die <p> Anweisung für den Titel ausserhalb des Div, wird mir meine Schriftart angezeigt, im Div nicht, gleiches wenn ich <H1> nehmen würde.
HTML und CSS ist (wie man vermutlich sieht) nich meine Domäne, ich habe jetzt einiges durchprobiert, aber ich finde den richtigen Dreh nicht.
Wäre Euch Dankbar für etwas Hilfe.
Viele Grüsse, Dani
-
Hallo DniBo,
Ich habe leider nur allgemeine Anmerkungen.
Banner als Div-Container, 100% Weite und 80px Höhe, Hintergrund Blau. Im Banner ein Div in dem das Logo links vom Rand 25px und vertikal zentriert ist. Daneben ein Titel mit eigener Schriftart, 80px von links und ebenfalls vertikal zentriert.
Es gibt das header-Element. Das scheint für deine Anforderungen wie gemacht zu sein.
Pixel sind als Einheit höchstens dritte Wahl. Verwende besser em.
flex und position:absolute mögen sich wahrscheinlich nicht so wirklich.
HTML und CSS ist (wie man vermutlich sieht) nich meine Domäne, ich habe jetzt einiges durchprobiert, aber ich finde den richtigen Dreh nicht.
Wäre Euch Dankbar für etwas Hilfe.
Kannst du ein Online-Beispiel bereitstellen, zum Beispiel auf bplaced.net oder codepen?
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt. -
Hallo Dani,
es würde aus meiner Sicht schon reichen, wenn Du das HTML zeigst, das Du verwendest. CSS ohne HTML ist nicht aussagekräftig.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
sorry, HTML hatte ich vergessen.
Das habe ich derzeit zum testen als Code:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Umleitungs-Test</title> <link href=/css/landingpage.css rel=stylesheet> </head> <body> <div class="header"> <img src="/img/home.png"> <p>Testseite Umleitung</p> </div> </body> </html>Viele Grüsse, Dani
-
Hallo Dani,
Wie schon gesagt ist header besser:
<body> <header> <img src="/img/home.png" alt="Logo"> <p>Testseite Umleitung</p> </header> </body>und als CSS würd ich Grid Layout nehmen:
header { display: grid; grid-template-columns: 80px 1fr; gap: 1em; }Das reicht dann schon!
Herzliche Grüße
Matthias Scharwies
--
Ήταν διασκεδαστικό όσο κράτησε.
Χρύσιππος ὁ Σολεύς, 220 π.Χ. -
Hallo Dani,
der Vorschlag von Matthias mit Grid braucht noch etwas Tuning, und ein paar Hinweise.
-
position:absolute sorgt dafür, dass die so gestylten Elemente aus dem normalen Flow herausgenommen werden. Insbesondere werden sie display:flex oder display:grid nicht mehr beachtet. Also: Entweder Flexbox, oder Grid, oder absolute Positionierung.
-
font-family: Intern Web;mag auf deinem Computer funktionieren, aber du musst einen generischen Fallback-Font (serif oder sans-serif) hinten anfügen, falls der Font auf dem Zielsystem nicht bekannt ist. -
Styles einer Landing-Page würde ich inline setzen (also im <style> Element des <head>. Die sind klein und werden vermutlich nicht recycled, da ist eine externe CSS Datei eher kontraproduktiv.
-
Ich würde dem header keine feste Höhe geben. Lass das weg, definiere lieber etwas padding oben und unten, und lass es den Browser berechnen. Damit bist Du flexibler.
-
Matthias Grid-Vorschlag berücksichtigt deine gewünschten Abstände noch links nicht, und es fehlt auch die vertikale Zentrierung.
- die Einrückung des Image bekommst Du mit einem padding-left: 25px (besser: 1.5em) auf dem Container
align-items:centerfunktioniert auch für Grids- grid-gap ist der Abstand zwischen den Grid-Zellen, hier zwischen Bild und Text. Es wird aber vom Internet Explorer nicht unterstützt. Da der fast tot ist, kannst Du diesen Umstand ignorieren.
- dem <p> Element musst Du mit
margin: 0;die Randabstände wegnehmen, sonst blasen die den Header auf. - die Alternative zu grid-gap ist
margin: 0 0 0 80px;am <p> Element.
-
deine Flexbox-Lösung hat justify-content: center verwendet, darum war der Text nicht linksbündig. Du hättest justify-content: flex-start nehmen müssen. Und das absolut positionierte Bild hat natürlich die Berechnung verhagelt.
Hier ein Vergleich von Flexbox und Grid: https://jsfiddle.net/Rolf_b/rw8gL4uc/
Rolf
--
sumpsi - posui - obstruxi -
-
@@DniBo
<html>Die Angabe der Sprache fehlt.
<head> <meta charset=utf-8> <title>Umleitungs-Test</title> <link href=/css/landingpage.css rel=stylesheet> </head>Die Viewport-Angabe fehlt.
<div class="header">Das sagten andere schon:
div class="und"weg.🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
“Turn off CSS. If the page makes no sense, fix your markup.” —fantasai
-
-