kostenloser Webspace werbefrei: lima-city


Menu Leiste

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    r****x

    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.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ichversteh zwar nicht was du uns sagen/fragen willst aber ih denke das es sich dabei um etwas Graphische handelt und das macht man normalerweise mit CSS und da findest du hier http://de.html.net/tutorials/css/ ein gutes Tuturial.

    mfg

    Felix
  4. Autor dieses Themas

    r****x

    Ich will das so machen, wie auf dem Screen zu sehen ist, die Grafiken befinden sich auf Europachat.ibitlive.eu der Quelltext, wo ich angefangen habe ist im Ersten Beitrag. Ich komm nicht mehr weiter.
  5. 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
  6. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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.
  7. 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
  8. 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:
    <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>
    und das CSS:
    #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;  }
    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...

    Beitrag zuletzt geändert: 5.7.2010 15:58:13 von nemoinho
  9. Autor dieses Themas

    r****x

    Muss ich nur noch die Datei nav.php nennen und die CSS Datei nav.css und hochladen?
  10. mit dem letzten Beitrag wäre somit sonoks Aussage bekräftigt.... Eigentlich traurig!
  11. Autor dieses Themas

    r****x

    Bzw. kann ich den CSS Code & den HTML Code zusammenbauen in einer Datei?
  12. 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 :biggrin:

    Beitrag zuletzt geändert: 6.7.2010 20:51:03 von gauss-design
  13. Autor dieses Themas

    r****x

    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
  14. Da musst du noch etwas an den Pixelzahlen spielen.

    mfg
    Felix

    Beitrag zuletzt geändert: 6.7.2010 22:20:00 von felicius12
  15. Autor dieses Themas

    r****x

    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.
  16. Wie wärs wenn du mal google fragst oder einfach mal html lernst?
  17. Autor dieses Themas

    r****x

    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>
  18. 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^^
  19. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!