Underlätta när man skapar navigerings iconer?

Permalänk

Underlätta när man skapar navigerings iconer?

Hallå!

Vill skapa min egna iconer till min hemsida, men märker att det är väldigt drygt att göra samma ikoner fast med annan text i. Finns det något sätt att underlätta detta i photoshop eller något annat program? Typ ha en mall med ikonen, så att man bara behöver skriva i texten, och marginalerna blir detsamma.

/kebahyvlarn

Visa signatur
Permalänk
Testpilot

Det är alltid att föredra att skriva text i HTML-koden istället för att ha bilder med text. Har du bilder kan man inte söka på sidan och synskadade kan inte använda skärmläsare. Fundera på om du verkligen behöver ha texten i själva bilden eller om du inte kan ha en bakgrundsbild med text ovanpå istället.

Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Permalänk
Skrivet av hunden:

Det är alltid att föredra att skriva text i HTML-koden istället för att ha bilder med text. Har du bilder kan man inte söka på sidan och synskadade kan inte använda skärmläsare. Fundera på om du verkligen behöver ha texten i själva bilden eller om du inte kan ha en bakgrundsbild med text ovanpå istället.

Hm, du har en poäng.
Tack för svar. Ska se vad jag kan hitta på.

Visa signatur
Permalänk

Hm, av någon anledning så kan jag inte sätta backgrund på min div..

HTML

<li><a href="#"><div class="navigering"></a></li>

CSS

.navigering { height:40px; width:140px; background-image:url('back1.png'); }

Visa signatur
Permalänk

Någon som vet varför?

Visa signatur
Permalänk
Skrivet av Kebabhyvlarn:

Någon som vet varför?

Du avslutar aldrig <div>.

Permalänk
Skrivet av Dai the Flu:

Du avslutar aldrig <div>.

Ahhh, tack för hjälpen. Roligt hur blinda man ibland kan vara

Visa signatur
Permalänk
Medlem

gissar på att du inte är så erfaren i photoshop, du bör lära dig hur du systematiskt skapar bilder med hjälp av lager.
När jag gör knapparna så skapar jag mallen för grundknappen, lägger hela knappen i en grupp, duplicerar knappen efter hur många knappar som ska finnas på hemsidan.

Gör din knapp, sen skapar du texten för alla knappar i nya lager.

Dölj alla andra texter och ha bara den text du vill ska synas på knappen.
tryck shift + ctrl + alt + s (save for webb)
Spara ner den.

Gör samma process för alla knappar.

Enklast är om du gjort knappen i flera lager så du lätt kan gå tillbaka och ändra något ifall du inte är nöjd.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem

här har du en exempelbild jag satt ihop.

http://oi40.tinypic.com/axie14.jpg

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Inaktiv

Varför har du en div där? Du kan ha samma style på a taggen istället för div taggen. Om du vill att den ska bete sig som en div tagg måste du ha display: block; på a taggen.

Permalänk
Skrivet av FlorrpaN:

här har du en exempelbild jag satt ihop.

http://oi40.tinypic.com/axie14.jpg

Aha, tack för tipset.

Skrivet av havsmonstret:

Varför har du en div där? Du kan ha samma style på a taggen istället för div taggen. Om du vill att den ska bete sig som en div tagg måste du ha display: block; på a taggen.

Är ganska grön på html/css. Varje div är en "knapp", som jag sedan sätter en bakgrund på.

Visa signatur
Permalänk
Medlem

Kolla lite på hur man bättre använder "class"

<li><a href="#"><div class="navigering"></a></li>

Är bättre såhär:

<li class="navigering"><a href="#"> knappbild/text här </a></li>

Ett exempel på hur jag gör:

<div class="navigation"> <a href="index.html"><img src="images/buttons/home_btn.png" alt="Home"></a> <a href="portfolio.html"><img src="images/buttons/portfolio_btn.png" alt="Portfolio"></a> <a href="about.html"><img src="images/buttons/about_btn.png" alt="About"></a> <a href="contact.html"><img src="images/buttons/contact_btn.png" alt="Contact"></a> </div>

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Skrivet av FlorrpaN:

Kolla lite på hur man bättre använder "class"

<li><a href="#"><div class="navigering"></a></li>

Är bättre såhär:

<li class="navigering"><a href="#"> knappbild/text här </a></li>

Ett exempel på hur jag gör:

<div class="navigation"> <a href="index.html"><img src="images/buttons/home_btn.png" alt="Home"></a> <a href="portfolio.html"><img src="images/buttons/portfolio_btn.png" alt="Portfolio"></a> <a href="about.html"><img src="images/buttons/about_btn.png" alt="About"></a> <a href="contact.html"><img src="images/buttons/contact_btn.png" alt="Contact"></a> </div>

aha, okej. Blir det någon skillnad? Eller är det bara att strukturen ska se ut så?

Visa signatur
Permalänk
Medlem

Det är helt onödigt att sätta in DIVar i andra HTML taggar, classer fungerar på html taggar, som jag visade.

du kan t.ex länka in en class på <body> om du vill det, ex:

<body class="background"

Enklare struktur, smidigare på alla sätt.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti