Antworten auf deine Fragen:
Neues Thema erstellen

DIV an bestimmter Stelle des Bildes darstellen bei variabler Bildhöhe & -breite

C

Crazynet

Guest

Hallo!

Ich habe ein Bild, das ich in der Breite auf 100 % habe und mit einer PHP Formel die Höhe proportional berechnen und darstellen lassen (die Breite des inneren Browserfensters bekomme ich durch ein JS auf einer vorherigen Page). Nun ist es aber so. das genau unter dem Text, welcher im Bild ist, eine Wetter-App angezeigt werden soll.

Mein Problem ist, das ich nicht weiß wie ich das auf Grund der varierenden Größen- & Höhenverhältnisse darstellen soll. Habe mir evtl überlegt, das Ganze mit % - Rechnung zu machen - wurde mir aber von einem Freund abgeraten - zu ungenau.

Könnt ihr mir helfen? Danke!
 

dn3d_fanboy

Aktives Mitglied

Mit Prozent zu arbeiten ist hier wahrscheinlich der einzig richtige Weg.
Ich frage mich aber gerade warum Text im Bild ist.
Was für ein Text ist das denn?
 

patrick_l

Hat es drauf

Es wäre für uns alle hilfreich, wenn du dein Markup posten würdest. So kann man dir schwer folgen. Vor allem was du mit dem Text im Bild meinst. Ist es jetzt Text der per HTML über ein Bild gelegt wurde oder ist es ein Bild mit Textinhalt?

Liebe Grüße, Patrick
 

Jormungand

VonAllemEtwas

Muss denn die App immer prozentual angeglichen sein? Unter Umständen kannst du media-queries einsetzen um bei verschiedenen Browsergrößen einfach die Appgröße umzuschalten.
 
C

Crazynet

Guest

Also... Habe jetzt mal den Bereich, wo der Firmenname steht mit weiß übermakiert.

Unter "Das heutige Wetter" soll die Wetter - App

Morgen.jpg
 

patrick_l

Hat es drauf

Für das Anpassen der Bildgröße brauchst du weder JS, geschweige denn PHP. Wenn ich dich richtig verstehe, solltes es mit CSS3 und Background-Size getan sein. Für die App dann einfach eine positionierte Division und dort per PHP inkludieren.

PHP:
<header class="wrap">
  <!-- Content here! -->
  <div id="weatherApp" class="app-wrap">
    <?php include("weather.php"); ?>
  </div>
<header>

Liebe Grüße, Patrick
 

dn3d_fanboy

Aktives Mitglied

Du könnstest auch das "Guten Morgen" direkt mit HTML erstellen, den Farbverlauf mit CSS und das Bild als PNG einfügen. Dem PNG und der Wetter-App einen z-index geben und das Bild unter die App schieben.
 

patrick_l

Hat es drauf

PHP:
<header>
  <div id="branding">
     <h2>Guten Morgen <span>Das heutige Wetter</span></h2>
     <h1 class="brand">Mustermann GmbH</h1>
  </div>
  <div> id="weatherApp" class="app-wrap">
    <?php include("weather.php"); ?>
  </div>
  <div id="teaser">
    <!-- insert image or use CSS3 -->
  </div>
<header>

1. Überschrift h2 nach links floaten
2. Überschrift h1 nach rechts floaten
3. Division weatherApp absolut positionieren, z-index verwenden.
4. Bild per img-tag oder via CSS einbinden.

Die letzte Division kannst du auch weg lassen. Dann einfach dem Header zuweisen und mit einem padding-bottom für genügend Abstand sorgen. Damit sich das Hintergrundbild der Fenstergröße anpasst, die CSS3 Eigenschaft background-size verweden.

Liebe Grüße, Patrick
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.344
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben