Fehler im Menu (HTML Code oder CSS)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
august
bild
blocken
code
container
dank
display
empfehlen
fehler
grundlage
http
index
list
position
problem
spalten
test
text
type
url
-
Hallo,
möchte das wie auf dem Screen zusehen ist erstellen.
Screen: http://www.europachat.ibitlive.eu/bild/Bild.jpg
Hier habe ich den CSS Code aus der kompletten main.css, fehlt noch was?
main.css
#teaser_holder { position: fixed; bottom: 10px; width: 1000px; height: 330px; margin-left: -500px; left: 50%;} #teaser_background { position: fixed; bottom: 10px; width: 1000px; height: 125px; margin-left: -500px; left: 50%; background-color: #333; z-index:110; } #teaser_content {position: relative; top: 45px; width: 262px; z-index:120; float:left; text-transform: uppercase; font-size: 9px; margin-left: 53px;} #teaser_content_image {position: relative; padding:6px 6px 14px 6px; background-color: #000; font-size: 11px; } #teaser_content img { margin-bottom: 4px; } #teaser_content_navigation { margin: 6px 2px 0px 6px; font-size: 11px; } #teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } #teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC }
und hier habe ich den HTML Code:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/main.css" /> <div id="teaser_holder"> <div id="teaser_content"> <div id="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="../images/www/Bild1.jpg"> <br> > Clubnight // 21. August </div> <div id="teaser_content_navigation"> <table border="0"> <tbody> <tr> #teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } #teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } </tr> </tbody> </table> </div> </div> </div> </body> </html>
Aber es ist alles ein bisschen durcheinander, wo liegt der Fehler, was muss geändert werden?
Bitte um Hilfe // Danke.
Beitrag zuletzt geändert: 17.8.2010 18:24:54 von wakeboarder -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi, das ist echt etwas durcheinander. So wie das auf Deinem Link aussieht, ist das ein einfaches Bild mit nem Text drunter. Mach das doch selbst, statt irgendeinen Sch*** irgendwoher zu kopieren. Solltest Du dabei Probleme haben, sag, wobei Dir da geholfen werden soll? Ansonsten musst Du dir schon mal die Mühe machen, wenigstens ein paar Grundlegende HTML- und CSS-Befehle zu lernen.
LG
BigBaer -
Nicht persönlich nehmen.
Aber die Frage sollte heißen "Was ist hier richtig??"
Du hast CSS-Dekladierungen im <body> und HTML Codes im <head>
Das soll so nicht sein. Das soll so auf gar keinen Fall sein!
Probiers mal hiermit (Nur der richtiggestellte Code)<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/main.css" /> <style type="text/css"> #teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } #teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } </style> </head> <body> <div id="teaser_holder"> <div id="teaser_content"> <div id="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="../images/www/Bild1.jpg"> <br> > Clubnight // 21. August </div> <div id="teaser_content_navigation"> <table border="0"> <tbody> <tr> <td>Eine Spalte</td> <td>Eine zweite Spalte</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
Ich würde dir auf jeden Fall einen CSS-Workshop empfehlen, da ich denke, dass du den Code kopiert hast. Du könntest hier viele Elemente auf eines zusammenfassen, aber das können dir die besser Erklären als ich es je könnte. Außerdem brauchst du mal Grundlagen in HTML Junge ;D
PS: Die HTML lernseite ist zwar ein wenig kindlich aufgezogen, aber ich hab dort super HTML gelernt und bin bis heute froh, dass ich es dort gelernt habe. Aber mach wirlich jede Lektionen von Anfang an durch, du wirst es absolut nicht bereuen. -
Danke ;)
Im Firefox funktioniert es jetzt perfekt. Aber im IE liegt ein Fehler vor.
Aktueller Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="http://europachat.ibitlive.eu/css/main.css"> <style type="text/css"> #teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } #teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } </style> </head> <body> <div id="teaser_holder"> <div id="teaser_content"> <div id="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg"><br style="color: rgb(255, 0, 0);"> <span style="color: rgb(255, 0, 0);"> > Clubnight // 21. August</span> </div> </div> </div> </body> </html>
Beitrag zuletzt geändert: 17.8.2010 21:33:25 von wakeboarder -
Weil position fixed im IE falsch interpretiert wird, darum zeigt es nichts im IE an sondern nur im FF.
-
Danke :) :T
Ich würde gerne drei weitere so Menüs nebeneinander Programmieren wollen. Dazu würde ich drei so Div Container einbauen.
Hier mal ein Beispiel Screen: http://www.europachat.ibitlive.eu/Bild2.jpg
So sollte es aussehen in einem bestimmten Abstand, den ich später noch ganz anpassen werde, sobalt meine Webseite fertig ist.
Was ich jetzt nicht ganz verstehe, wie ich das anstellen soll, das es nebeneinander ist. (Wenig HTML Kenntnisse).
Desweiteren sollte es ganz oben in der Mitte sein bzw. nicht am Ende des Browsers wie auf dem Screen zu sehen ist, da ich es ja in einem anderen Code integriere, wo liegt da das big Problem?
----
Aktller Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="http://europachat.ibitlive.eu/css/main.css"> <style type="text/css"> #teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } #teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } </style> </head> <body> <div id="teaser_holder"> <div id="teaser_content"> <div id="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.europachat.ibitlive.eu/images/www/Bild1.jpg"><br style="color: rgb(255, 0, 0);"> <span style="color: rgb(255, 0, 0);"> > Clubnight // 21. August</span> </div> </div> </div> </body> </html>
Habe nochmal gegoogelt und das gefunden, da fehlt aber noch etwas und die px, Farbe passt auch nicht ganz.
#main { width: 868px; background-color: #fff; padding: 0; border-right:1px solid #2E7240; border-left:1px solid #2E7240; border-top:0px; border-bottom:0px; margin: 0 auto; } #spaltelinks { background: #ffd5ee; padding: 0; border: 1px solid #f09; margin: 10px; width: 400px; top: 0; left: 0; } #spalterechts { background: #ffd5ee; padding: 0; border: 1px solid #f09; margin: 10px; width: 400px; top: 0; left: 420px; } #spaltemitte { background: #ffd5ee; padding: 0; border: 1px solid #f09; margin: 10px; width: 400px; top: 0; left: 420px; } .clear{ clear: both; }
HTML CODE dazu:
<div id="main"> <div id="spaltelinks">test</div> <div id="spaltemitte">test</div> <div id="spalterechts">test</div> <div class="clear"></div> </div>
Aber der HTML Code (der letzte) ist irgendwie falsch, der macht die spalten untereinander statt nebeneinander.
Beitrag zuletzt geändert: 17.8.2010 22:14:12 von wakeboarder -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
