IF20 the Intelligent Framework – The Magnificent Developer Template

Deutsches Forum

Thema ohne neue Antworten

Logo und Text vertikal zentriert und farbig hinterlegt auf verschiedenen Viewports


Autor Nachricht
Verfasst am: 17. 03. 2014 [14:48]
Oli12
Othmar Voser
Themenersteller
Dabei seit: 06.03.2014
Beiträge: 20
Ich habe immer wieder das gleiche Problem und kapiere es irgendwie nie bleibend.

Ich habe links ein Logo und rechts davon eine Bezeichnung.
Die Bezeichnung sollte vertikal zum Logo zentriert sein.
Der Hingergrund jedoch soll farbig sein und immer ein wenig höher als die Logo-Höhe und/oder der Bezeichnungstext sein.

Wo muss ich da den Hebel ansetzen um dies zu bekommen, so dass es eben mit verschiedenen ViewPorts auch immer stimmt?

[html4strict]
<div id="areaTop">
<div class="ym-wrapper">
<div class="ym-wbox">
<div class="logo"><a href="index.php?id=2" ><img src="typo3conf/ext/ftm_theme_tyaml/_processed_/bild.png" width="81" height="100" alt="News" title="News"></a>
</div>
<span class="logotext">DSS</span>
</div>
</div>
</div>
[/html4strict]
Danke für einen Hinweis.
Verfasst am: 17. 03. 2014 [22:15]
Lego2013
Leo Merkel
Dabei seit: 29.10.2013
Beiträge: 45
Lieber Othmar,
lies das Buch von Peter Müller... Leider wirst Du mit TYPO3 (oder irgendeinem anderen CMS) ohne (sehr) fundierte CSS-Kenntnisse nicht glücklich.

Die Frage, die Du stellst, ist CSS-Basiswissen und hat mit den CSS-Properties
CSS
text-align, margin, padding, color,
usw. zu tun. Die werden in der richtigen Reihenfolge an die Klassen
CSS
.logo
und
CSS
.logotext
gehängt. Und um das auch gleich mit den richtigen Mediaqueries zu verbinden, ist LESS hervorragend geeignet. So eine Regel könnte so aussehen (das ist zwar Sass, aber LESS ist im Prinzip gleich):

CSS
.column-1-3 {
  width : 33.3333%;
  @media (max-width: 600px) {
    width:100%;
  }
}


Meines Erachtens macht es aber keinen Sinn, wenn Dir hier jemand die CSS-Regeln hinschreibt.

Wenn Du mehr der audiovisuelle Typ bist, dann ist vielleicht auch das Little Boxes-Training von Video2Brain interessant für Dich: https://www.video2brain.com/de/videotraining/little-boxes-das-grosse-training.

Beste Grüße, Leo

Verfasst am: 18. 03. 2014 [09:05]
Oli12
Othmar Voser
Themenersteller
Dabei seit: 06.03.2014
Beiträge: 20
"Lego2013" schrieb:

...
Die Frage, die Du stellst, ist CSS-Basiswissen
...

Lieber Leo, ja du hast recht und im Grunde habe ich ein wenig gezögert dies Frage zu stellen...

"Lego2013" schrieb:

...
lies das Buch von Peter Müller...
...

Ich bin erst in diesen Tagen auf die Bücher von Peter Müller gestossen und werde mir mal das neuste zulegen:
http://www.amazon.de/dp/3836227762/ref=nosim?tag=infotektende-21

Ich hoffe damit das richtige Buch getroffen zu haben.
Verfasst am: 18. 03. 2014 [22:12]
Lego2013
Leo Merkel
Dabei seit: 29.10.2013
Beiträge: 45
Hast Du. Ich kenne das zwar explizit nicht so genau, aber Galileo macht generell gute Dinge. Das Ding ist von November 2013 und damit frisch. Ich habe Peter mal auf einer CMS-Konferenz kennengelernt und bin ein Fan von ihm. Er kann so trockene Dinge wie CSS mündlich und schriftlich kurzweilig gestalten. Und als Dozent kennt er sich echt super aus.

Schau mal auf seiner Webseite vorbei, da gibt's auch klasse Tipps. Ein tolle Quelle ist auch http://www.css4you.de/. Da gibt's einen prima Workshop für Einsteiger.

Leider reicht es bei CSS nicht, einfach die verschiedenen Regeln und die möglichen Werte zu lernen. Man muss auch wissen, welche Kombinationen von Selektoren sinnvoll und zielführend sind.

Wenn Du Englisch kannst, ist diese Seite auch super: http://www.webgeekly.com/tutorials/css/advanced-css-selectors-all-web-designers-should-learn-part-1/. Davon gibt's im Netz bergeweise Zeugs.

Viel Spass beim Lernen und den vielen Aha-Effekten, die auf Dich warten!

Beste Grüße, Leo

Verfasst am: 19. 03. 2014 [09:45]
Oli12
Othmar Voser
Themenersteller
Dabei seit: 06.03.2014
Beiträge: 20
"Lego2013" schrieb:

Hast Du. Ich kenne das zwar explizit nicht so genau, aber Galileo macht generell gute Dinge.


Dieses Buch ist der Neuwurf anstelle von Little Boxes welches ausverkauft sein soll (Zitat von der Homepage von Peter Müller: Das neue "Little Boxes" heißt "Einstieg in CSS" (2013)". So ich hoffe nicht falsch getroffen zu haben. icon_smile.gif



Folge uns ...

und bleib auf dem Laufenden ...

Kontakt zur Agentur

Büro Münsterland

if-20.com
Detlef Schäbel
Schöppingener Str. 21
48629 - Metelen Kreis Steinfurt
auch tätig in: Ochtrup, Gronau, Rheine,

Tel.: +49 2556 90 20 933
Home Office Neuenkirchen: +49 5973 7369780
Fax: +49 2556 90 20 942
E-Mail: info@if-20.com