|
|
 | CSS til billed tekst
Fra :  molokyle  | Vist : 537 gange
600 point
Dato : 05-10-03 11:28 |
|
Kan jeg i CSS lave en billedtekst, som den gule boks med sort skrift, der fremkommer ved brug af ALT parameteren i <IMG> ? Hvordan? Jeg vil gerne have 'boksen' til at fremkomme under billedet i samme bredde som dette, ved mouseover. Den skal selvfølgelig 'forsvinde' igen, når billedet mister fokus.
Jeg er ikke interesseret i en javascript løsning.
</MOLOKYLE>
| |
 | Kommentar
Fra : rfh |
Dato : 05-10-03 11:42 |
| | |
| Kommentar
Fra : molokyle |
Dato : 05-10-03 11:59 |
| | |
| Kommentar
Fra : rfh |
Dato : 05-10-03 12:10 |
|
Du kan f.eks. prøve under 'Selectors'
rfh
| |
| Kommentar
Fra : molokyle |
Dato : 05-10-03 12:19 |
|
Selectors er om ATTRIBUTE ikke ALTERNATE. Alternate CSS er også noget andet end ALT attributten i <IMG> . Det er alternative CSS'er i <LINK> tag'et.
Er der nogen der evt. kan gi' et specifikt link? ..eller et eksempel?
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 05-10-03 12:24 |
|
Jeg havde tænkt mig det skulle virke som øverste højre menu på : http://webdesign101.dk
..men med billeder; ikke med brød-tekst.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 21-10-03 20:44 |
| | |
| Kommentar
Fra : molokyle |
Dato : 21-10-03 21:54 |
| | |
|
du kan også bruge det jeg bruger. En stump javascript som kan bruges til lige hvad du vil. Jeg selv bruger den til tekst-links. Kan tilpasses som du ønsker. Hent den på www.greenholt.dk/js/alttxt.js der er brugsanvisning i den 
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 13:31 |
|
Nocturnal_Mind -> Jeg har kikket på dit script, men det er alt for omstændigt og ISÆR vedligeholdelses tungt. Tænk på; jeg har måske 100 HTML sider med billeder, der skal opdateres løbende. Derfor fortrækker jeg CSS til den 'slags'.
</MOLOKYLE>
| |
|
100 html sider? har du tænkt på noget asp eller php og få siderne automatisk genereret? meget lettere og hurtigere atlave ændringer på design osv 
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 14:16 |
|
Nocturnal_Mind -> Nix bix; PHP, ASP, PERL osv.. er fin til dynamisk indhold mht. billeder, tekst links osv. Når det gælder layout; altså farver, font, dimensionerering osv. må man ty til CSS. Sorry... jeg havde tænkt.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 14:21 |
|
Altså HTML og hvad dertil relateres handler om indhold, CSS om præsentation.
</MOLOKYLE>
| |
|
og asp/php forhindrer dig i at bruge html/js/css på hvilken måde?? var godt nok overbevist om at man "blandede" tingene for at få et acceptabelt slutresultat...
nåmen, der hvor jeg vil hen er, at det mest hensigtmæssige bl.a. mht. videre vedligholdelse er, at have så få sider som muligt. Eksempelvis kunne du have en enkelt side med al din layout, som så dynamisk hentede dine billeder. Men dine 100 html-sider har måske alle forskelligt layout?
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 14:43 |
|
Nocturnal_Mind -> Du misforstår. I CSS kan jeg f.eks. på en enkel måde via et externt stylesheet styre, hvordan alle <DIV> og <P> tags skal opføre sig. Kan du det i JavaScript? Kan du i PHP eller ASP? Næh.. vel.
Selvfølgelig ville jeg dynamisk udskifte billedet på en side som response på et bruger input via ASP eller lign. Men hvor henne og hvordan, relativt pladseret i forhold til andre elementer på siden, ville jeg lade styre af CSS.
DERFOR !!!
Takker for dit initiativ, men at vise en ALT tekst til et billede, pladsere og positionere denne tekst, skal altså laves i CSS og jeg VED det kan lade sig gøre. Men hvordan...?
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 14:56 |
|
Min drøm er at kunne skrive :
Kode
<img class="YellowBox" scr="BILLEDE.GIF" border="0" alt=" Denne tekst står i en kasse nedenunder og med samme bredde, som dette billede. Automatisk wordwrap og vises kun ved mouseover."> |
#YellowBox er så en CSS klasse, der kan inkluderes på alle sider.
</MOLOKYLE>
| |
|
hmm. mener nu ikke jeg misforstår - foreslår nu bare asp/php som alternativ til alle de mange html-sider. hvad html, js og css du så propper i asp/php-filen er jo helt op til dig selv.
men bortset fra det, så mener jeg netop at alttxt.js giver dig et hint til hvordan du gør vha. css-layers.. iøvrigt kan jeg ikke se hvor svært det kan være at bruge den .js-fil. Der er iøvrigt også automatisk wordwrap, og hvis der er flere billeder på den enkelt html-side med forskellig bredde, kan dette rettes til vha. js.
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 16:04 |
|
Jamen, det jo ikke ret automatisk længere, hvis der skal rettes i *.js hver gang nye billeder med nye formater lægges ind?
Som jeg ser det, er der alt for stor chance for, den meget gennerelle kode i scriptet vil komme i konflikt med andre scripts på siderne. Hele NS delen er iøvrigt for mit vedkommende overflødig, da jeg ikke understøtter denne browser længere.
Jeg sætter stor pris på du vil hjælpe Nocturnal_Mind, men :
Læs lige mit spørgsmål som det er formuleret; én gang til, så vil du forstå hvorfor det er 600 point værd.
Citat
Jeg er ikke interesseret i en javascript løsning. |
</MOLOKYLE>
| |
|
der skal da heller ikke rettes i js-filen hver gang. du ændre blot dynamisk bredden af layeren ud fra billedets dimensioner. dermed ender side faktisk også med at blive generel.
men ok, jeg har kommet med mit bud - længere er den ikke
| |
| Kommentar
Fra : molokyle |
Dato : 28-10-03 16:34 |
|
Helt iorden. For en sikkerhedsnåls skyld, skylder jeg at fortælle, det skal bruges på et site der ikke understøtter CGI scripts. Derfor de mange sider. Altså nul ASP, PERL osv. Browseren skal lave arbejdet ikke serveren og da sitet heller ikke understøtter at vinduer åbnes af JavaScript, samt visse andre obscure ting, er det : No Option...
Jeg har ikke mere tid idag, men vender frygtelig og med stor nysgerrighed tilbage 
</MOLOKYLE>
| |
 | Kommentar
