Nybörjarhjälp till hemsida

Hej hej

Jag är nybörjare på det här med att göra hemsidor, allt jag har lärt mig har jag lärt mig via google och att klippa och klistra ur olika tutorials och mallar. Jag håller hur som helst på med en personlig hemsida som ska samla ihop alla olika nätvärk jag är registrerad på samt visa upp videoklipp och grejer jag har skapat.

Jag fick en idé om att samla ihop spelsajter och speltjänster i en liten popup-meny på sidan och har nu suttit och pysslat med det i några timmar. Jag fick det att se ut ungefär som jag ville ha det när jag använder mig av Chrome, men när jag bytte till Firefox blev allt kaos.

Jag är visserligen inte speciellt förvånad, jag använder mig av fulknep som "&nbsp &nbsp" för att få bilder att hamna där jag vill och skulle någon kunnig människa se min källkod skulle de förmodligen bara skaka på huvudet.

Såhär ser det ut just nu när jag använder Google Chrome, det är kanske inte jättesnyggt men ytan kan jag putsa på senare. Använder jag mig av firefox ser det däremot ut såhär. Ikonerna tappar sina platser och det är bara övre raden som ser ut som den ska. Jag inser också att menyn blir helt annorlunda beroende på vilken upplösning man använder sig av. Som ni säkert ser så har även "spela med mig"-texten bytt plats, det beror förmodligen på att det inte är text man klickar på utan en bild (ytterligare ett fulknep jag provade på för att försöka få det som jag ville.)

Det jag skulle vilja ha hjälp med är antingen begripliga länkar som kan hjälpa mig att göra en liknande meny som fungerar i olika upplösningar, eller om det finns någon här på forumet som kan guida mig. Tar gärna emot designtips också!

Jag har använt mig av Tumblr när jag gjort hemsidan vilket säkert kan orsaka vissa problem. Källkoden för menyn ser just nu ut såhär (inklusive alla "&nbsp")

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".links_body").hide();
$(".links_head").click(function(){
$(this).next(".links_body").slideToggle('fast');
}); }); </script>
<style type="text/css">
.links_list { margin:0px; padding:0px; width:100%;}
.links_head { padding-top:0px; padding-bottom:0px; cursor:pointer; position:relative; margin:1px; text-align:center;}
.links_body { padding:10px; text-align:left; display:none;}
</style>

<div class="links_list">
<img src="http://img28.imageshack.us/img28/859/skrmavbild20120215kl202...." class="links_head">
<div class="links_body">
<center> &nbsp         
<a href="http://steamcommunity.com/id/kemppe"> <img src="http://img268.imageshack.us/img268/4653/steamlogou.png" width="32" height="32" title="Steam"/>
</a>
        
<a href="http://mypsn.eu.playstation.com/psn/profile/Kemppe.png"> <img src="http://img580.imageshack.us/img580/9237/sonypsnlogo.jpg" width="32" height="32" title="Playstation Network"/>
</a>
    
<img src="http://img827.imageshack.us/img827/5305/1325482506891.png" width="83" height="32" title="Origin"/>
<br>
<font size="-148"><a href="http://steamcommunity.com/id/kemppe">Steam: KKemppe</a>  
<a href="http://mypsn.eu.playstation.com/psn/profile/Kemppe.png">PSN: Kemppe</a>  
Orgin: Kemppe</a>

<br>
<br>

                               
<img src="http://img844.imageshack.us/img844/6706/wii64.png" width="36" height="36" title="Wii friendcode"/>

                                
<img src="http://img707.imageshack.us/img707/3341/wordfeud12906535x535...." width="32" height="32" title="Wordfeud"/>
                 
<a href="http://www.betapet.se/user/profile/basic/?userid=530414"> <img src="http://img17.imageshack.us/img17/7111/betapetlogga.gif" width="107" height="32" title="Betapet"/>

<br>
</a>
<font size="-148">Wii: 8128164686388818   </a>
Wordfeud: Kemppe</a>  </a>
<a href="http://www.betapet.se/user/profile/basic/?userid=530414">Betapet.se: Kemppe</a>

<br>
<br>
       </a>
<img src="http://img819.imageshack.us/img819/8062/bonsaj.jpg" width="106" height="32" title="Bonsaj"/>
</a>      &nbsp</a>
<a href="http://vetgirig.expressen.se/qmember.php?g_id=kemppe"> <img src="http://img269.imageshack.us/img269/7089/13807019.jpg" width="106" height="32" title="Vetgirig"/></a>
<br>
     </a>
<font size="-148">Bonsaj.se: Kemppe</a>                   </a>
 <a href="http://vetgirig.expressen.se/qmember.php?g_id=kemppe">Vetgirig.nu: Kemppe</a>
</center>
</div></div>
<p>
<br>
</a>

Som sagt, koden ser förmodligen väldigt amatörmässig ut. Vill ni surfa in på sidan finns den på kemppe.tumblr.com Jag hoppas jag varit tydlig med vad jag försöker åstadkomma och jag skulle bli jätteglad om någon kunde hjälpa mig.

MVH///Kristoffer

Tack för alla svar!

Kanske ska förtydliga min kunskap på området, jag kan inget grundläggande ALLS om CSS. Jag tar färdiga mallar (kallar man det så?) klipper och klistrar och provar mig fram. Sen sparar jag mitt arbete, klickar på uppdatera och ser vad som händer. Vad det är jag egentligen ändrat har jag inte så stor koll på, ser det på ett ungefär ut som jag vill, då är jag nöjd.

Kommer jag på en funktion jag vill ha till min hemsida skriver jag in det i google. I detta fall sökte jag typ på "drop down menu html" och hittade ett javascript jag kopierade. Själva grejen jag skulle behöva ha hjälp med är att på något sätt låsa positionerna i menyn, så att ikonerna och texten håller sig på plats. Jag har som sagt ingen aning om det är lätt eller svårt. Det är alltså länklistan som kommer upp när man klickar på "Spela med mig" jag vill få prydlig, oavsett upplösning. Är det svårfixat?

Callmi: Jag ska ta mig en titt på dina Youtubeklipp ikväll, alltid lär man sig väl något nytt!

Jag kom på en temporär lösning och gjorde bildlänkar av allt istället, det för duga för tillfället. Tack åt alla som lagt ner tid på att försöka hjälpa mig. Om någon har designtips till min hemsida får ni gärna komma med förslag, vill gärna få själva menyn lite snyggare.