PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Navigation und Textbox
Beitrag
<blockquote data-quote="Cueball" data-source="post: 2053132"><p>Hey Leute,</p><p> </p><p>ich hoffe ihr könnt mir hier behilflich sein. Ich versuche das schon seit knapp einer Woche hinzubekommen, doch da ich wirklich ein totaler anfänger in sachen html und css bin wende ich mich jetzt an euch.</p><p> </p><p>Also zum einen möchte ich eine dropdown navigation haben, doch alles was ich gegoogelt habe bringt mich nicht weiter bzw konnte es nicht umsetzen. Ich hoffe ihr könnt mir da weiter helfen.</p><p></p><p>Und die Textbox soll ohne Hintergrund farbe sein, denn sie soll über einem Hintergrundbild gelegt sein. Damit ich dort reinschreiben kann... sprich einen festen Text den man nur in der html datei ändern kann und nicht im webbrowser selber. Ich hoffe ihr versteht was ich meine.</p><p></p><p>Die Codes poste ich euch, anbei ist gesagt momentan ist es nur für Chrome angepasst mit den bildern. Es wird für IE/FF noch gemacht.</p><p> </p><p>Ich bin für jeden Tipp und jeden Ratschlag dankbar.</p><p> </p><p>HTML Code:</p><p> </p><p>[HTML]<?xml version="1.0" encoding="iso-8859-1"?></p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"></p><p> <head></p><p> <link rel="stylesheet" href="indexcss2 - kopie.css" type="text/css" media="all" /></p><p> <title></p><p> </title></p><p> </head></p><p> <body><div class="body"></p><p> <div id="wrapper"><div id="navi"></p><p><ul></p><p><li><a href="#">Home</a></li></p><p><li><a href="#">Gilde</a></p><p> <ul id="subnav-2"></p><p> <li><a href="/tools/csstabs/2">People</a></li></p><p> <li><a href="/tools/csstabs/2">Careers</a></li></p><p> <li><a href="/tools/csstabs/2">Press</a></li></p><p> </ul></li></p><p><li><a href="#">Bewerbung</a></li></p><p><li><a href="#">Forum</a></li></p><p><li><a href="#">Gästebuch</a></li></p><p></ul></p><p></div><!-- END #nav --></p><p></div><!-- END #wrapper --></p><p> <div id="wrapcontent"><p>Das hier ist ein Text fenster. Wir wollen mal testen ob er das</p></p><p><p> ENTER auch erkennt und mit übernimmt in die breite der bestimmung P!!!</p></p><p>gojaofkjalfkalfkapf</p><p> akpfkapfalöds</p><p> löadlöda</p><p> lökaslda</p><p> </p><p> </div><!-- END #wrapcontent --></p><p> </div><!-- END #body --></p><p> </body></p><p></html>[/HTML]</p><p> </p><p>CSS Code:</p><p></p><p>[CODE]/* CSS Document */</p><p>html {height: 100.1%;}</p><p>* { </p><p>margin: 0; </p><p>padding: 0; </p><p>} </p><p>body {</p><p> font-family: Verdana, sans-serif;</p><p> line-height: 1.8em;</p><p> background: #000000 url(images/Diabolicabanner.jpg);</p><p> background-repeat: no-repeat;</p><p> background-position: top center;</p><p> background-size:650px auto;</p><p> -webkit-background-size: 1090px auto;</p><p>}</p><p>div#wrapper {</p><p> width: 1060px;</p><p> padding: 167px 700px 0px;</p><p>}</p><p>div#navi</p><p> {</p><p> font-size: 0.9em;</p><p> font-weight: bold;</p><p> padding: 40px 0px;</p><p> }</p><p> </p><p>div#navi ul</p><p> {</p><p> list-style-type: none;</p><p> }</p><p> </p><p>div#navi li</p><p> {</p><p> float: left;</p><p> margin-left: 5px;</p><p> }</p><p> </p><p>div#navi a</p><p> {</p><p> display: block;</p><p> padding: 5px;</p><p> width: 130px;</p><p> height: 50px;</p><p> background-image: url(images/button2.png);</p><p> background-size:650px auto;</p><p> -webkit-background-size: 140px auto;</p><p> color: #68228B;</p><p> text-decoration: none;</p><p> text-align:center;</p><p> vertical-align:middle;</p><p> display:table-cell;</p><p> }</p><p> </p><p>div#navi a:visited</p><p> {</p><p> color: #F00;</p><p> }</p><p> </p><p>div#navi a:hover</p><p> {</p><p> color: #8B0000;</p><p> background-image: url(images/button);</p><p> }</p><p> </p><p>div#navi #subnav-1:hover,</p><p>div#navi #subnav-2:hover,</p><p>div#navi #subnav-3:hover,</p><p>div#navi #subnav-4:hover {</p><p> display : inline;</p><p> width: 90%;</p><p> }</p><p> </p><p>div#wrapcontent {background: url(images/umrandungmitpapier2.png);</p><p> width:auto;height:auto;</p><p> background-position:center;</p><p> background-repeat: no-repeat;</p><p> padding: 399px 50px;</p><p> background-size:auto 600px;</p><p> -webkit-background-size: auto 820px;</p><p> text-align:center;</p><p> tex</p><p> }</p><p></p><p> p { </p><p> color: #FF0000; </p><p> background-color: transparent;</p><p> width: 50%; height:0%;</p><p> padding-left: 470px;</p><p> text-align:left; </p><p> }[/CODE]</p></blockquote><p></p>
[QUOTE="Cueball, post: 2053132"] Hey Leute, ich hoffe ihr könnt mir hier behilflich sein. Ich versuche das schon seit knapp einer Woche hinzubekommen, doch da ich wirklich ein totaler anfänger in sachen html und css bin wende ich mich jetzt an euch. Also zum einen möchte ich eine dropdown navigation haben, doch alles was ich gegoogelt habe bringt mich nicht weiter bzw konnte es nicht umsetzen. Ich hoffe ihr könnt mir da weiter helfen. Und die Textbox soll ohne Hintergrund farbe sein, denn sie soll über einem Hintergrundbild gelegt sein. Damit ich dort reinschreiben kann... sprich einen festen Text den man nur in der html datei ändern kann und nicht im webbrowser selber. Ich hoffe ihr versteht was ich meine. Die Codes poste ich euch, anbei ist gesagt momentan ist es nur für Chrome angepasst mit den bildern. Es wird für IE/FF noch gemacht. Ich bin für jeden Tipp und jeden Ratschlag dankbar. HTML Code: [HTML]<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <link rel="stylesheet" href="indexcss2 - kopie.css" type="text/css" media="all" /> <title> </title> </head> <body><div class="body"> <div id="wrapper"><div id="navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Gilde</a> <ul id="subnav-2"> <li><a href="/tools/csstabs/2">People</a></li> <li><a href="/tools/csstabs/2">Careers</a></li> <li><a href="/tools/csstabs/2">Press</a></li> </ul></li> <li><a href="#">Bewerbung</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Gästebuch</a></li> </ul> </div><!-- END #nav --> </div><!-- END #wrapper --> <div id="wrapcontent"><p>Das hier ist ein Text fenster. Wir wollen mal testen ob er das</p> <p> ENTER auch erkennt und mit übernimmt in die breite der bestimmung P!!!</p> gojaofkjalfkalfkapf akpfkapfalöds löadlöda lökaslda </div><!-- END #wrapcontent --> </div><!-- END #body --> </body> </html>[/HTML] CSS Code: [CODE]/* CSS Document */ html {height: 100.1%;} * { margin: 0; padding: 0; } body { font-family: Verdana, sans-serif; line-height: 1.8em; background: #000000 url(images/Diabolicabanner.jpg); background-repeat: no-repeat; background-position: top center; background-size:650px auto; -webkit-background-size: 1090px auto; } div#wrapper { width: 1060px; padding: 167px 700px 0px; } div#navi { font-size: 0.9em; font-weight: bold; padding: 40px 0px; } div#navi ul { list-style-type: none; } div#navi li { float: left; margin-left: 5px; } div#navi a { display: block; padding: 5px; width: 130px; height: 50px; background-image: url(images/button2.png); background-size:650px auto; -webkit-background-size: 140px auto; color: #68228B; text-decoration: none; text-align:center; vertical-align:middle; display:table-cell; } div#navi a:visited { color: #F00; } div#navi a:hover { color: #8B0000; background-image: url(images/button); } div#navi #subnav-1:hover, div#navi #subnav-2:hover, div#navi #subnav-3:hover, div#navi #subnav-4:hover { display : inline; width: 90%; } div#wrapcontent {background: url(images/umrandungmitpapier2.png); width:auto;height:auto; background-position:center; background-repeat: no-repeat; padding: 399px 50px; background-size:auto 600px; -webkit-background-size: auto 820px; text-align:center; tex } p { color: #FF0000; background-color: transparent; width: 50%; height:0%; padding-left: 470px; text-align:left; }[/CODE] [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Navigation und Textbox
Oben