Ergebnis 1 bis 10 von 10

Thema: Wie kann man diese Vorlage zum Leben erwecken?

  1. #1
    Azubi(ne)
    Registriert seit
    24.01.2006
    Beiträge
    94
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Wie kann man diese Vorlage zum Leben erwecken?

    Hallo,

    ist es möglich (wenn ja wie) diese Buttons anzusteuern (verlinken).
    Mit html und css habe ich Erfahrung, ich kann mir nicht vorstellen wie das zu realisieren ist.

    Heiko
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Das geht mir purem CSS. Die Buttons sind ja nur Links innerhalb von <ul>-Listen. Die <ul> kann den halbtransparenten äußeren Rahmen bilden, die Links dann den inneren Rahmen.

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    24.01.2006
    Beiträge
    94
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Ich habe dieses Bild (Vorlage) mit einem Programm erstellt so wie es da zu sehen ist.
    Kann ich auf diesen Bild die "gezeichneten" Buttons ansteuern?

  4. #4
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Ansteuern kannst du diese Buttons mit der Maus. Einfach den Zeiger da hin steuern

    Spaß beiseite. Ich würde die Schaltflächen nicht im Bild selber zeichnen, sondern wie dir geraten wurde mit CSS beschreiben und positionieren. Da du Erfahrung mit CSS hast, dürfte das ein Klacks sein, oder?
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  5. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    24.01.2006
    Beiträge
    94
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Auf diese Art eine Seite zu gestalten bin ich über dieses Video gekommen.
    Interessant ist wie er diese Seite verlinkt und die Buttons aktiviert.

  6. #6
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Wenn du nen Mac dein eigen nennst, nur zu.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  7. #7
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Hallo

    Auf diese Art eine Seite zu gestalten bin ich über dieses Video gekommen.
    Das hat mit aktuellem HTML / CSS nichts zu tun. Um die Jahrtausendwende war das mal in Mode, als Tabellen- und danach fixe Layouts "Stand der Technik" waren.

    Seit etwa 10 Jahren gilt aber die Regel, dass Text auch im Quelltext Text sein soll. Andere Lösungen haben zu viele Nachteile.

    Mit CSS3 wurden die Möglichkeiten in dieser Hinsicht noch mal kräftig erweitert. Für eine Darstellung wie bei deiner Grafik ist es nicht mehr erforderlich, den Text mit einem Grafikprogramm zu erstellen.

    Die Optik mag dann zwar leicht anders sein, das interessiert aber keinen Besucher.

    Ich habe mal auf die Schnelle ein Beispiel mit einer Bildgröße wie dein Beispiel erstellt. Da das gesamte Layout mit CSS erstellt ist können Schriftarten, Farben, Abstände und und und natürlich noch angepasst werden - ohne zu einem Grafikprogramm geifen zu müssen:

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
       <title>Layout mit Hintergrundgrafik 01</title>
       <meta name="description" content="HTML5, CSS3">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!--[if lt IE 9]>
          <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
       <![endif]-->
       <style>
    
       /*Meine persönlichen Grundeinstellungen für alle Seiten*/
       @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
       @import url(https://fonts.googleapis.com/css?family=Asap);
       @media all {
          header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
             display: block;
          }
          * {
             box-sizing: border-box;
          }
          html {
             font-family: Sans-Serif;
             font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
          }
          body {
             margin: 0;
          }
       }
    
       /*Farben, Text-Shadow, Box-Shadow*/
       @media all {
          nav {
             background-color: hsla(360,0%,100%, 0.4);
          }
          nav a {
             color: #4d75a6;
             background-color: white;
          }
          main h1 {
             color: lightsteelblue;
             text-shadow:
                1px  1px 1px white,
                1px -1px 1px white,
                -1px  1px 1px white,
                -1px -1px 1px white;
          }
          main >div p {
             color: ivory;
             text-shadow:
                -1px 1px 1px silver;
          }
          footer {
             background-color: hsla(360,0%,100%, 0.3);
          }
          footer a {
             color: #41464c;
             background-color: hsla(208,100%,97%, 0.8);
          }
       }
    
       /* ==================================================== */
       /* ***Ab hier beginnen die Angaben zur Problemlösung*** */
    
       /*Spezielle Einstellungen*/
       @media all {
          body > div {
             background-image: url(http://www.torange-de.com/photo/21/16/Yacht-Segeln-am-Meer-1365151788_32.jpg);
             background-size: cover;
             width: 768px;
             height: 600px;
          }
          nav {
             padding: 0.5rem 0.5rem;
             border-radius: 0.5rem;
             margin-top: 1rem;
             margin-right: 1rem;
          }
          nav a {
             font-size: 1.2rem;
             font-weight: bold;
             text-decoration: none;
             outline: none;
             padding: 0 0.5rem;
             border-radius: 0.4rem;
             margin-right: 0.8rem;
          }
          nav a:last-child {
             margin-right: 0;
          }
          main h1 {
             font-size: 3rem;
             font-family: Asap;
             font-weight: bold;
             margin-top: 5rem;
             margin-left: 5rem;
             margin-bottom: 0;
          }
          main div {
             transform-origin: 50% 100%;
             transform: perspective(300px) rotateX(25deg);
             width: 70%;
             margin-left: 10%;
             margin-top: -4rem;
          }
          main > div p {
             font-family: Asap;
             font-size: 1.3rem;
          }
          footer {
             padding: 0.5rem 0.5rem;
             border-radius: 0.5rem;
             margin-bottom: 1rem;
             margin-right: 1rem;
             align-self: center;
          }
          footer a {
             font-size: 1.2rem;
             font-weight: bold;
             text-decoration: none;
             outline: none;
             padding: 0 1.5rem;
             border-radius: 0.4rem;
             margin-right: 1rem;
          }
          footer a:last-child {
             margin-right: 0;
          }
       }
    
       /*Flexbox Grundlayout*/
       @media all {
          body > div {
             display: flex;
             flex-direction: column;
          }
          nav {
             align-self: flex-end;
          }
          main {
             flex: 1 1 1%;
          }
       }
    
       /* ***       Ende der Angaben zur Problemlösung***       */
       /* ===================================================== */
    
       /* Vorlage zum Kopieren für Media Queries */
       @media only screen and (max-width: 0px) {
       }
       </style>
    </head>
    <body>
       <div>
          <nav>
             <a href="#">Home</a>
             <a href="#">Foto</a>
             <a href="#">Kontakt</a>
             <a href="#">Sport</a>
          </nav>
          <main>
             <h1>Fotografie</h1>
             <div>
                <p>Hallo</p>
                <p>Mit seiner Aufnahme in die Elite war Knechts Leben auf eine andre Ebene verpflanzt, es war der erste und entscheidende Schritt in seiner Entwicklung geschehen. Es geht durchaus nicht allen Eliteschülern so, daß die amtliche Aufnahme in die Elite mit dem innern Erlebnis der Berufung zusammenfällt. Das ist Gnade, oder wenn man es banal ausdrücken will: es ist ein Glücksfall.</p>
             </div>
          </main>
          <footer>
             <a href="#">Gästebuch</a>
             <a href="#">Impressum</a>
          </footer>
       </div>
    </body>
    </html>
    Gruss

    MrMurphy
    Geändert von MrMurphy (12.11.2015 um 01:07 Uhr)

  8. Folgende User finden die Antwort von MrMurphy gut:


  9. #8
    Azubi(ne)
    Themenstarter

    Registriert seit
    24.01.2006
    Beiträge
    94
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Hallo,

    danke für deine Antwort und für das Beispiel (Code).
    Kopiere den Code und schaue mir dein Beispiel an.
    Melde mich ich habe da noch ein paar Fragen

    Heiko

  10. #9
    Azubi(ne)
    Themenstarter

    Registriert seit
    24.01.2006
    Beiträge
    94
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Whau, das sieht ja gut aus und das auf die schnelle! Wie hast die die Schrift so hin bekommen?
    Habe lange nichts an meiner HP gemacht da hat sich aber einiges getan, flex container kannte ich nicht

    Heiko

  11. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Wie kann man diese Vorlage zum Leben erwecken?

    Hallo

    da hat sich aber einiges getan
    Stimmt. Das hat Nach- und Vorteile. Die Webseitenersteller müssen zusätzliche Elemente und Anweisungen lernen. In Fällen wie deinen erspart man sich dafür die große Bearbeitung von Bildern und spätere Änderungen sind einfacher möglich.

    Wie hast die die Schrift so hin bekommen?
    Das sind nur einige wenige CSS-Anweisungen. Der zu kippende Text muss im HTML-Quelltext in einem Container stehen, der durch die beiden folgenden CSS-Anweisungen perspektivisch gekippt wird:

    Code:
    transform-origin: 50% 100%;
    transform: perspective(300px) rotateX(25deg);
    Zum Testen was welcher Wert bewirkt kannst du ja einfach mal die Werte ändern.

    Gruss

    MrMurphy

Ähnliche Themen

  1. Antworten: 0
    Letzter Beitrag: 21.02.2015, 16:53
  2. ebay-vorlage kann einen rahmen nicht mehr verkleinern hilfe
    Von werner9150 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 07.06.2007, 16:11
  3. kann jemand das Formular zum Leben erwecken?
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 05.09.2006, 04:07
  4. Wer kann diese Formel umformen?
    Von ad3nau im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 03.05.2006, 08:26
  5. Homepage hat Fehler kann diese nicht finden!!
    Von artglass im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 21.07.2004, 21:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •