HTML/CSS knap

Tags:    html css

Jeg er noget grøn inden for hele emnet, så det kan godt være mit spørgsmål er helt i vejret.

Davs, jeg står og skal have samlet en knap til en kommende hjemmeside, problemet er, at jeg har knappen - Lad os kalde den "button.png" - og så har jeg teksten ved siden af - Lad os kalde teksten <p>Index</p> - Hvordan kombinere jeg de to, så teksten ligger øverst?

Hvad har jeg prøvet?
Jeg anvendte divs, og lavede først <div class="text><p>...</p></div> derefter <div class="button"><img src="button.png"></div> Herefter hoppede jeg op i <head> og fiksede de to divs til at ligge oven på hinanden. Altså:

<style>
.text{
position: absolute;

}
.button{
position: absolute;
}
</style>

Dette resulterede i, at knappen lå oven på teksten, og derved skjulte teksten.
Er der en måde at sætte teksten øverst?

Hvis dette ikke kan lade sig gøre i html og css, vil jeg gerne have en forklarring i et andet sprog, gerne ASP.Net. Mange tak for forhånd.

P.S.
Jeg kunne ikke finde en guide til "point-systemet" så jeg valgte at give den 100 point, som de fleste andre tråde. Går ud fra man skal uddele de såkaldte points til de/det bedste svar.



10 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 7 karma
Sorter efter stemmer Sorter efter dato
Du kan evt prøve at gøre det som bruges her:

http://www.codingforums.com/archive/index.php/t-9922.html

Fold kodeboks ind/udKode 


Denne metode kræver at man bruger javascripts, det vil jeg helst undlade.
Jeg ved ingenting om javascript.


Der er intet javascript i det. Det er (inline) css

Men det virker ikke :p.

Well. Du kan løse problemet med den følgende style (ingen JavaScript):
Fold kodeboks ind/udKode 

Button.png skal du selvfølgelig ændre til stien til dit billede. Height og width skal have samme værdi som højden og bredden på dit billede. Derefter skal du justere padding så teksten kommer til at stå rigtigt. Dette kunne f.eks. se sådan ud:
Fold kodeboks ind/udKode 

Og når du så skal lave knappen så gør du selvfølgelig bare sådan:
Fold kodeboks ind/udKode 


Og til om du skal lære JavaScript. Det afhænger meget af hvilke type hjemmesider, du gerne vil lave. Normale standart hjemmesider kan SAGTENS laves uden JavaScript. Men hvis du gerne vil lave dynamiske er der ingen vej udenom JavaScript.



Indlæg senest redigeret d. 08.06.2009 22:07 af Bruger #10113
Christian så har jeg et råd til dig: LÆR DET! :)

Er ikke den bedste programør, jeg har også lidt kendskab med javascript, men jeg har fundet ud af at javascript er MEGET nyttigt! Du kan lære noget vidre fra det eksempel vis dhtml:
Fold kodeboks ind/udKode 


Prøv at gemme dette som normalt html dokument :) Og se hvad der sker ! :)



Du kan evt prøve at gøre det som bruges her:

http://www.codingforums.com/archive/index.php/t-9922.html

Fold kodeboks ind/udKode 


Denne metode kræver at man bruger javascripts, det vil jeg helst undlade.
Jeg ved ingenting om javascript.


Der er intet javascript i det. Det er (inline) css



Du kan evt prøve at gøre det som bruges her:

http://www.codingforums.com/archive/index.php/t-9922.html

Fold kodeboks ind/udKode 




Indlæg senest redigeret d. 08.06.2009 19:57 af Bruger #6559
Du kan evt prøve at gøre det som bruges her:

http://www.codingforums.com/archive/index.php/t-9922.html

Fold kodeboks ind/udKode 


Denne metode kræver at man bruger javascripts, det vil jeg helst undlade.
Jeg ved ingenting om javascript.



Du kan evt prøve at gøre det som bruges her:

http://www.codingforums.com/archive/index.php/t-9922.html

Fold kodeboks ind/udKode 


Denne metode kræver at man bruger javascripts, det vil jeg helst undlade.
Jeg ved ingenting om javascript.


Der er intet javascript i det. Det er (inline) css


Jeg burde have forklaret mig bedre: Koden fra linket giver mig den ønsket effekt, men for at give knappen et link skal jeg bruge et javascript som beskrevet i tråden.

Koden nedenunder laver en knap med et link der virker, er der en der kan forklare hvordan koden virker/er sat op? Altså forklare denne bruf af <form>.

<center>
<form method="link" action="page1.htm">
<input type="submit" value="Clickable Button">
</form></center>

Også: Kan man tilføje et baggrundsbillede?



Du kan evt prøve at gøre det som bruges her:

http://www.codingforums.com/archive/index.php/t-9922.html

Fold kodeboks ind/udKode 


Denne metode kræver at man bruger javascripts, det vil jeg helst undlade.
Jeg ved ingenting om javascript.


Der er intet javascript i det. Det er (inline) css

Men det virker ikke :p.

Well. Du kan løse problemet med den følgende style (ingen JavaScript):
Fold kodeboks ind/udKode 

Button.png skal du selvfølgelig ændre til stien til dit billede. Height og width skal have samme værdi som højden og bredden på dit billede. Derefter skal du justere padding så teksten kommer til at stå rigtigt. Dette kunne f.eks. se sådan ud:
Fold kodeboks ind/udKode 

Og når du så skal lave knappen så gør du selvfølgelig bare sådan:
Fold kodeboks ind/udKode 


Og til om du skal lære JavaScript. Det afhænger meget af hvilke type hjemmesider, du gerne vil lave. Normale standart hjemmesider kan SAGTENS laves uden JavaScript. Men hvis du gerne vil lave dynamiske er der ingen vej udenom JavaScript.


Det var alt jeg havde brug for, tak skal du have! Jeg må se lidt på javascript så, vil gerne være så godt rustet til d. 3 august hvor jeg starter web-integrator uddannelsen.
Der hvor jeg tager uddannelsen underviser de i ASP.NET med C#.




Det var alt jeg havde brug for, tak skal du have! Jeg må se lidt på javascript så, vil gerne være så godt rustet til d. 3 august hvor jeg starter web-integrator uddannelsen.
Der hvor jeg tager uddannelsen underviser de i ASP.NET med C#.

Det var så lidt. Hvis du gerne vil læse JavaScript kan jeg varmt anbefale denne tutorial http://www.w3schools.com/JS/default.asp. Personligt syntes jeg at JavaScript er et fantastisk sprog. Men så igen, hvis du bare skal lave basis hjemmesider så er de altså langt fra nødvendigt.




Det var alt jeg havde brug for, tak skal du have! Jeg må se lidt på javascript så, vil gerne være så godt rustet til d. 3 august hvor jeg starter web-integrator uddannelsen.
Der hvor jeg tager uddannelsen underviser de i ASP.NET med C#.

Det var så lidt. Hvis du gerne vil læse JavaScript kan jeg varmt anbefale denne tutorial http://www.w3schools.com/JS/default.asp. Personligt syntes jeg at JavaScript er et fantastisk sprog. Men så igen, hvis du bare skal lave basis hjemmesider så er de altså langt fra nødvendigt.


Allerede nu har jeg en aftale med den lokale boghandel, som gerne vil have en hjemmeside med en smule nethandel inkluderet, så jeg kan ikke komme udenom det dynamiske.
Tak for linket.



http://www.w3schools.com/tags/tag_button.asp

Brug den til design af knapper, den submitter form ved klik.

/J



t