Menu Leiste
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
boxen
code
datei
dritte bereich
frage
grafik
hintergrund
http
kopieren
letzte artikel
list
mache
machen
punkt
radius
tabelle
tag
text
url
-
Hallo,
habe auf dem Screen eine Menu Leiste, diese möchte ich gerne erstellen auf meiner Webseite an der Linken Seite, aber wie am besten? Habe jetzt mal einen Grundbau, aber wie mach ich das mit den Kästchen & so?
<table width="250"> <tr> <td align=center>Titel</td> </tr> <tr> <td> <ul> <li><a href="datei">Punkt 1</a></li> <li><a href="datei">Punkt 1</a></li> <li><a href="datei">Punkt 1</a></li> </ul> </td> </tr></table><br/><table width="250"> <tr> <td align=center>Titel</td> </tr> <tr> <td> <ul> <li><a href="datei">Punkt 1</a></li> <li><a href="datei">Punkt 1</a></li> <li><a href="datei">Punkt 1</a></li> </ul> </td> </tr></table>
Hier ist der Screen: http://picfront.de/d/7HHg
Hier sind die tag/grafik">Grafiken: http://europachat.ibitlive.eu/ Sorry wegen anderen Hoster, da das mein alter Hoster war. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also du willst das was man da sieht kopieren.Als sidebargadget oder auf einer Webseite weilder screen so aussieht als ob es sich dabei um ein Sidebargadget handelt.
mfg
Felix -
Nein, erfahrungsgemäß will er wissen wie es gemacht wird, indem jemand es macht und den code dann hierher schreibt oä damit er ihn sich auf die HP kopieren kann.
Wie man sowas macht kann er ja ganz leicht selbst herausfinden, indem er beispielsweise bei selfhtml guckt und lernt. Aber das ist nicht der erste Versuch ihm das nahezubringen. -
Dann will ich mal gnädig sein und dir in Grundzügen das CSS zeigen
#kasten1{-moz-border-radius: 8x; color: #000000; -khtml-border-radius: 8px; border-width: 2px; border-style: solid; border-color: #FFFFFF; position:absolute; width: 150px; height: 250px; backround-color: #000000; }
dann nochn div tag und quasi fertig.
mfg
Felix -
Wie die Vorredner es schon gesagt haben sieht es so aus, als ob du einfach nur einen Quelltext haben willst und ich wäre auch dafür dass du da einfach mal recherchierst, denn wissen wie es geht ist immer besser als fragen wie "Wie mache ich sowas? [...] Wie geht denn das?"
Aber da eine solche Situation eine derer ist, wo die meisten eine gigantische div-Suppe kochen, oder wie du schon angefangen hast, alles in Tabellen prügeln, will ich dir mal unter die Arme greifen, da ich es selbst gerne habe, wenn eine Seite:
1.) schnell läd = möglichst klein ist;
2.) gut mit der Tastatur bedienbar ist;
3.) semantisch aufgebaut ist, sprich eine Überschrift ist auch h[1-6] element und eine HTML-Tabelle wird nur für tabelarische Inhalte benutzt!
somit kommen bei dir schonmal 2 Kritikpunkte:
1.) warum zum Teufel ist das Tux-bild in 4 kleine Bilder unterteilt? Abstellen! - Ich benutze in dem folgenden Code entsprechend auch nur 1 Bild, mit den entsprechenden Maßen.
2.) dein code ist semantisch eine Katastrophe, allerdings werde ich das selbst ausmertzen, da ich denke, dass du davon eh kaum Ahnung hast, sonst sähe er nicht so aus.
darum zuerst mal das HTML, nur der ausschnitt um den es sich handelt:
und das CSS:<ul id="nav"> <li><h2>Letzte Artikel</h2> <ul> <li><a href="#usw">Link</a></li> </ul> </li> <li><h2>Serverteststuff</h2> <ul> <li><a href="#usw">Link</a></li> </ul> </li> </ul>
Den Seitenhintergrund habe ich draußen gelassen und die Textfarbe geschätzt, außerdem habe ich das nur hier im lima-Formular geschrieben, Fehler sind also keinesfalls ausgeschlossen...#nav { width:236px; background:url(http://europachat.ibitlive.eu/tux-bild.png) center 15px no-repeat; padding:185px 0 0; } #nav li { background:url(http://europachat.ibitlive.eu/sbt.png) no-repeat ; padding:17px 0; list-style:none; } #nav ul { background:url(http://europachat.ibitlive.eu/sbb.png) bottom no-repeat; padding-bottom:17px; } #nav h2, #nav ul li { background:url(http://europachat.ibitlive.eu/sbm.png) repeat-y; } #nav li li { list-style:disc inside none; } #nav h2 { text-decoration:underline; } #nav, #nav a { color:#4af } #nav ul h2 { background:none; text-decoration:none; }
Beitrag zuletzt geändert: 5.7.2010 15:58:13 von nemoinho -
Muss ich nur noch die Datei nav.php nennen und die CSS Datei nav.css und hochladen?
-
mit dem letzten Beitrag wäre somit sonoks Aussage bekräftigt.... Eigentlich traurig!
-
Bzw. kann ich den CSS Code & den HTML Code zusammenbauen in einer Datei?
-
ja du kannst in den CSS- Code einen so genannten style-tag machen, sprich:
<html> <header> <style> //CSS-Code hier </style> </header> <body> </body> </html>
finde ich aber nicht sehr empfehlenswert, da so die HTML- Datei leicht nicht mehr zu überschauen ist, besser:
<html> <header> <style src="cssdatei.css">// ausgelagerte Css-Datei angeben </style> </header> <body> </body> </html>
So das wäre erst mal das Grundgerüst, am besten du schaust dir mal CSS- Tutorials an, alles kopieren nützt dir nichs, wenn du das nicht verstehst, meine Seite ist genau mit diesem Grundgerüst aufgebaut, wenn ich Zeit habe werde ich an ihr auch noch ein wenig arbeiten.
PS: Sorry wenn ich da nen Fehler reingebaut habe, aber ich habe schon so lange nicht mehr mit HTML gearbeitet, da ich zurzeit ein kleines Projekt in Delphi realisieren will.
Edit: Oh da hatte ich nen kleinen Wortdreher drin
Beitrag zuletzt geändert: 6.7.2010 20:51:03 von gauss-design -
So habs ich jetzt, aber das sieht ja bisschen komisch aus.
http://europachat.ibitlive.eu/nav.htm
Code:
<html> <header> <style> #nav { width:236px; background:url(http://europachat.ibitlive.eu/tux-bild.png) center 15px no-repeat; padding:185px 0 0; } #nav li { background:url(http://europachat.ibitlive.eu/sbt.png) no-repeat ; padding:17px 0; list-style:none; } #nav ul { background:url(http://europachat.ibitlive.eu/sbb.png) bottom no-repeat; padding-bottom:17px; } #nav h2, #nav ul li { background:url(http://europachat.ibitlive.eu/sbm.png) repeat-y; } #nav li li { list-style:disc inside none; } #nav h2 { text-decoration:underline; } #nav, #nav a { color:#4af } #nav ul h2 { background:none; text-decoration:none; } </style> </header> <body> </body> </html> <ul id="nav"> <li><h2>Letzte Artikel</h2> <ul> <li><a href="#usw">Link</a></li> </ul> </li> <li><h2>Serverteststuff</h2> <ul> <li><a href="#usw">Link</a></li> </ul> </li> </ul>
Beitrag zuletzt geändert: 6.7.2010 21:44:00 von roenix -
Da musst du noch etwas an den Pixelzahlen spielen.
mfg
Felix
Beitrag zuletzt geändert: 6.7.2010 22:20:00 von felicius12 -
So. Hier ist mal ein kleiner Ausschnitt aus meiner Datei:
</style> </header> <body background="http://europachat.ibitlive.eu/bg.jpg"> </body> </html> <ul id="nav"> <li><h2>Login</h2>
Dort ist ein Hintergrund, wie mache ich das, das der Hintergrund über die ganze Seite geht und nicht mitscrollt wenn ich scrolle & das er nicht 2x auftaucht. -
Wie wärs wenn du mal google fragst oder einfach mal html lernst?
-
Bei mir wird so ein Thread immer gleich gelöscht.
Habe mal in Google gesucht, dort ist aber ein Script in einer Div Box drin, kann ich daraus was machen?
<div style="background-image:url('http://europachat.ibitlive.eu/bg.jpg'); background-repeat:no-repeat; margin:30px; border:thin solid #CCCCFF; font-size:150%; width:839; height:386"> <p>Der dritte Bereich.<br>Ein Text, der auch leicht umbricht...usw.</p> </div> -
roenix schrieb:
Bei mir wird so ein Thread immer gleich gelöscht.
Habe mal in Google gesucht, dort ist aber ein Script in einer Div Box drin, kann ich daraus was machen?
<div style="background-image:url('http://europachat.ibitlive.eu/bg.jpg'); background-repeat:no-repeat; margin:30px; border:thin solid #CCCCFF; font-size:150%; width:839; height:386"> <p>Der dritte Bereich.<br>Ein Text, der auch leicht umbricht...usw.</p> </div>
Wunder mich nicht das sie gelöscht werden :D
Frage mich schon lange wieso der hier nicht mal wieder in den Spam verschoben wurden ist ô.o^^
Wieso lernst du nicht einfach html und nervst und nicht mit deinen doofen Fragen? :D^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
