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

Div mit Backgroundimage und Text darüber legen

power

power

Neues Mitglied
Hallo,

Ich möchte eine kleine Website erstellen. Das Design ist komplett von einem externen style.css abhängig. Das Layout ist ungefähr wie folgt: Header, Topmenü, Content, Footer.

Für den Header erstelle ich ein div und als Backgroundimage kommt mein Hintergrundbild hin. Nun möchte ich Text über dieses Bild/div legen. Bis jetzt habe ich einfach nochmals ein div über das eine div gelegt und den Text in das 2. div geschrieben und den Text mit line-height, text-indent ausgerichtet.

Ich finde das ist so hässlich gelöst. Da gibt es bestimmt noch eine bessere/klügere Weise, dies zu realisieren. Gibt mir jemand einen Tipp?

Also nochmals das Ziel: 1. div, hat als Backgroundimage mein Hintergrundbild. Über dieses 1. div möchte ich nun Text legen und diesen auch ausrichten können.

Habe die Homepage als ZIP angehängt.

Gruss
Power
 

Anhänge

Dafür ist ein <div> nicht vorgesehen und auch nicht nötig, das lässt sich alles mit einer Überschrift <h1> erledigen.
HTML: 
<h1>Header</h1>
Code: 
h1 {background-image: url('background-image.png');}
 
Interessanter Lösungsansatz. Sorry, habe vergessen zu sagen, dass die divs teilweise keinen Inhalt haben und einfach nur dort sind damit ich ein Bild an dieser Position habe. Habe eigentlich die Homepage fertig als Bild, erstelle alle Bilder (Header, Footer, usw) und baue das Bild dann mit divs und den Bildern als Backgroundimage nach. Möchte mit den divs eigentlich wie Bereiche machen, damit ich später nur noch das style.css ändern muss, damit ein neues Design entsteht.
 
power schrieb:
Interessanter Lösungsansatz.
Zum Vergrößern anklicken....
Und der Richtige.

Sorry, habe vergessen zu sagen, dass die divs teilweise keinen Inhalt haben und einfach nur dort sind damit ich ein Bild an dieser Position habe.
Zum Vergrößern anklicken....
Das ist der falsche Weg. <div> wird zum gruppieren mehrerer Elemente verwendet, nicht um damit Bilder zu positionieren.

Habe eigentlich die Homepage fertig als Bild, erstelle alle Bilder (Header, Footer, usw) und baue das Bild dann mit divs und den Bildern als Backgroundimage nach.
Zum Vergrößern anklicken....
Das ist die falsche Reihenfolge. Zuerst solltest du deinen Inhalt semantisch korrekt auszeichnen, dann per CSS deiner Seite ein Layout geben.

Möchte mit den divs eigentlich wie Bereiche machen, damit ich später nur noch das style.css ändern muss, damit ein neues Design entsteht.
Zum Vergrößern anklicken....
Das geht viel einfacher, wenn du meine letzte Antwort nochmal liest und deine Arbeitsweise änderst.
 
Beispiel

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Learn PHP</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="header">
        Header
    </div>
    <div class="top">
        Top
    </div>
    <div class="left">
        Left
    </div>
    <div class="middle">
        Middle
    </div>
    <div class="right">
        Right
    </div>
    <div class="bottom">
        Bottom
    </div>
    <div class="footer">
        Footer
    </div>
</body>
</html>
Code: 
.header{
width: 1024px;
height: 100px;
background-color: blue;
}

.top{
width: 1024px;
height: 50px;
background-color: red;
}

.left{
float: left;
width: 200px;
height: 400px;
background-color: green;
}

.middle{
float: left;
width: 624px;
height: 400px;
background-color: grey;
}

.right{
float: left;
width: 200px;
height: 400px;
background-color: green;
}

.bottom{
clear: left;
width: 1024px;
height: 50px;
background-color: orange;
}

.footer{
clear: left;
width: 1024px;
height: 100px;
background-color: darkblue;
}
Im Anhang ist das Bild wie es aussieht.

Wie kann man zum Beispiel den Text Bottom im orangen div ausrichten? Mit margin-left: 50px; wird mir das ganze div geschoben. In diese divs auf dem Bild möchte ich jetzt nach Belieben weitere Inhalte einfügen, weitere divs für Menüs usw. --> eben nur noch beim Ausrichten der neuen Inhalten in den divs happert es noch.
 

Anhänge

  • Unbenannt.jpg
    Unbenannt.jpg
    27,9 KB · Aufrufe: 13
Das ist die falsche Herangehensweise. Mit HTML legst du kein Layout fest, HTML ist nur für die Bedeutung deines Inhaltes zuständig. Einzig CSS ist für das Layout zuständig.
 
_Thor_ schrieb:
Das ist die falsche Herangehensweise. Mit HTML legst du kein Layout fest, HTML ist nur für die Bedeutung deines Inhaltes zuständig. Einzig CSS ist für das Layout zuständig.
Zum Vergrößern anklicken....
Ja das stimmt. Ich sollte den Inhalt erstellen und danach das Layout und Design der Website mit CSS machen. Ursprünglich wollte ich ein Menü machen(Home, PHP, About, Kontakt). Ich wollte aber nicht nur einen Text verlinken, sondern einen Button haben. Da das Design variabel bleiben soll, kann ich keine Buttons gleich mit dem richtigen Text drauf ins HTML schreiben, sondern möchte mit divs das Menü erstellen, die divs verlinken und danach Text darüberlegen. Somit kann ich das Backgroundimage des Menüs leicht über das CSS ändern. Also der Text steht sozusagen im HTML und hinter den Text wird ein div mit einem Hintergrundbild gelegt. Zusammen sieht das dann wie ein Button aus. Wenn die divs auch für solch ein Menü nicht verwendet werden sollten, was gibt es für andere Möglichkeite so ein Menü zu erstellen? Danke für die schnellen Antworten. Geht ja ruck zuck hier.
 
power schrieb:
Ich wollte aber nicht nur einen Text verlinken, sondern einen Button haben. Da das Design variabel bleiben soll, kann ich keine Buttons gleich mit dem richtigen Text drauf ins HTML schreiben, sondern möchte mit divs das Menü erstellen, die divs verlinken und danach Text darüberlegen.
Zum Vergrößern anklicken....
Viel zu umständlich, ein Menü ist eine unsortierte Liste von Links, also zeichnet man es als <ul> aus und da das Layout mit CSS gemacht wird, bleibt das Design variabel.

Somit kann ich das Backgroundimage des Menüs leicht über das CSS ändern. Also der Text steht sozusagen im HTML und hinter den Text wird ein div mit einem Hintergrundbild gelegt.
Zum Vergrößern anklicken....
Ja, das nennt man Trennung von Inhalt und Layout, so sollte es gemacht werden, allerdings nicht mit <div>'s und nicht so kompliziert, wie du es dir vorstellst.

Wenn die divs auch für solch ein Menü nicht verwendet werden sollten, was gibt es für andere Möglichkeite so ein Menü zu erstellen?
Zum Vergrößern anklicken....
HTML: 
<ul id="navigation">
  <li><a href="">Link1</a></li>
  <li><a href="">Link2</a></li>
  <li><a href="">Link3</a></li>
  <li><a href="">Link4</a></li>
</ul>
 
Meine Diagnose: Du hast die divitis.

Dein Problem ist, dass Dir mal irgendwer gesagt hat "Man macht Layout nicht mehr mit Tabellen, sondern mit divs"
Das ist leider völliger Schwachsinn und dieser jemand hat Dich damit völlig irritiert. Denn genau so ist Deine Arbeitsweise: Lauter divs erstellen, die irgendwie positionieren und dann die Inhalte machen. Beim Erstellen eines Menüs machst Du Dir schon Gedanken darüber, dass das Buttons werden...nicht nur im Code, auch beim Erstellen der Website, beim Gedanken machen ist Trennung von Inhalt und Layout eine gute Idee!

Du solltest meiner Meinung nach alles wegwerfen und nochmal neu anfangen. Aber diesmal mit dem Inhalt beginnen, den logisch mit HTML auszeichnen (dabei staunen, wie wenig divs Du doch brauchst) und dann erst das Layout draufsetzen. Auf die Weise kommst Du vielleicht von Deiner leider völlig falschen Denkweise weg. So wie Du eine Website im Moment angehst, wirst Du keinen Spaß mit CSS-Layout haben, das wird Dir immer viel zu umständlich vorkommen. Aber so ist es eben auch gar nicht gedact, weil es so ja nicht sinnvoll und viel zu kompliziert ist. Und Du wirst, wenn Du dann Deinen Inhalt einfügst, nachdem das Layout steht, alles wieder umbauen dürfen oder Du vergisst dann die Semantik.

Nein ehrlich, gehe eine Website andersrum an, fang mit dem Inhalt an und lerne nochmal neu. Und verabschiede Dich von den divs als Wundermittel. Die haben nicht mehr Bedeutung als z.B. <p> oder <h1>.

Helfen können wir Dir hier und werden das auch gerne tun! Wir schmeißen niemandem an den Kopf, er mache alles falsch und lassen ihn dann mit seinen Problemen allein :-)
 
Ja, die divs haben sich irgendwie bei mir eingebrannt, werde mich aber davon lösen :-P. Schon vergessen.

Ich habe nun folgendes gemacht:
Code: 
 <h1 id="title">
  Learn PHP
 </h1>

Code: 
h1#title{
background-image: url(images/header.jpg);
width: 1000px;
height: 100px;
}

Nun möchte ich den Text ausrichten, das Bild soll aber bleiben. Also das Bild bleibt oben links und der Text soll zum Beispiel von links 100px Abstand haben.

Mit
Code: 
margin-left: 100px;
wird der Text aber leider auch das Bild 100px nach links verschoben.

Ich könnte den Text mit
Code: 
(line-height: 100px); text-indent: 100px
ausrichten. Ich denke dies ist aber nicht der Sinn von (line-height) und text-indent?

Eine andere Möglichkeit wäre
Code: 
padding-left: 100px; width: 900px
Da müsste ich dann mit padding und der Grösse des Bildes arbeiten. Ist das der richtige Weg?
 
margin ist der Außenabstand. Klar, dass sich dann auch der Hintergrund verschiebt.
padding ist der Innenabstand. Der ist hier richtig. Nach dem Box Model vergrößert sich dadurch natürlich das Element, deswegen musst Du width anpassen. Ist doch in Ordnung so.
 
Ja, ist ok. Ich wusste nur nicht ob dies der richtige Weg ist. Toll, dass Problem ist behoben --> Dankeschön :-P. Jetzt habe ich nur noch ein Problem.
Habe das Menü jetzt mit <ul><li> erstellt.
Code: 
<ul id="topmenu">
<li><a href="[URL]http://www.google.ch">Link1</a></li[/URL]>
<li><a href="[URL]http://www.gmx.ch">Link1</a></li[/URL]>
<li><a href="[URL]http://www.google.ch">Link1</a></li[/URL]>
</ul>

Code: 
ul#topmenu li{
float: left;
background-image: url(images/button_topmenu.jpg);
width: 180px;
height: 30px;
padding-left: 20px;
padding-top: 10px;
}
ul#topmenu{
margin-left: 0px;
}

Nun möchte ich das Bild verlinken, also nicht nur den Text, sondern das ganze Bild --> sieht dann aus wie ein Button. Möchte das Bild dann auch ändern können zum Beispiel bei a:hover. Mit divs habe ich es geschafft, die habe ich jetzt jedoch verbannt.
 
Das, was Du vorhast, ist ja nur eine Frage der Optik. Also ist ein <div> völlig verkehrt, denn damit legst Du ja die Struktur fest.

Alles, was Du brauchst, ist ein Link, der so groß ist, wie das Listenelement. Also machst Du aus Deinem Link ein Block-Element und passt die Größe entsprechend an. Fertig.

Denn nur Block-Elemente lassen eine Größenänderung per width/height zu.
 
Jetzt hats geklappt.
Hier das HTML und CSS für alle die mal das gleiche Problem/Frage haben sollten.
ul#topmenu li{
float: left;
}
ul#topmenu{
margin-left: 0px;
}
ul#topmenu a{
display: block;
width: 180px;
height: 30px;
border: solid 1px;
background-image: url(images/button_topmenu.jpg);
padding-left: 20px;
padding-top: 10px;
}
ul#topmenu a:hover{
display: block;
width: 180px;
height: 30px;
border: solid 1px;
background-image: url(images/button_top_hover.jpg);
padding-left: 20px;
padding-top: 10px;
}
Zum Vergrößern anklicken....

<ul id="topmenu">
<li><a href="http://www.google.ch">Link1</li>
<li><a href="http://www.gmx.ch">Link1</a></li>
<li><a href="http://www.google.ch">Link1</a></li>
</ul>
Zum Vergrößern anklicken....
 
Da ist aber noch was überflüssig:
display, width, height, border, und die beiden paddings kannst Du Dir im "a:hover" sparen, weil sie ja bereits für "a" definiert sind.

Und falls es mal noch Probleme mit den Einrückungen von Listen gibt, verschiedee Browser setzen margin und padding verschieden ein. Beim einen gibts nur margin, beim anderen nur padding, ein dritter nutzt beides. Im Zweifelsfall erstmal margin und padding auf 0 setzen.

Ansonsten passts natürlich :-)
 
Ja stimmt, habs korrigiert. Danke für den Tipp mit margin und padding.

Hab jetzt leider ein weiteres Problem. Wenn man sich die meine Website ansieht:

Der Content (Text in der gestrichelten Linie) richtet sich automatisch unter dem Topmenu aus. Also ich habe dort keine Angeben in der Höhe gemacht. Der Content folgt einfach automatisch unter dem Topmenu. Warum ist das beim Rightmenu nicht so? Dieses folgt leider automatisch unter dem Header, anstatt gleich unter dem Topmenu. Wie krieg ich das hin, dass das Rightmenu automatisch unter dem Topmenu folgt wie der Content auch?
 
Du floatest content und gibst ihm eine feste Breite. Da das rifhtmenu erst danach im HTML-Code kommt, fließt es also um den content drum rum.

Wenn Du das rightmenu unter dem topmenu und vor dem content haben willst, solltest Du es im HTML-Code zwischen topmenu und content anbringen.

Wozu floatet eigentlich der Content? Wenn das rightmenu (schlecht gewählter Name übrigens, wenn Du das mal links haben willst) am rechten Rand haben willst, solltest Du das rightmenu floaten und den Content drumrum fließen lassen.
 
Hmm... irgendwie komme ich mit den floats auf keinen gründen Zweig.

Habe nun alle floats weggelassen ausser die vom Topmenu, denn die stimmen ja. Das HTML sieht so aus:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Learn PHP</title>
<meta name="generator" content="Bluefish 1.0.7">
<meta name="author" content="silvanvoser">
<meta name="date" content="2009-06-08T23:54:33+0200">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="container">
        <?php
            include("header.php");
            include("topmenu.php");
        ?>
        
        <div id="content">
            <?php
                switch(true){
                case($_REQUEST["navi"] == 10):
                    include("content/home.php");
                    break;
                case($_REQUEST["navi"] == 20):
                      include("content/php.php");
                    break;
                case($_REQUEST["navi"] == 30):
                    include("content/about.php");
                    break;
                case($_REQUEST["navi"] == 40):
                    include("content/kontakt.php");
                    break;
                case($_REQUEST["navi"] == 41):
                    include("content/gaestebuch/gaestebuch.php");
                    break;
                default:
                    include("content/home.php");
            }
            ?>
        </div>
    
    <ul id="rightmenu">
        <?php
            switch(true){
            case($_REQUEST["navi"] == 10):
                include("rightmenu/rightmenu_home.php");
                   break;
               case($_REQUEST["navi"] == 20):
                  include("rightmenu/rightmenu_php.php");
                  break;
           case($_REQUEST["navi"] == 30):
                   include("rightmenu/rightmenu_about.php");
                   break;
           case($_REQUEST["navi"] == 40):
                   include("rightmenu/rightmenu_kontakt.php");
                   break;
           case($_REQUEST["navi"] == 41):
                   include("rightmenu/rightmenu_kontakt.php");
                   break;
            default:
                include("rightmenu/rightmenu_home.php");
        }
        ?>
        </ul>
        
        <?php
            include("footer.php");
        ?>
    
</div>
</body>
</html>
und das CSS so:
Code: 
* {
margin:0px;
padding:0px;
}

div#container{
margin-left: 10px;
margin-top: 10px;
width: 1000px;
}

h1#title{
background-image: url(images/header.jpg);
height: 60px;
text-align: center;
padding-top: 40px;
}

h1#title a{
display: block;
text-decoration: none;
color: black;
}

ul#topmenu li{
float: left;
background-image: url(images/button_topmenu.jpg);
}

ul#topmenu{
list-style: none;
}

ul#topmenu a{
display: block;
width: 180px;
height: 30px;
padding-left: 20px;
padding-top: 10px;
text-decoration: none;
color: black;
}

ul#topmenu a:hover{
background-image: url(images/button_topmenu_hover.jpg);
}

div#content{
width: 760px;
border: dashed 1px;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
}

p#footer{
background-image: url(images/footer.jpg);
width: 1000px;
height: 50px;
}

ul#rightmenu{
list-style: none;
margin-top: 0px;
margin-left: 800px;
}

ul#rightmenu li{
background-image: url(images/button_topmenu.jpg);
width: 200px;
height: 40px;
}

ul#rightmenu a{
display: block;
width: 180px;
height: 30px;
padding-left: 20px;
padding-top: 10px;
text-decoration: none;
color: black;
}

ul#rightmenu a:hover{
background-image: url(images/button_topmenu_hover.jpg);
}

td#gaestebuch_links{
width: 50%;
}

td#gaestebuch_rechts{
width: 50%;
vertical-align: top;
border-left: dashed 1px;
padding-left: 10px;
}
Als ich beim content das float: left; entfernte, schob es mir den content unter das Topmenu :?:.

Wenn ich bei
Code: 
ul#rightmenu{
list-style: none;
margin-top: 0px;
margin-left: 800px;
}
float: right; hinzufüge, ist der content immer noch unter dem topmenu, das rightmenu sehr weit unten und das rightmenu schneidet den footer ab.

Normalerweise bitte ich ja nicht um kompletten Code, aber kann mir jemand an einem Codebeispiel erklären, wie ich das Design richtig hinbekomme?
 
power schrieb:
Als ich beim content das float: left; entfernte, schob es mir den content unter das Topmenu
Zum Vergrößern anklicken....
Hmmm? content steht doch die ganze Zeit schon unter dem topmenu und soll auch da bleiben, oder?

Wenn ich bei ul#rightmenu float: right; hinzufüge, ist der content immer noch unter dem topmenu, das rightmenu sehr weit unten und das rightmenu schneidet den footer ab.
Zum Vergrößern anklicken....
Dazu darf ich mich aus meinem letzten Beitrag zitieren:
Efchen schrieb:
Wenn Du das rightmenu unter dem topmenu und vor dem content haben willst, solltest Du es im HTML-Code zwischen topmenu und content anbringen.
Zum Vergrößern anklicken....

Immer erst das floatende Element und dann das nicht floatende (bei zweien, die nebeneinander stehen sollen). Dann klappts auch mit dem float :-)
 
Hmmm? content steht doch die ganze Zeit schon unter dem topmenu und soll auch da bleiben, oder?
Zum Vergrößern anklicken....
Ja, nur wird mir die obere, gestrichelte Linie nicht mehr angezeigt. Die obere, gestrichelte Linie rutscht irgendwie unter das Topmenu oder vielleicht unter den Button. Es sieht so aus, also würde das Topmenu den Content überlagern.

Wie du mir geraten hast, habe ich das Rightmenu im HTML zwischen das Topmenu und den Content gepackt. Das Rightmenu ist jetzt richtig ausgerichtet und auch am richtigen Platz.

Jetzt ist der Content aber nicht an dem Ort wo er sein sollte. Ist schwierig zu beschreiben deshalb im Anhang 2 Bilder. Interessant ist auch dass die Homepage in Firefox und Internetexplorer unterschiedlich aussieht^^.

Immer erst das floatende Element und dann das nicht floatende (bei zweien, die nebeneinander stehen sollen). Dann klappts auch mit dem float :smile:
Zum Vergrößern anklicken....
Danke für den Tipp, werd ich mir für die Zukunft merken.
 

Anhänge

  • firefox.jpg
    firefox.jpg
    66,2 KB · Aufrufe: 2
  • internetexplorer.jpg
    internetexplorer.jpg
    69,5 KB · Aufrufe: 2
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben