zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Schrift auf Bild soll position halten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.12.2013, 16:25
Ria Ria ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2005
Beiträge: 25
Ria befindet sich auf einem aufstrebenden Ast
Standard Schrift auf Bild soll position halten

Hallo css Gurus,

ich kürze etwas ab, habe ein Headerbild 1260x240 px. und in die header.php eine div eingebaut.

<div id="sidebar-4"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('sidebar-4') ) : ?>
<?php endif; ?></div>
</head>

daraus ergibt sich die entspr. id für die style.css

die css sieht dazu so aus:

/* --- Header Widget Area --- */

#sidebar-4 {
z-index:4 !important;
font-family: Lato, sans-serif !important;
text-align: center;
font-size: 1.3em;
color: #fff !important;
letter-spacing:0.1em;
position: absolute;
margin-top: 2.0em;
margin-left: 22.1em !important;
margin-right: 0.1em;
margin-bottom: 1.0em;
width: 24.4em;
}
#sidebar-4 .widget-title {
font-size:1.2em !important;
color: #fff !important;
font-style:italic;
}

(nur am Rande, der Text befindet sich in einem Textwidget, auf das obige div verweist)

Im Prinzip funktioniert auch alles, es geht also nur um die CSS, die Schrift wird auf(über) dem Headerbild an der richtigen Stelle rechts angezeigt.

Auch wenn ich das Browserfenster verkleinere bleibt die Schrift an der Stelle "kleben", also richtig, so solls sein.

Nur wenn ich das Browserfenster vergrößere, vergrößert sich die Schrift und wandert weg. Das sie beim verkleinern auch kleiner wird ist ja Ok, wegen kleinen Displays, beim vergrößern des Browserfensters könnte sie an sich so bleiben.

Habt Ihr einen Vorschlag? Nur zur Not mache ich die Schrift in die Grafik als Bild.

Gruss Ria

PS. die Seite ist eine Offline Testseite und alles andere funktioniert.
__________________
Ich weiss, dass ich nichts weiss.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.12.2013, 16:35
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Offensichtlich handelt es sich ja um ein WP-Theme, also Link beim nächsten mal zumindest zum Theme.
Ich vermute jetzt einfach mal, das per Media-Queries die Schriftgröße des body scaliert wird. Also schau in der CSS die Mediaqueries durch und nimm diesen Wert raus.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.12.2013, 17:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Das sie beim verkleinern auch kleiner wird ist ja Ok, wegen kleinen Displays
Nö, eher im Gegenteil. Grade auf Smartphones, aber teilweise auch schon auf Tablets, ist es eines der größten Ärgernisse, wenn die Schrift sich verkeinert.

Deshalb ist es ein Fehler zu versuchen, das Layout einer Seite für alle Bildschirmgrößen sklavisch beizubehalten. Das hat mit modernem HTML / CSS nichts zu tun.

Gruss

MrMurphy
Mit Zitat antworten
  #4 (permalink)  
Alt 29.12.2013, 18:39
Ria Ria ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2005
Beiträge: 25
Ria befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

ja, das ist Wordpress 3.8 mit dem Standardtheme twentyfourteen. Hier der Link:

WordPress › Twenty Fourteen « Free WordPress Themes

das Theme ist Responsive und hat oben im header von Haus aus keinen Widget-Platzhalter. Das habe ich alles hinbekommen und ein Text-Widget eingefügt. Die Funktion als solche ist jetzt da und funktioniert auch.

Die * 11.0 Media Queries sind so Umfangreich, das ich nicht weiß wo ich da ansetzen soll
und es stimmt auch, das bei einem Responsive Theme, bei Vergrößerung des Browserfensters, der 3 Zeiler zwischen <p> gesetzt, eigentlich unter das Headerbild, als Block rutschen sollte. Die einzelnen Inhalte sind bei "Responsive" ja dann untereinander dargestellt, wenn man strg und + Taste drückt.

Ich merke schon, da ist mein Wissen etwas zu kurz geraten. Kopiere gerne hier rein was Ihr braucht und es wäre sehr nett Ihr könntet mich retten.

Gruss Ria

PS. Responsive ist halt noch mal ne Nummer höher
__________________
Ich weiss, dass ich nichts weiss.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.12.2013, 13:47
Ria Ria ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2005
Beiträge: 25
Ria befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

habe das im Header jetzt alles als Grafik! Erstaunlicherweise geht hier bei der Vergrößerung und Verkleinerung die Qualität NICHT verloren, obwohl die dpi ja die Gleiche ist.

Also die Schrift bleibt auch scharf, hätte ich nicht gedacht. Im Upload Ordner hat WP nun 5 verschiedene Größen abgelegt, wobei 150x150 natürlich nicht zu gebrauchen ist. Die anderen Größen wahrscheinlich für andere Auflösungen.

Wie auch immer das twentyfourteen ist ziemlich genial und ich hätte mir die Code-Arbeiten sparen können. Natürlich muss man Bildbearbeitung können oder das Headerbild weglassen.

Gruss Ria

PS. die Websites von den "Profis", von dem Teil, haben auch nur ein Bild und keinen Text drübergelegt.
Leider zu spät bemerkt.
__________________
Ich weiss, dass ich nichts weiss.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Text neben skalierendem Bild vertikal zentriert manya CSS 7 25.04.2013 16:01
Position von Tabelle & Bild über der Tabelle definieren alessandro CSS 2 25.06.2012 00:49
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
Position von Elementen innerhalb DIVs Carino CSS 7 03.08.2007 12:48
Bild position chrisch CSS 11 09.12.2004 15:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:47 Uhr.