Fra : tedd |
Dato : 28-10-03 17:06 |
| | |
 | Kommentar
Fra : Eyvind |
Dato : 28-10-03 19:53 |
| | |
| Kommentar
Fra : molokyle |
Dato : 08-12-03 13:27 |
|
Hmm.. Jeg blev altså ikke meget klogere af denne forklaring..
Citat
Jeg kan godt se, at det er meget let at misforstå den forklaring jeg kommer
med i detet eksempel.
Der er ikke rigtig sammenhæng mellem HTML-koden og CSS-koden i artiklen. Den
HTML-kode, du skal bruge, er i virkeligheden kildekoden til den menu, der
rent faktisk er på siden, og som du kan klippe fra Vis kildekode i din
browser.
Herudover skal du jo indsætte CSS-koden i head-delen af dit dokument. Du kan
ikke nøjes med at linke til en fil, der hedder eksempel.css (eller
EKSEMPEL.css - det er ikke det samme, ved du godt?), medmindre du rent
faktisk har en css-fil med det navn i samme folder som din øveside.
Så det du skal gøre er:
1. Opret en html-side
2. Klip koden til menuen på min eksempelside
3. Sæt denne kode ind på din øveside
4. Klip css-koden fra min eksempelside
5. Sæt css-koden ind i en style-markør i head-delen af dit dokument.
Så skulle det virke.
Men jeg må sige, dette eksempel kræver nogen indsigt i stylesheets og html.
Har du læst min bog, Webdesign 101 - illustreret håndbog? Der er alle de
grundlæggende ting forklaret.
Med venlig hilsen
Jørgen Farum Jensen
www.webdesign101.dk
> -----Oprindelig meddelelse-----
> Fra: Henrik Mortensen [mailto:Molo@lite.dk]
> Sendt: 4. december 2003 13:47
> Til: webmaster@webdesign101.dk
> Emne: Problemer med eksempel
>
>
> Kære Webmaster.
>
> Med stor fornøjelse har jeg igennem et stykke tid brugt de
> udmærkede oplysninger, jeg har kunne finde på Webdesign101.
>
> Imidlertid har jeg problemer med at få eksemplet på :
> http://webdesign101.dk/css/eksempler/eksempel4.php
>
> ..til at virke?
>
> Jeg koder en blank html side og indsætter eksemplets html kode.
> I <head> inkluderer jeg CSS scriptet : <link REL="stylesheet"
> TYPE="text/css" href="EKSEMPEL.css">
>
> .. og alligevel får jeg bare et link med hele <span> teksten ???
>
> Jeg tænkte på om en sådan gul textbox også kan laves til billeder?
> ..altså som alternativ til ALT argumentet i <img>?
>
> Mvh Henrik Mortensen </MOLOKYLE>
> |
Citat
> Jeg har ikke læst din bog ...endnu ;-)
Så synes jeg du sku´ ta´ og gøre det. Fejlen er, at du ikke har været
opmærksom på, at display-egenskaben for span-markøren normalt skal være
none. Sådan er den også sat i stylesheet´et:
#links a span {
display: none;
}
Det, du har her, er en såkaldt kontekstuel selektor, der sørger for at
skjule alle span-elementer, der er inde i en a-markør, der er inde i et
element, der har en id som er links.
Kun sådanne span-elementer skjules. Sandsynsligvis har man en mængde andre
span-elementer på websiderne, og de skulle jo gerne kunne ses. Her udpeger
vi lige præcis hvilke det er, der normalt skal skjules.
Visningen sker nu når linket er i hover-tilstand, via formreglen
#links a:hover span {
display: block;
...
}
Med venlig hilsen
Jørgen Farum Jensen
www.webdesign101.dk
> -----Oprindelig meddelelse-----
> Fra: Henrik Mortensen [mailto:Molo@lite.dk]
> Sendt: 5. december 2003 15:03
> Til: Jørgen Farum Jensen
> Emne: Popup uden javascript
>
>
> Kære Jørgen.
>
> Tak for din hurtige respons mht. problemer med :
> http://webdesign101.dk/css/eksempler/eksempel4.php
>
> Jeg kan dog stadig ikke få det til at virke?
>
> Derfor tillader jeg mig at sende dig to eksempler på hvordan jeg,
> ifølge din side, forstår at bruge CSS scriptet.
>
> De tre filer er :
>
> default1.html = HTML m/ internt stylesheet
>
> default.html = HTML m/ externt stylesheet
> EKSEMPEL.css = CSS tekstfil
>
> Jeg har ikke læst din bog ...endnu ;-)
>
> Mvh. Henrik Mortensen |
..........Er der nogen der har mod på at lave et kørende eksempel ???
</MOLOKYLE>
| |
 | Accepteret svar
Fra : natmaden | 
Modtaget 600 point
Dato : 09-12-03 06:15 |
|
ØH!
Lidt lånt/ændret/klippet/klisteret.
Jeg kommer nok selv til at ændre/klippe/klister i den næste tid, da det jo er
et spændene emne, som jeg tror, jeg måske vil parre med PHP.
Designet er jo en smagssag, så det stopper jeg her,
da jeg tænker at du selv kan regne videre herfra
På http://molokyle.net2620.dk/cssmenu.html findes nedenstående kode, i funktion.
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dynamisk menu uden JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css" media="screen">
<!--
#links {
position: relative;
top: 0;
left: 0;
width: 180px;
height: 700px;
font-size: 12px;
font-family: verdana, arial, sans-serif;
z-index: 100;
border-top:1px solid black;
}
#links a {
display: block;
text-align: left;
font-weight: bold;
font-size: 1em;
padding: 5px 10px;
margin: 0;
border-width: 0 5px 1px 1px;
border-style:solid;
border-color:black;
text-decoration: none;
color: #1a0099;
background: #ffe;
}
#links a:hover {
color: #c00;
background: #ffe;
border-right: 5px double #369;
}
#links a:visited {
color: purple;
background: #ffe;
}
#links a span {
display: none;
}
#links a:hover span {
display: block;
position: absolute;
top: 102px;
left: 0;
width: 180px;
border:1px solid black;
padding: 5px;
margin: 0;
z-index: 100;
color: #000;
background: #ffe;
font-weight:normal;
font-size: 10px;
font-family: verdana, arial, sans-serif;
}
-->
</style>
</head>
<body>
<div id="links">
<a href="http://kandu.dk">KANDU.DK<span><b>kandu.dk !</b>
<br />Et sted der til tider,
<br />er lidt langsomt.
<br />men det er værd at vente på.</span></a>
<a href="http://k4.dk">K4.DK<span><b>k4.dk !</b>
<br />Yder domaine-service.
<br />Her kan du (gratis),
<br />oprette et domaine,
<br />som peger til din hjemmeside</span></a>
<a href="http://www.kandu.dk/dk/userview.asp?uid=81351">MOLOKYLE<span>
<center>Her finder du lidt om MOLOKYLE<img src="smiley.gif" />
</center></span></a>
<a href="http://webdesign101.dk/css/eksempler/eksempel4.php">webdesign101.dk<span>
<b>Det her css-scriptet kom fra !</b></span></a>
</div>
</body>
</html> |
Selv en natmad kan blive træt  , så dybt godnat herfra !
Mvh. Natmaden
| |
| Godkendelse af svar
Fra : molokyle |
Dato : 09-12-03 10:43 |
|
SÅDAN natmaden
Mærkeligt jeg ikke selv kom på at prøve med id i <div>
Jeg synes nu heller ikke det fremgik særlig klart af eksemplet, hvad man skulle gøre for at få skidtet til at virke. Hmm... må nok bide i det sure æble og boge den lidt. Jeg tror sgu jeg forærer mig selv hans værk i julegave.
Jeg fik ikke helt svar på mit spørgsmål, men nu har jeg da lidt at gå videre med. Jeg har forslået kandu.dk at oprette en kategori for CSS. Når de nu har et CSS kursus her på sitet, er det lidt underligt man ikke kan stille spørgsmål i emnet?
Nå nu ser vi !!!
Endnu engang : Tusind tak for din indsats natmaden.
</MOLOKYLE>
| |
| Kommentar
Fra : natmaden |
Dato : 09-12-03 16:35 |
|
Hej og tak 
Jeg måtte lige prøve igen.
http://molokyle.net2620.dk/cssmenu2.html
Koden kan du jo se på siden.(vis kilde).
PS. den er ikke fejlfri. rammen er skæv, efter at den har været trykket på,
skyldes sikkert at billederne ikke er lige store, og at de er forskudte.
Jeg er nu osse til det håndlavede, men finder stor glæde ved det gratis pgm.
html-kit og alle dets hjælpefunktioner og plugins http://www.chami.com/html-kit .
Citat
Kærlighed er som at stå på ski.
Det sværeste er at stoppe. ;-) |
God 
Natmaden.
| |
| Kommentar
Fra : molokyle |
Dato : 09-12-03 16:55 |
| | |
| Kommentar
Fra : natmaden |
Dato : 09-12-03 21:20 |
|
Ja-Ja nogen har vel brug for det, men nok ikke lige mig
Hvis det var det du mente !
Faverne er da noget jeg vælger efter dagens humør.
Men tro mig, efter de 44 kan det være svært at huske den sproglige syntax.
Handmade is best. Whisper in the ear, do the rest.
On error Return Natmaden.
| |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|