tag:forum.selfhtml.org,2005:/selfLogo und Titel in einem Div – SELFHTML-Forum2020-06-25T18:22:40Zhttps://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772539#m1772539DniBo2020-06-24T08:07:22Z2020-06-24T08:07:22ZLogo und Titel in einem Div<p>Hallo zusammen,</p>
<p>ich möchte eine Landing-Page bauen auf die ich im IIS umleite wenn der Zugriff auf eine Unterseite direkt erfolgt.</p>
<p>Es ist unglaublich, ich finde nicht den richtige Weg um folgendes per CSS in meiner Index.HTML zu machen:</p>
<p>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.</p>
<pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.header</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #00BFFF<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.header img</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.header p</span> <span class="token punctuation">{</span>
<span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Intern Web<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 3.6rem<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absoulte<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Ich schaffe es nicht das der Text auch Links und vertikal zentriert angezeigt wird, ausserdem wird meine Schriftart (eingebunden mit @font-face) ignoriert.</p>
<p>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.</p>
<p>HTML und CSS ist (wie man vermutlich sieht) nich meine Domäne, ich habe jetzt einiges durchprobiert, aber ich finde den richtigen Dreh nicht.</p>
<p>Wäre Euch Dankbar für etwas Hilfe.</p>
<p>Viele Grüsse,
Dani</p>
https://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772540#m1772540Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-06-24T08:19:20Z2020-06-24T08:19:20ZLogo und Titel in einem Div<p>Hallo DniBo,</p>
<p>Ich habe leider nur allgemeine Anmerkungen.</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>Es gibt das header-Element. Das scheint für deine Anforderungen wie gemacht zu sein.</p>
<p>Pixel sind als Einheit höchstens dritte Wahl. Verwende besser <em>em</em>.</p>
<p>flex und position:absolute mögen sich wahrscheinlich nicht so wirklich.</p>
<blockquote>
<p>HTML und CSS ist (wie man vermutlich sieht) nich meine Domäne, ich habe jetzt einiges durchprobiert, aber ich finde den richtigen Dreh nicht.</p>
<p>Wäre Euch Dankbar für etwas Hilfe.</p>
</blockquote>
<p>Kannst du ein Online-Beispiel bereitstellen, zum Beispiel auf bplaced.net oder codepen?</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772541#m1772541Rolf B2020-06-24T08:51:41Z2020-06-24T08:51:41ZLogo und Titel in einem Div<p>Hallo Dani,</p>
<p>es würde aus meiner Sicht schon reichen, wenn Du das HTML zeigst, das Du verwendest. CSS ohne HTML ist nicht aussagekräftig.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772542#m1772542DniBo2020-06-24T13:41:19Z2020-06-24T13:41:41ZLogo und Titel in einem Div<p>Hallo Rolf,</p>
<p>sorry, HTML hatte ich vergessen.</p>
<p>Das habe ich derzeit zum testen als Code:</p>
<pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>utf-8</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Umleitungs-Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>/css/landingpage.css</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>stylesheet</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/home.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Testseite Umleitung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p>Viele Grüsse,
Dani</p>
https://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772545#m1772545Matthias Scharwiesmscharwies@selfhtml.org2020-06-24T13:59:13Z2020-06-24T13:59:13ZLogo und Titel in einem Div<p>Hallo Dani,</p>
<blockquote></blockquote>
<p>Wie schon gesagt ist header besser:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/home.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Testseite Umleitung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>und als CSS würd ich <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid" rel="nofollow noopener noreferrer">Grid Layout</a> nehmen:</p>
<pre><code class="block language-css"><span class="token selector">header</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 80px 1fr<span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Das reicht dann schon!</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Ήταν διασκεδαστικό όσο κράτησε.<br>
Χρύσιππος ὁ Σολεύς, 220 π.Χ.
</div>
https://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772549#m1772549Rolf B2020-06-24T14:48:28Z2020-06-24T14:48:28ZLogo und Titel in einem Div<p>Hallo Dani,</p>
<p>der Vorschlag von Matthias mit Grid braucht noch etwas Tuning, und ein paar Hinweise.</p>
<ul>
<li>
<p>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.</p>
</li>
<li>
<p><code>font-family: Intern Web;</code> 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.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>Matthias Grid-Vorschlag berücksichtigt deine gewünschten Abstände noch links nicht, und es fehlt auch die vertikale Zentrierung.</p>
<ul>
<li>die Einrückung des Image bekommst Du mit einem padding-left: 25px (besser: 1.5em) auf dem Container</li>
<li><code>align-items:center</code> funktioniert auch für Grids</li>
<li>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.</li>
<li>dem <p> Element musst Du mit <code>margin: 0;</code> die Randabstände wegnehmen, sonst blasen die den Header auf.</li>
<li>die Alternative zu grid-gap ist <code>margin: 0 0 0 80px;</code> am <p> Element.</li>
</ul>
</li>
<li>
<p>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.</p>
</li>
</ul>
<p>Hier ein Vergleich von Flexbox und Grid: <a href="https://jsfiddle.net/Rolf_b/rw8gL4uc/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/rw8gL4uc/</a></p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/jun/24/logo-und-titel-in-einem-div/1772595#m1772595Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-06-25T18:22:40Z2020-06-25T18:22:40ZLogo und Titel in einem Div<p>@@DniBo</p>
<blockquote>
<pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>Die <a href="https://www.w3.org/International/questions/qa-lang-why" rel="nofollow noopener noreferrer">Angabe der Sprache</a> fehlt.</p>
<blockquote>
<pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>utf-8</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Umleitungs-Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>/css/landingpage.css</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>stylesheet</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>Die <a href="https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen" rel="nofollow noopener noreferrer">Viewport-Angabe</a> fehlt.</p>
<blockquote>
<pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>Das sagten andere schon: <code>div class="</code> und <code>"</code> weg.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
<em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai
</div>