Forum Mjukvara Programmering och digitalt skapande Tråd

Underlätta när man skapar navigerings iconer?

1
Skriv svar
Permalänk
Medlem
●

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

How to program

Redigera
Citera flera Citera
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]

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●

Någon som vet varför?

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Kebabhyvlarn:

Någon som vet varför?

Gå till inlägget

Du avslutar aldrig <div>.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Dai the Flu:

Du avslutar aldrig <div>.

Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Min Hemsida

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

här har du en exempelbild jag satt ihop.

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

Visa signatur

Min Hemsida

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

Redigera
Citera flera Citera
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.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av FlorrpaN:

här har du en exempelbild jag satt ihop.

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

Gå till inlägget

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.

Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Min Hemsida

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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>
Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Min Hemsida

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara