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

UL - Links in folgender Reihenfolge.

ScottGambler

ScottGambler

Neues Mitglied
Nabend. Ich habe eine Frage,und zwar arbeite ich gerade an einem WebSpace , zur Übung mit HTML und CSS zu arbeiten und nun habe ich eine Frage dazu. Auf meiner Website (http://scott.space4free.net).

Dort gibt es verschiedene UL-Links, in form eines Bildes wie ihr sehen könnt (Startseite,News,About-us,....) und diese sind untereinander geordnet. Gibt es eine Möglichkeit die alle in einer Reihenfolge zu ordnen? Das heisst anstatt alle untereinander macht man alle nebeneinander,damit man halt oben die QuickSlotLeiste hat:-)

Zum Beispiel wie (PvP4Ever). Dort haben sie es auch so hintereinander.

Ich hoffe ich habe meine Frage ausführlich formuliert.


//Habe schon auf html-seminar geschaut,aber nichts gefunden

Grüße
 
Wenn Du Elemente nebeneinander positionieren willst, verwende CSS. Genauer gesagt die Eigenschaften float und display. Das solltest Du dich unbedingt neben HTML auch anschauen.
 
Hallo threadi.

Danke für die Schnelle Antwort.

Ich schaue mich nun mal auf einer Website um,und lese es mir mal durch! :)

Grüße.
 
Ich habe es nun mal mit der Position verstanden und bereits geschrieben. Das einzige Problem was es gibt,ist dass das Bild "StartSeite" als UL nicht 100% auf dem Rechteck ist, sondern etwas daneben geraten , und ich weiß nicht wie ich die Koordinaten des Bildes verändere.

Source:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1000px; }
div { border:1px solid #888; }



#a2 { position:absolute; top:10px; left:100px; width:120px; height:70px;
      z-index:2; background-color:#ccf; }
#a3 { position:absolute; top:220px; left:200px; width:250px; height:250px;
      z-index:3; background-color:#ffa; }

</style>
</head><body>

<div id="a2"><ul>
<a href="StartSeite.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="100" width="120" height="70" border="0"
alt="" />
</a>
</ul></div>
</body></html>
 
Der HTML-Code in deinem letzten Beitrag ist fehlerhaft. Zudem ist es nie eine gute Idee absolute Positionierung zu verwenden wenn man es nicht muss. Hier brauchst Du das überhaupt nicht.

Wenn Du Elemente nebeneinander positionieren willst, dann nutze wie schon gesagt float. Verwende margin (Außenabstände) und padding (Innenabstände) um die Elemente dann genauer auszurichten.

Wenn ich mir deine Seite hier genauer anschaue, dann scheitert deine Idee dort auch schon daran, dass die Bilder oben nicht in einer <ul>-Liste stehen sondern jeder in seiner eigenen.

Falsch (so wie es bei dir gerade aussieht):
HTML: 
<ul>
<li><a href="#"><img src="bild.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="bild.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="bild.jpg" alt=""></a></li>
</ul>

Richtig:
HTML: 
<ul id="navi">
<li><a href="#"><img src="bild.jpg" alt=""></a></li>
<li><a href="#"><img src="bild.jpg" alt=""></a></li>
<li><a href="#"><img src="bild.jpg" alt=""></a></li>
</ul>

Das kannst Du dann auch per CSS (Eigenschaft float - merken) ausrichten:

Code: 
#navi li {
 display: block;
 float: left;
}

Wenn Du solche Navigationsleisten selbst gestalten willst, schau dir unbedingt mal einige Beispiele zu horizontalen Menüs an. Beispiele:
Horizontales Dropdown-Menü
SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht. Die macht man mit CSS, nicht mit HTML.
 
So. Ich habe deinen Beitrag erst zu spät gelesen,und habe nun folgendes "programmiert" was super funktioniert.

/*
Ist nur der Grundbau,da die verschiedenen UL Links noch nicht existieren, und nicht wundern dass es immer das selbe Bild ist, war nur zum Testen (!)
*/

Source Code

HTML: 
<html> 
<center>
<center>
<style type="text/css">
body { margin:0; padding:0; height:1000px; }
div { border:0px solid #888; }




#a4 { position:absolute; top:0px; left:200px; width:0px; height:0px;
      z-index:3;  }
#a5 { position:absolute; top:15px; left:200px; width:0px; height:0px;
      z-index:3;  }
  
</style>
</head><body>

<div id="a4"><ul>
<a href="StartSeite.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="310" width="120" height="70" border="0"
alt="" />
</a>


</style>
</head><body>

<div id="a5"><ul>
<a href="News.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="320" width="120" height="70" border="0"
alt="" />
</a>

<div id="a4"><ul>
<a href="About-us.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="330" width="120" height="70" border="0"
alt="" />
</a>

<div id="a4"><ul>
<a href="Member.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="340" width="120" height="70" border="0"
alt="" />
</a>

<div id="a4"><ul>
<a href="Forum(N/A).htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="360" width="120" height="70" border="0"
alt="" />
</a>

<div id="a4"><ul>
<a href="Changelog.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="370" width="120" height="70" border="0"
alt="" />
</a>


<div id="a4"><ul>
<a href="StartSeite.htm" target="_blank">
<img src="http://s14.directupload.net/images/121019/ydzjhz47.gif"
top="10" left="380" width="120" height="70" border="0"
alt="" />
</a>
</center>

<br><br><br><br><br><br><br><br><br>
<head>  
  <link rel="stylesheet" href="design2.css" type="text/css">    
</head> 


<body>  
<body background="http://www.rayipress.co.uk/wp-content/uploads/2009/06/1024x768-sunset-mountain-bike-wallpaper.jpg">
<table bgcolor="gray" height="100%" cellpadding="5" border="1" >    
<tr>        
  <!--  Logo -->        
 <!-- <td width="0" valign="top"> -->
           


   <td width="800" height="1000" valign="top">        
    <center>
	<img src="Trolling.png" width="600" height="150" border="2" alt  
	</center>
<br><br>	
</center>
    <p>An der Gründung und am planen für den Downhill Club Reckange waren 7 Mann beteiligt! Die Gemeinde 'Reckange' ging am 1 November
	mit zu dem "Lac Blanc" auf die Downhillstrecke. Sie haben sich dort etwas erkundigt und den beteiligten Jugentlichen zugeschaut 
    um sich somit eine Meinung verschaffen zu können.Gott-sei-dank fanden sie es gut,und somit konnte der Plan von der Downhill-Strecke vorangehen.
	Erstmals wurde der Weg freigemacht, weil alles war so zugewachsen von Gebüschen,dass man nicht normal dort gehen konnte. Dann , 3 Tage später
	bekamen wir das "Feu-vert" für den ersten Teil der Strecke. Somit durften wir auch nun die Strecke offiziell bauen!</p>        

<table border="1">
  <tr>
    <table bgcolor="gray" height="30%" cellpadding="2" border="1" > <td>Fahrer  </td>
    <td> Bike </td>
  </tr>
  <tr>
    <td> Sam </td>
    <td> BigHit 3  </td>
	 </tr>
  <tr>
    <td> Ken  </td>
    <td> Kona Stinky DeLuxe  </td>
  </tr>
  <tr>
    <td> Max  </td>
    <td> Kona Stinky  </td>
	  </tr>
  <tr>
    <td> Nic  </td>
    <td> KonaStinky  </td>
	  </tr>
  <tr>
    <td> Yannick  </td>
    <td> Bighit 3 </td>
  
</table>
</table>  

</body>
</html>
 
Da schließe ich mich der Aussage von threadi an. Bevor Du weiter machst, solltest Du Dir erstmal HTML etwas genauer angucken, z.B. SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei . Dann erstellst Du Dir eine neue Datei, machst da dann das HTML-Grundgerüst rein und danach fügst Du die Inhalte rein, erstmal ohne an das spätere Design zu denken. Also so Tags wie <center> haben in einer modernen HTML-Datei nichts zu suchen, das stammt noch aus Zeiten, bevor es CSS gab. Bei HTML zählt nur der logische Aufbau der Datei und der semantisch korrekten Auszeichnung ( Semantik ). Also ein Absatz kommt in <p>, tabellarische Daten in <table>, etwas was besonders wichtig ist in <strong>, eine Linkliste in ein <ul>. Und das ganze unabhängig davon, wie der Browser das darstellt. Und wenn Du das hast, dann kannst Du Dich ans Aussehen begeben, das macht man dann mit CSS und nicht mit HTML.

Ich weiß, dass es einen reizt, schnell was schön gestaltetes zu erstellen und dann anzugucken, aber das ist der falsce Weg. Zuerst die Grundlagen lernen und darauf dann aufbauen. Es ist ähnlich einer Fremdsprache. Vor Jahren war ich mal in Italien und habe mich total verfahren, dachte ich zumindest. Na, kein Problem dachte ich, angehalten und einen Passanten mit ein paar Brocken italienisch (nachgeschlagen was ich gerade brauchte) nach dem Weg gefragt. Hat super geklappt, der Passant hat mich verstanden, aber leider wurde ich aus der Antwort nicht klug, da ich ja nur das wusste, was ich gerade brauchte um ihn zu fragen. Also erstmal die Grundlagen lernen, und dann klappt das auch mit Deiner Website.

Gruß thuemmy

P.S. Ich habe mal Dein letztes Elaborat durch den W3C-Validator ( The W3C Markup Validation Service ) geschickt... 51 Fehler und 12 Warnungen

P.P.S Ich habe dann mein Ziel trotzdem gefunden, aber vermutlich mit vielen Umwegen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben