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

Selbstskalierendes Hintergrundbild

Hallo,

ich habe mir mal die bisherigen Beiträge zu deinem Problem durchgelesen, aber immer noch nicht verstanden, was du eigentlich erreichen willst.

Du quatscht plötzlich von einer Navigation, die in deinem bisherigen Quelltext überhaupt nicht vorkommt.

Und mache bitte konkretere Angaben.

1. Wie lautet der Text, der über das Hintergrundbild soll?

2. Zeig mal des Hintergrundbild.

3. Soll die Navigation über die gesamte Seitenbreite gehen?

Gruss

MrMurphy
 
Werbung:
Hallo,

welche Überschrift über welchen Text mit welchem Bild? Bitte konkrete Informationen.

Wenn du Hilfe wünscht solltest du uns auch die Voraussetzungen mitteilen. Und Nachfragen beantworten.

Gruss

MrMurphy
 
Werbung:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


    <head>
        <title>hoemknoebi</title>
        <link rel="shortcut icon" href="ssaaxx.png" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="style.css">
       
        <style type="text/css">

        <script type="text/javascript" src="script.js"></script>

       
        #eins { position: absolute; left: 0px; right: 0px; z-index: 1;}
        #ueberschrift { position: fixed; left: 0px; right: 0px; z-index: 2;}

        </style>

   
    </head>


    <body bgcolor="#808080">

   
           
            <div id="eins">
               
            <img src="4.jpeg" id="bg">

            </div>
           
           
            <div id="ueberschrift">
               
            <h1>
                <font color="white">Hier sollte die &Uuml;berschrift kommen die sich nicht nur seitlich dem Bild anpasst sondern auch in der H&ouml;he</font>
            </h1>

            </div>



            <div id="navigation">
               
            <p>Hier sollte ein Abstand kommen der immer gleich bleibt egal wie gross das Bild vom Browser gerade skaliert wird und unter dem eine Navigationsleiste ist die zentriert ist und ca ein drittel der Breite bei Vollbildmode einnehmen sollte.</p>

            </div>

    </body>

</html>
Wie kann ich mein Problem lösen?
 
Code:
img#bg{
      position: fixed;
      top: 0;
      left: 0;
   
      max-width: 100%;
      max-height: 100%;
}


#ueberschrift{
    text-align: center;
    margin-bottom: 50%;
}

#navigation{

    margin-top: auto;
    padding-top: 250px;

}
 
Werbung:
Schau dir mal an was position: fixed überhaupt macht. Es ist klar, das dein Text im zweiten Beispiel unter deinem Bild verschwindet.
 
Werbung:
mache ich es so:
Code:
img#bg{
      position: static;
      top: 0px;
      left: 0px;
      right:0px;
      z-index: 1;
   
      max-width: 100%;
      max-height: 100%;

}


#ueberschrift{
    text-align: center;
    position: fixed;
    left: 0px;
    right: 0px;
    z-index: 2;

}

kommt das heraus.
 
Werbung:
Hallo

erstelle erst mal einen sinnvollen HTML-Quelltext ohne unnötige Elemente. Vor allem die Divitis ist tödlich. Zur Zeit sehe ich nach deinen Angaben im body-Bereich nur

HTML:
<h1>Überschrift mit Hintergrundbild</h1>
<nav>
   <ul>
      <li><a href="#">Banane</a></li>
      <li><a href="#">Kirsche</a></li>
      <li><a href="#">Kiwi</a></li>
      <li><a href="#">Erdbeere</a></li>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Pflaume</a></li>
   </ul>
</nav>

Den Rest erledigst du mit passendem CSS.

Auch werden Abstände nicht mit div- oder p-Elementen hergestellt. Das macht alles CSS.

Position ist bei deinen bisher geäußerten Wünschen auch absolut fehl am Platz.

Gruss

MrMurphy
 
Werbung:
Und was haben diese Früchte und Roulette damit zutun?

...........................................................................................................................................................................................................................................................................................................die Früchte sind ein Beispiel für eine Navigation mit einer Liste. Mit Russisch Roulette war gemeint, das du versuchst mit Copy & Paste deine Problem zu lösen.
 
Hallo,

bei deinen Fragen kommt allmählich das Gefühl auf, das du uns ver...albern willst.

Wenn du mir die Menüpunkte nicht mitteilst muss ich mir halt Platzhalter ausdenken. Wenn du uns die von dir gewünschten Menüpunkte nennst kann ich die auch einarbeiten. Danach hatte ich dich bereits gefragt.

Existiert jetzt eine Lösung für mein Problem?

Ja.

Aber uns fehlen noch Informationen von dir.

Gruss

MrMurphy
 
Welche Informationen?
Und nein ich habe überhaupt nicht die Absicht euch zu veralbern aber ich bin nicht immer so schnell im kombinieren von Zusammenhängen.
 
Werbung:
Welche Informationen?
Und nein ich habe überhaupt nicht die Absicht euch zu veralbern aber ich bin nicht immer so schnell im kombinieren von Zusammenhängen.
Also nach den benötigten Informationen wurde auf den vorherigen Seite öfters gefragt. Also lesen. Es ist ja nicht schlimm das du nicht immer so schnell im kombinieren von Zusammenhängen bist, aber dann solltest du dir überlegen ob dass das richtige für dich ist. Ansonsten kann ich dir nur nochmal ans Herz legen, lerne die Grundlagen. Begriffe wie position: absolute, div oder CSS sollten dir schon etwas sagen, wenn du Sie benutzt.
 
Ich habe mir nochmal die ganze Konversation durchgelesen und habe kein Mangel an Infos gefunden könntest du mir bitte konkret sagen was du noch zu wissen brauchst?
 
Zurück
Oben