Ergebnis 1 bis 3 von 3

Thema: Punkt 0 - Neubeginn

  1. #1
    Teeny
    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Pfeil Punkt 0 - Neubeginn

    Aufgrund dessen das mich meine alte Seite vom Layout und von der Userfreundlichkeit her ein wenig gestört habe und MrMurphy mich darauf hingewiesen hat das ich eine schlechte Struktur habe in meiner Seite,
    habe ich begonnen dieses Projekt auf "Punkt 0" zu bringen.
    Nun denn... angekommen wo ich nun bin, direkt das erste Problem.

    Zunächst einmal mein CSS Code:
    Code:
                /* Haupt Stylesheet */
    
        /* Standard Elemente */
    body { background-color: #FFF5E6 ;}
    
    
    
    
    
    
    
    
    
    
        /* Spezielle Elemente */
    #page-wrapper{
        width: 1920px ;
        height: 1080px ;
        z-index: 1;
    }
    
    #header-wrapper{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width:1200px;
        height: 400px;
        z-index: 1;
    }
    
    #header {
        background: url(images/Header.png) no-repeat ;
        background-size:50% 80%;
        background-attachment:fixed;
        background-position: center;
        z-index: 3;
    }
    
    
    
    
        /* Fonts */
    und hier mein HTML Code:
    Code:
     <!DOCTYPE html>
    <html>
    
    <head>
    <!-- Meta Tags -->
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Ende Meta Tags -->
            
    <!--Einbindung von Stylesheets, etc. -->    
            <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
            <link rel="stylesheet" href="assets/css/main.css" />
            <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
            <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
    <!-- Ende Style -->
        
        <!-- Titel der Seite -->
        <title>Maik&auml;fer Flugbenzin</title>
        <!-- Ende des Titels -->
    
    
    </head>
        
        <body class="homepage">
            <div id="page-wrapper">
            
            <!-- Header -->
                    <div id="header-wrapper">
                        <div id="header" class="container">
    
                            <!-- Logo -->
                                <h1 id="logo"><a href="index.html">Maik&auml;fer Flugbenzin</a></h1>
    
                            <!-- Nav -->
                                <nav id="nav">
                                    <ul>
                                        <li>
                                            <a href="#">Dropdown</a>
                                            <ul>
                                                <li><a href="#">Lorem ipsum dolor</a></li>
                                                <li><a href="#">Magna phasellus</a></li>
                                                <li><a href="#">Etiam dolore nisl</a></li>
                                                <li>
                                                    <a href="#">Phasellus consequat</a>
                                                    <ul>
                                                        <li><a href="#">Lorem ipsum dolor</a></li>
                                                        <li><a href="#">Phasellus consequat</a></li>
                                                        <li><a href="#">Magna phasellus</a></li>
                                                        <li><a href="#">Etiam dolore nisl</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#">Veroeros feugiat</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
    
                        </div>
                    </div>
    
    
    
                        <!--<h1>Herzlich Willkommen auf der Homepage der Wünnenberger Kr&auml;utermanufaktur.</h1><br><br>
                        <h2>Verkauf/Abgabe alkoholischer Getr&auml;nke ab 18 Jahren!</h2>
                        <img alt="indeximg" id="indeximg" src="images/maikäferflugbenzin.png" width="400px" height="180px"><br>
                        <h2>Mit Ihrer Bestellung best&auml;tigen Sie, dass Sie vollj&auml;hrig sind.<br>
                        Bitte seien Sie verantwortungsvoll im Umgang mit alkoholhaltigen Produkten<br></h2>
                        Hier gibt es Maik&auml;ferflugbenzin und andere Leckereien.  <br><br>
                        Wir freuen uns, dass Sie auf unserer Seite sind und wünschen Ihnen viel Spass beim St&ouml;bern und entdecken unserer Produkte.<br>
                         <br><br>
                        Hier haben Sie z.B. die M&ouml;glichkeit die Maik&auml;fergeschichte in verschiedenen Sprachen herunterzuladen.<br> In der Rubrik "Herstellung" finden Sie ein vielf&auml;ltiges Angebot an Lik&ouml;ren.<br>
                        Unsere Produktpalette reicht von Magenbittern über Aromalik&ouml;re bis hin zu Fruchtlik&ouml;ren.<br>
                        <br>
                        Maik&auml;ferflugbenzin: Unser Klassiker, welcher sich weltweit gr&ouml;ßter Beliebtheit erfreut. Das spricht f&uuml;r sich und bedarf keiner weiteren Erkl&auml;rung.<br>
    
                        16 heimische Kr&auml;uter verleihen der Geheimrezeptur ihren typischen Geschmack. Die ursprüngliche Rezeptur stammt aus einem alten Kr&auml;uterbuch der Benediktiner.<br>
                        <b>Probieren Sie unseren Lik&ouml;r.</b>-->
    
    </body>
    
    </html>
    (Im anhang befindet sich das Background img)

    So nun zu meinem Problem, ich schaffe es nicht, das "background-image" so zu positionieren das es vollkommen dargestellt wird im Header.
    Screenshot: Header-BG-Image.jpg

    Vielen Dank im Vorraus.

    Gruss
    Kuro
    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) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Punkt 0 - Neubeginn

    background-size bezieht sich nicht auf die Grafik selbst, sondern auf den Container.
    Es gibt da aber noch ein gotcha, wenn man background-attachment: fixed; verwendet wird das Bild relativ zum Fenster skaliert, nicht zum Container. (http://www.carsonshold.com/2013/02/c...d-positioning/ )

    Sprich, man benutzt hier kein background-attachment sondern (wenn es denn fixed sein soll) position: fixed; auf den Container. Dadurch ist allerdings kein margin: auto; mehr möglich. Das macht bei deinem Konstrukt aber nicht's, da du einen vorgegeben Wrapper hast.
    Code:
    #header-wrapper{
        display: block;
        margin-left: 360px;
        width:1200px;
        height: 400px;
        z-index: 1;
        position: fixed;
    }
    
    #header {
        background: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=800%C3%97143&w=800&h=143) no-repeat ;
        background-color: black;
        background-size:50% 80%;
        /*background-attachment:fixed;*/
        background-position: center;
        z-index: 3;
    }

  3. Folgende User finden die Antwort von Grevas gut:


  4. #3
    Teeny
    Themenstarter

    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Punkt 0 - Neubeginn

    Danke für die Schnelle antwort, sehr Hilfreich.

    Jetzt kann ich weiter arbeiten.

Ähnliche Themen

  1. Menü-Punkt wird schmaler
    Von Martin Fischer im Forum HTML & CSS Forum
    Antworten: 27
    Letzter Beitrag: 28.03.2013, 16:05
  2. zum momentanen Punkt zurückscrollen
    Von andynail im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 20.01.2011, 18:10
  3. mediawiki modrewrite = Punkt und Startseite
    Von Humvie im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.11.2007, 13:28
  4. Das Spiel mit dem Punkt
    Von lancelot2 im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 7
    Letzter Beitrag: 28.04.2006, 12:41
  5. Einen Punkt mit JavaScript machen
    Von Fire im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 17.04.2005, 17:25

Stichworte

Berechtigungen

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