• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Text wie im Beispiel formatieren

bUu2188

Mitglied
Schönen guten Tag :)
Ich bin ein totaler HTML Neuling, bin eher von der C++ Fraktion :D
Es geht um folgendes, ich würde gerne einen Text wie in meinem Screendesign an diese Stelle bekommen, aber ich wüsste nicht wie. Könnte mir eventuell jemand helfen?

Tausend Dank im Voraus :)

HTML:

PHP:
<!doctype html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Salon Lifestyle by Sonja Nergiz</title>
    <link rel="stylesheet"  href="layout.css">
  </head>
  <body>

    <header> <!-- Header -->
        <p>Salon</p>
        <div id="header_logo"><a href="#"><img src="Logo.png" alt="Logo"/></a></div>


    </header> <!-- Header -->

    <section id="page_1">

    </section>

  </body>
</html>

CSS:

Code:
@charset "UTF-8";

/* ##########################  TAGS   ############################ */
body, html {margin: 0; padding: 0; width: 100%; height: 100%;}
/* ##########################  TAGS   ############################ */

/* ##########################  Header   ############################ */
header {width: 100%; height: 70px; position: fixed;  background: black; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
#header_logo { width: 30%;   position:absolute; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); margin:45px 0 0 0;   }
#header_logo img { width: 100%;}
header p {padding: 0; color:white; font-family: sans-serif;font-size: 18px; float: right; width: 100%;margin-left: auto;margin-right: auto;}
/* ##########################  Header   ############################ */

/* ##########################  Page   ############################ */
#page_1 {width: 100%; height: 100%; background:url(68633191-salon-wallpapers.jpeg) no-repeat center center fixed;  background-size: cover;}
/* ##########################  Page   ############################ */
 

Anhänge

  • homepage_vorschau.jpg
    homepage_vorschau.jpg
    287,1 KB · Aufrufe: 17
Werbung:
Ok da habe ich eine Angabe vergessen :D Es geht um die Überschrift oben "Salon Lifestyle" wie ich diese so am besten neben das Logo bekomme :)
Vielen Dank und liebe Grüße
 
Werbung:
Es geht um die Überschrift oben wie ich diese so am besten neben das Logo bekomme :)
Vielen Dank und liebe Grüße
ich sehe in dein Code da oben keine Überschrieft "Salon Lifestyle" .Nur im Titel ,und Titel bleibt Titel .
Also mit deinen jetzigen angaben kann ich da nicht helfen.

Was sagt das Foto? So soll es aussehen?
 
Ja nimmt man dort am besten einen p- Tag oder einen h tag? und wenn ich diesen verwende, bekommt man es hin über dem Logo das so zu zentrieren? Also "Salon" links davon und "Lifestyle" rechts davon ? Liebe Grüße
 
Werbung:
Wow vielen vielen Dank sieht es spitze aus :)
Muss mir das nun mal genauer ansehen, aber so ungefähr wollte ich es :)
Ich weiß gar nicht wie sehr ich Ihnen danken kann :) Ich komm mit diesem postion absolute, realative nocht nicht so ganz klar. Ich habe auch irgendwie Schiss zuviel in CSS zu machen, ich weiß nicht ich habe das Gefühl wenn ich dort zuviel "style" das ein Dritter das sehen könnte und sagt "Was ein Schrott" :D
 
Vielen vielen Dank ich habe nur noch eine Frage, wenn ich mir das ansehe. Wie haben Sie den Text oben so positioniert? Einfach nur durch das "margin = auto" und dem "text-align = center" ?

Ich habe anscheinend noch eine ältere CSS Version in meinem Buch den das so zuschreiben wie bei Ihnen "header p#upper span" kann ich nicht erlesen. Das heißt es im header in den p tags in der id die spans angesprochen?

Und warum benutzen Sie um den Header zu definieren ( Buttons etc. ) p tags? Dachte die wären nur für Texte? :)

Liebe Grüße und nochmals tausend Dank :)
 
Ich habe mir gerade einiges über display: flex durchgelesen. Das ist ja genial und die Lösung zu all meinen Problemen. Geben Sie mir Ihre Pay pal EMail ich überweise Ihnen Geld :D Ich hab bin so happy. dieses display flex ist echt genial :)

Vielen vielen Dank für alles :) Thumbs up. Klasse Support :)

Ist dieses "disyplay = flex" neu?
Weil in vielen Tutorials wird das nicht verwendet? Warum ist doch sooooviel besser :)
 
Werbung:
Habe nun alles soweit gemacht und mir ein wenig etwas über display flex durchgelesen, aber wo ist den die weite und breite des Headers definiert ich werde da nun irgenwie nicht schlau :(

Hier mal die Hp auf nen FTP geuploaded.

Liebe Grüße

Code:
http://salonlifestyle.bplaced.net/Sonja%20HP%20v3
 
Noch eine Frage :)
Wie bekomme ich auf der Seite das Bild als kompletten Hintergrund? :)
Die Display Flex macht nur solche Cointer in denen ich den Hintergrund ändern kann, aber es ist leider abgeschnitten. Und bei der "Logocontainer" ist unten eine Spalte, wie bekomme ich die weg? :)

Liebe Grüße
 
Erstmal vielen Dank für die Antwort :)
Aber das meinte ich nicht :( Ich wollte es so wie im Screendesign, dass das Hintergrundbild die komplette 1 SEITE füllt unter dem Header und also z.B page1 {background- image = blabla 100%}.
also wie eine OnePage :)

Liebe Grüße und nochmals 1000 Dank für die Hilfe
 
Werbung:
Vielen vielen Dank :) Sieht auf jeden Fall schonmal sehr gut aus, sowie ich es möchte :)
Ich werde mich nun mal selbst mal probieren, will ja auch was daraus lernen :)

Ich bedanke mich vorab schon mal 10000 mal bei Ihnen :)
 
Zurück
Oben