Grössenanpassung Headergrafik bei versch. Auflösungen

DeepBlue

Schönen guten Tag.

Zuerst einmal grosses Lob für euer Forum, ohne die Suchen-Funktion hätte ich meinen Blog noch nicht so weit, wie er jetzt ist :lol:

Jetzt zu meinem Problem.

Die Headergrafik ist jpg-Bild.
Wenn ein User sich mit einer kleineren Bildschirmauflösung als 1024*768 meinen Blog ansieht schiebt es die Headergrafik über die beiden Sidebars drüber.

Der gesamte Blog passt sich aber der Beildschirmauflösung an.

Was kann ich da ändern ??

Kann man die Headergrafik vielleicht in Prozenten angeben und somit eine Anpassung erzwingen ??

Hier mein Stylesheet

Zitat

/*
Theme Name: Journalized Blue
Theme URI: http://zed1.com/
Description: Blue theme from Mike Little's Journalized
Version: 1.01 Released 13 Mar 2005
Author: Mike Little
Author URI: http://zed1.com/journalized/
Credit for the original concept and core of the layout comes
courtesy of Rob Chandanais via: http://bluerobot.com/web/layouts/layout3.html
*/
body {
color: #000000;
background-image: url(images/deepblue_1.jpg); background-repeat:;

margin: 20px;
padding: 0px;
font: 11px verdana, arial, helvetica, sans-serif;
}
h1 {

font-weight: bold;
font-size: 150%;
color: #000000;
text-align: left;
}
img {
border-style: none;
}
.images {
padding: 2px;
background: transparent;
}
h2 {
margin: -12px 210px 20px 190px;
padding: 2px 10px 2px 10px;
font-size: 16px;
color: #eeeeee;
position: relative; /* Position is declared "relative" to gain control of stacking order
(z-index). */
width: auto;
min-width: 120px;
background: #999999;
z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good
browsers. */
border: 1px solid #000000;
}
h3 {
font-size: 85%;
border: 1px solid #000000;
color: #0000FF ;
background: #999999;
padding: 1.5px;
}
h4 {
font-size: 100%;
border: 1px solid #000000;
color: #eeeeee;
background: #999999;
padding: 2px;
}
h5 (
font: bold 20px/25px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 5px 0px;
padding: 0px;
)
abbr {
cursor: help;
}
.storyTitle {
font: bold 14px/16px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 5px 0px;
padding: 0px;
}
.storyCategory {
font-weight: 400;
margin: 0px 0px 5px 0px;
padding: 0px;
}
.storyAuthor {
font-weight: 600;
margin: 0px 0px 5px 0px;
padding: 0px;
}
p {
font: 11px/13px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 16px 0px;
padding: 0px;
}
#headerMessage {
font: 9px verdana, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 2px;
}
pre {
font: 10px/11px fixed;
}
a {
color: #003399;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
text-decoration: none;
background : transparent;
}
a:link {
color: #003399;
}
a:visited {
color: #003399;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
#headerblock {
position: relative; /* Position is declared "relative" to gain control of stacking order
(z-index). */
width: 650px; height: 260px;
min-width: 120px;
margin: 0px 210px 20px 190px;
border: 1px solid #000000;
background-image: url(images/bh-header_650.jpg);
padding: 10px;
z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good
browsers. */
font-size: 25px;
font-weight: 600;
font-family: verdana, helvetica, sans-serif;
margin-left: auto;
margin-right: auto;
}
#headerblock p {
font-size: 22px;
margin: 2px;
padding: 0px;}

#header a:link, #header a:visited {
font-size: 120%;
font-weight: 600;
color: #ffffff;
}
.commentHeader {
position: relative; /* Position is declared "relative" to gain control of stacking order
(z-index). */
width: auto;
margin: 10px 10px 10px 10px;
border: 1px solid #000000;
background: #cccccc;
color: #000000;
padding: 10px;
z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good
browsers. */
font-size: 20px;
font-weight: 600;
}
/* All the content boxes belong to the content class. */
.centreblock, .navigation {
position: relative; /* Position is declared "relative" to gain control of stacking order
(z-index). */
width: auto;
min-width: 120px;
margin: 0px 210px 20px 190px;
border: 1px solid #000000;
color: #000000;
background: #cccccc;
padding: 10px;
z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good
browsers. */
}
.centreblock>p {margin: 0px;}
.centreblock>p+p {text-indent: 30px;}
.meta ul {
display: inline;
}
.meta li {
display: inline;
list-style-type: none;
}
.centreblock ul, .leftsideSection ul, .rightsideSection ul {
list-style-type: none;
margin: 0;
padding-left: 3px;
}
.centreblock ul li {
}
.storyContent {
padding-top: 25px;
color: #000000;
background: #cccccc;
}
.storyCommentContent {
color: #000000;
background: #cccccc;
width: auto;
margin: 10px 10px 10px 10px;
border: 1px solid #000000;
padding: 10px;
}
blockquote {
margin: 0.5em;
color: #000000;
padding: 2px;
background: #aaaaaa;
}
q {
color: #000000;
background: #aaaaaa;
}
#leftside {
position: absolute;
width: 148px;
width: 148px;
top: 20px;
left: 20px;
border: 1px solid #000000;
color: #000000;
background: #cccccc;
padding: 10px;
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 148px;
}
body>#leftside {width: 148px;}
#rightside {
position: absolute;
width: 190px;
top: 20px;
right: 20px;
border: 1px solid #000000;
color: #000000;
background: #cccccc;
padding: 10px;
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 168px;
}
body>#rightside {width: 168px;}
#chaff {
text-align: right;
}
#chaff a {
color: #000000;
font-size: 2px;
}
#chaff a:link { color: #000000; }
#chaff a:visited { color: #000000; }
#chaff a:hover { background: #fff; }
.storyLinks {
text-align: right;
}
.centerP {
text-align: center;
}
#contentcomments input, #centreblock input, #menu input {
margin: 1px;
padding: 1px 1px 4px 1px;
border: 1px solid #000000;
font: 11px/14px verdana, arial, helvetica, sans-serif;
background: #ffffff;
}
#contentcomments textarea, #centreblock textarea, #menu textarea {
margin: 1px;
padding: 1px;
border: 1px solid #000000;
background: #ffffff;
font: 11px/14px verdana, arial, helvetica, sans-serif;
}
.commentfield {
margin-bottom: 4px;
}
.b2calendartable {
background: #cccccc;
border: 1px solid #000000;
}
.b2calendarmonth {
}
.b2calendarrow {
}
.b2calendarheadercell {
background: #999999;
color: #000000;
font: 11px verdana, arial, helvetica, sans-serif;
}
.b2calendarcell {
color: #000000;
font: 11px verdana, arial, helvetica, sans-serif;
}
.b2calendartoday {
color: #ff0000;
}
.b2calendaremptycell {
color: #000000;
}
.b2calendarlinkpost {
color: #003399;
text-decoration: none;
}
.blogrollmain {
margin-bottom: 4px;
}

.buttonarea {
background: #cccccc;
}
span.searchword {
background-color: yellow;
}

Alles anzeigen

Und hier mein Blog: http://deepblue.co.at/wordpress

Besten Dank im Voraus
und liebe Grüsse aus Wien

Michi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

meinerosen

Klar geht das. Es führt aber nicht immer zu akzebtablen Ergebnissen. Bei zu großen Browserfenstern wird das Bild verpixelt und in die Breite gezogen, aus einem schlanken Menschen wird dann eben ein Elefant ;)
Bei zu kleinen Fenstern wird alles gestaucht.
Aber vieles hängt vom Bild ab. Einfach mal probieren.

DeepBlue

und wie komme ich dann zu einem akzeptablen ergebniss ???

DeepBlue

Ich schiebe es jetzt noch einmal rauf, vielleicht weis ja doch jemand eine Lösung !

Hoffe ich zumindest ! :-)

Morris

Pack das Bild in den Hintergrund deines Headers und zentriere es. Wenn der Viewport des Users kleiner wird, werden somit nach und nach die Seiten des Bildes beschnitten, ohne das sich das Bild verformt.

Eine andere Möglichkeit, mit dem gleichen Ergebniss, aber ungleich aufwändiger wäre das verwenden von "overflow: hidden".

Grüße
Mo

DeepBlue

Danke dir !

Die Lösung die ich suche wäre, dass sich der Header im gleichen Verhältnis zum Centerblock verändert, zb. wenn man die Seite zusammenschiebt, oder mit einer anderen Auflösung betrachtet.

Morris

hmmm...skalieren mit Grafiken ist immer suboptimal, da es zu Verzerrungen, Verpixelungen und diesen ganze unschönen Effekten kommen kann.

Ich hab mir deine Seite nochmal angeschaut. Zur Zeit ist der Header ja recht starr.
Eine schöne Lösung wäre ja, wenn der Header, in gewissen Grenzen nach unten, immer die gleiche Breite wie der Content Bereich hätte. Ich vermute auch, dass dies die lösung is du die anstrebst und nicht auch noch eine veränderung der Höhe des Headers beabsichtigst.

Dein div "headerblock" verhält sich jedoch scheinbar nicht wie dein Content.
Step 1: Ändere das.
Step 2: Erweitere dein Bild nach links, so dass bei einer größeren Auflösung kein Leerraum entsteht.
Step 3: Richte dein Hintergrundbild nach rechts aus. (Ich gehe mal davon aus, dass du dein kleines bluaes Haus so lange wie möglich zeigen möchtest ;)).

Wenn du die 3 Steps abgearbeitet hast, skaliert dein Header mit der Größe des Viewports des Users mit.

Grüße
Mo

DeepBlue

Danke dir Morris, du hilfst mir sehr weiter !

Zitat

Dein div "headerblock" verhält sich jedoch scheinbar nicht wie dein Content.
Step 1: Ändere das.

Genau das ist mein Problem, da stehe ich an.

Könntest du mir da bitte noch einmal weiterhelfen.
Was muss ich da genau im Headerblock ändern ???

Danke im Voraus.
Michi

Morris

Gib dem "headerblock" keine feste breite, sondern ein margin für links und rechts entsprechend der Breite von "leftside" und "rightside".

Du solltest außerdem dringend deine CSS mal ausmisten, da stehen teilweise in einer Definition Anweisungen die sich gegenseitig komplett überschreiben.

Grüße
Mo

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Grössenanpassung Headergrafik bei versch. Auflösungen

Jetzt mitmachen!