X FOR HAN ARK VUR
» SAM INFO AKT BSK

HTML


Svar
JinkJinkSkrevet 09/02-04 01:24 
Her i ferien gør jeg et håbløst forsøg på at lære at lave hjemmesider.

Jeg har lært lidt om html og css, men langt fra alt(tror jeg da :)). Men hvordan kommer jeg videre, hvordan lærer jeg mere om det så jeg kan mestre det fuldt ud, eller bare lidt?

Og hvad med et "design program" skal man ikke også bruge det og hvilket skal man bruge?

Ja, som I ka... Se hele indlægget
100 emne(r).
« < 1 2

Svar
slk486slk486Skrevet 30/04-14 18:45 
Ja, konceptuelt strider det mod CSS :)

Top og bund er nemme, men i midten vil jeg også anbefale en table.
j/k
Nuclear DetergentNuclear Deter...Skrevet 30/05-14 11:14 
Jeg arbejder i øjeblikket på at få en portfolio/simpel webshop færdig i forbindelse med en fritidsaktivitet. Siden skal på en gang vække interesse, være dynamisk så den passer til de fleste formater, og være så let som mulig. Portfolion er udelukkende lavet i HTML/CSS med et enkelt javascript - ingen jquery. Dette har vist sig umuligt med webshoppen.

Det kunne være rart med noget feedback, eller simpelthen blot lidt test på andre konfigurationer, end de jeg selv har adgang til. Det håber jeg I vil give her på Playright.

Mouten Keramik
You mechs may have copper wiring to reroute your fear of pain, but I've got nerves of steelSpiller nu: Killer 7
millenniummillenniumSkrevet 18/06-14 12:59, rettet 18/06-14 13:23 
Så er den gal igen....

Jeg prøver at få en div med text til at fylde eksempelvis 100% (både vertikalt og horisontalt) inden for en anden div som har en fast px størrelse og lidt padding, men det virker ikke.

Hvis jeg ligger en div i roden og tilføjer width: 100%, så kører den jo bare ud til browserens ramme. Men inden for en anden div med fast størrelse, gør den ikke? why?

Her er klassen som omkranser elementet:

.mailframe {
background-color: #edeceb;
border: solid 3px #666666;
height: 430px;
padding: 0;
margin-left: auto;
margin-right: auto;
width: 460px;
}

Og her er så selve elementet (EDIT)

.modal {
display: table;
width: 100%;
height: 100%;
line-height: 2em;
font-size: 14px;
position: relative;
top: 0px;
left: 0px;
margin-top: 0px;
margin-left: 0px;
background-color: #bed0e8;
border:solid 2px #8aa8cf;
padding: 10px;
text-align: left;
The medium is the message.
dRxLdRxLSkrevet 18/06-14 13:07 
Bruger du CSS attributten "position"? Kunne være værd at kigge på.
SIMDSpiller nu: Pokémon Ultra Moon, Pokémon Omega Ruby, Pokémon HeartGold
DanerenDanerenSkrevet 18/06-14 13:20 
Hvad med:

.mailframe {
position: relative;
}

.button {
position: absolute;
top: 0;
left: 0;
}
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 18/06-14 13:21, rettet 18/06-14 13:23 
Fuck, det var den forkerte CSS klasse jeg skrev her..

Hvis jeg ændrer relative til absolute, så sprænger div'en rammerne og fylder hele browser vinduet.

Det er denne jeg prøver at fylde ud v og h:

.modal {
display: table;
width: 100%;
height: 100%;
line-height: 2em;
font-size: 14px;
position: relative;
top: 0px;
left: 0px;
margin-top: 0px;
margin-left: 0px;
background-color: #bed0e8;
border:solid 2px #8aa8cf;
padding: 10px;
text-align: left;
The medium is the message.
DanerenDanerenSkrevet 18/06-14 13:30 
Også hvis du giver wrapperen position: relative;?
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
dRxLdRxLSkrevet 18/06-14 13:38 
Position har flere mulige værdier end "relative" og "absolute".

http://www.w3schools.com/cssref/pr_class_position.asp
SIMDSpiller nu: Pokémon Ultra Moon, Pokémon Omega Ruby, Pokémon HeartGold
KTCKTCSkrevet 18/06-14 13:41 
Hvis jeg har forstået det korrekt, har du en div med klassen mailframe, som indeholder en anden div med klassen modal?

Hvis du fjerner "display: table" fra modal og tilføjer "box-sizing: border-box;", så fylder din modal-div hele din mailframe-div ud.
A small cog? Now that you mention it, I know a puzzle about an object that almost fits that description.
millenniummillenniumSkrevet 18/06-14 13:52 
Det virker nogenlunde. Der er visse syntaxer i CSS som jeg bare slet ikke har fattet endnu, her i blandt box-sizing. Men det kommer stille og roligt.
The medium is the message.
KTCKTCSkrevet 18/06-14 13:58 
Det er fordi den som udgangspunkt vil sætte størrelsen til 100% og så derefter tilføje padding. Det kan man så lave om på med box-sizing.
Vær dog opmærksom på, at ældre browsere ikke fatter dette.

Se kompatibilitetsskema her:

link
A small cog? Now that you mention it, I know a puzzle about an object that almost fits that description.
DanerenDanerenSkrevet 18/06-14 14:05 
Sådan her?

jsfiddle
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 18/06-14 15:24, rettet 18/06-14 15:26 
Har fået det til at virke som det skal :) Vi har heldigvis testere til at bekymre sig om kompabilitet. ;)
The medium is the message.
millenniummillenniumSkrevet 19/06-14 10:42, rettet 19/06-14 11:29 
Dagens nye udfordring:

Jeg er anvender oftere SVG som images, men har brug for en fallback PNG hvis det er IE8 eller derunder. Men jeg er ikke SÅ kompetent i anvendelsen af Modernizr og hvordan jeg skal placere/kalde scriptet, og hvordan jeg skal kalde PNG hvis browsereren ikke kan læse SVG.

Jeg Googler videre, men...

Nogen som har dagens ekspertice...? :)

Jeg har downloaded Modernizr .js filen og lagt den sammen med HTML filerne.
Jeg kalder scriptet i headeren: <script src="/modernizr.custom.05113.js" ></script>

Og så burde jeg kunne bruge nogle "no-svg" syntaxer, right?

EDIT: fandt ud af det. Virker med flg:
<svg width="178" height="46">
<image xlink:href="img/Logo_Pos.svg" src="img/Logo_Pos.png" width="178" height="46" />
</svg>
The medium is the message.
vyssenvyssenSkrevet 28/07-14 10:29 
Hej, jeg har en lidt skæv henvendelse, men kunne godt bruge lidt hjælp, ikke desto mindre.

Sagen er at jeg har skrevet mit speciale i word, men har fået at vide at min kildeliste ikke har det helt ønskede format. Jeg har brugt det indbyggede citationssystem i word, og er med et custom template med lidt modifikation kommet ret tæt på. Den fil ligger her:

https://www.dropbox.com/s/cn3v3ywp312ngyo/HarvardNicki.xsl

Jeg har ingen konkret erfaring med HTML, så jeg kan kun gennemskue lidt af, hvad, der foregår. Det er lykkedes mig at få samtlige forfattere vist i bibliografien uanset hvor mange de er (eller flyttet grænseværdien for maks antal viste forfattere langt op), ved at fusionere to andre templates, men kan ikke komme det sidste stykke. Jeg vil gerne have alle forfatternavne i min bibliografi til at stå med stort, og ikke andre ændringer. Er der nogen herinde, som kan hjælpe mig?
millenniummillenniumSkrevet 30/07-14 10:00, rettet 30/07-14 10:04 
Dagens HTML/CSS nødeknækker....

Jeg skal have vist et image i en rund cirkel, helst styret udelukkende med kode.

Så i HTML kalder jeg bare et almindelige <img> med en "portrait" class.

i CSS har jeg så stylet med følgende:

.portrait {
position: relative;
top: 60px;
left: -20px;
width: 180px;
height: 180px;
border: solid;
border-radius: 150px;
border-width: 0px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}

Det virker... næææsten. Eneste problem er at billedet er et 4:3 i højformat, mens den runde container har kvadratisk 180x180 proportion. Derfor mases billedet sammen i højden.

Nogen der har en quick fix til hvordan man bevarer billedets width/height proportioner...?
The medium is the message.
DanerenDanerenSkrevet 30/07-14 10:05 
height: auto; ?

Og så vil jeg anbefale at ændre dine border-radius-værdier til 50% i stedet for 150px :) Jeg håber at det kan bruges.
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 30/07-14 10:08 
Tak for den, men auto virker ikke helt. Så bliver circlen bare oval-formet i højden.

Problemet er at billedet skal kaldes i HTML, så jeg kan ikke lægge billedet som en background i CSS.

Egentlig prøver jeg at simulere en "cropping" med koden.
The medium is the message.
DanerenDanerenSkrevet 30/07-14 10:12 
Kan du lave din HTML sådan her:
<div class="portrait">
<img />
</div>

Og så lave bruge denne CSS:
.portrait {
position: relative;
top: 60px;
left: -20px;
width: 180px;
height: 180px;
border: solid;
border-width: 0px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
display: block;
overflow: hidden;
}

.portrait img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
}

Det burde fungere.
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 30/07-14 10:22 
Bloody nice, det virkede. Jeg måtte lige ændre til:

.portrait img {
position: absolute;
top: -18px;
left: 0;
width: 100%;
height: auto;
}

Så er det placeret perfectomundo.

Thanx!
The medium is the message.
DanerenDanerenSkrevet 30/07-14 10:22 
Perfekt! Det var så lidt.
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 30/07-14 12:34 
Overvejede ikke at lægge circlen i en div, men man lærer jo. :)
The medium is the message.
DanerenDanerenSkrevet 30/07-14 16:13 
Det er jo det :)
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 18/11-14 13:08 
Jeg har lidt random spørgsmål som relaterer til HTMLen.

Jeg er ved at designe en webapplikation hvorfra slutbrugeren tilgår nogle PDF-dokumenter. Når man åbner en PDF bruges normal en _blank, så det åbnes i Acrobat Reader i en ny browserfane, uanset hvilken browser de anvender.
Alternativt skal serveren som hoster PDF dokumenterne sættes, så det aktiverer en download fremfor åbnes.

Problemet er at jeg har brugertestet løsningen, og det er et gentagende problem at mindre erfarne brugere "kommer til" at lukke hele browseren, når de skal lukke fanen med PDF'en. IE kommer med en advarsel, men Chrome, eksempelvis, lukker bare hele lortet.

Løsningen er at forcere PDF dokumentet frem i et nyt browser-vindue, fremfor en ny fane, så slutbrugeren ikke kan lave en fejl, men hvordan er de? Er der et hack så links altid åbnes i nye browser-vinduer i stedet for browser-faner, som virker på alle browsere?

(Udgangspunktet er desktop, men iOS er med i problematikken)
The medium is the message.
SumezSumezSkrevet 18/11-14 15:05 
JavaScript metoden window.open() åbner vistnok altid i et nyt vindue? Men officielt er den rigtige løsning at brugeren selv vælger via sine klik eller browser-indstillinger om det skal åbne i et nyt vindue. Det er også derfor at target="_blank" ikke er valid HTML5.
Spis sundt og tro på dig selvSpiller nu: Gravity Circuit, Bonze Adventure
millenniummillenniumSkrevet 18/11-14 16:02, rettet 18/11-14 16:02 
Tjekkede også lige e-boks som har samme weakness. Deres dokumenter åbner altid i ny fane, så det er slutbrugerens browser-ekspertise der er gældende.

Tror jeg må teste lidt mere for at se hvor mange brugere bøffer i det.
The medium is the message.
dRxLdRxLSkrevet 26/11-14 08:42 
Hvad med at åbne pdf dokumenterne inde i en stor synlig fed iframe hvor du viser informationer om dokumentet og forskellige store tydelige funktionsknapper som "luk", "print" og "gem"?
SIMDSpiller nu: Pokémon Ultra Moon, Pokémon Omega Ruby, Pokémon HeartGold
KTCKTCSkrevet 26/11-14 10:49 
iframe og PDF er normalt en dårlig kombo, specielt i forhold til responsive layout, interne scrollbars o.s.v., og så behandler browsere PDF filer så forskelligt, at det er svært at få til at se pænt ud på forskellige enheder.
A small cog? Now that you mention it, I know a puzzle about an object that almost fits that description.
millenniummillenniumSkrevet 26/11-14 10:54, rettet 26/11-14 10:54 
Netop, man er mindst 50% i browserens varetægt og brugerens personlige set-up når der åbnes nye faner eller embeddes indhold. Svært at forcere intentionerne igennem, men det er vel heller ikke meningen i fremtiden.
The medium is the message.
dRxLdRxLSkrevet 26/11-14 22:12 
Hvad så med den anden mulighed som bla Gmail benytter sig af hvor de rasteriserer pdf'ernes sider på serveren on demand og viser/previewer dem som billeder?
SIMDSpiller nu: Pokémon Ultra Moon, Pokémon Omega Ruby, Pokémon HeartGold
millenniummillenniumSkrevet 15/01-15 12:38, rettet 15/01-15 12:50 
Dagens dilemma:

Jeg prøver at anvende en span class til at hente et ikon der ligger som background i CSS.

i HTML:

<span class="phone-icn"></span>

i CSS:

.phone-icn {
padding-left:0px;
background:url(".../images/icon_phone.png") no-repeat;
display: inline-block;
height: 10px;
width: 20px;
}

Problemet er at span kun virker med noget content imellem tags. Hvis der ikke er noget, så vises image ikke.

Hvis jeg prøver at sætte et punktum eller et HTML space mellem span tags, så vises billedet:

F.eks.: <span class="phone-icn">.</span>

Men dets position ligger ovenpå tegnet eller mellemrummet. Det skulle egentlig flugte med linjen.

Nogen der har et hurtigt fix til hvordan jeg aligner billedet med linjen (vertikalt centreret)? (Ja, jeg har været på Stack Overflow)

Edit: Eller jeg anvender span rundt omkring teksten som skal have ikonet:
<span class="phone-icn">Tlf. +45 xxxx xxxx</span>

Men billedet ligger stadig for højt ift teksten.
The medium is the message.
DanerenDanerenSkrevet 15/01-15 13:04, rettet 15/01-15 13:14 
Prøv det her:
<span class="phone-icn"></span>Tlf. +45 xxxx xxxx

.phone-icn {
padding-left:0px;
background:url(".../images/icon_phone.png") no-repeat;
display: inline-block;
height: 10px;
width: 20px;
vertical-align: middle;
}

Jeg har ikke testet det, men tænker at det burde virke...

EDIT: Ellers kan du altid give den:
position: relative;
top: -2px; /* Eller hvor meget der nu skal til */
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 15/01-15 13:15 
Tak men stop. Jeg fandt ud af det. Den arvede en line-height på 1.6, så hvis jeg bare indsætter line-height:1, står den på linje med teksten.

Sådan er det med CSS :)
The medium is the message.
dRxLdRxLSkrevet 23/02-15 11:25, rettet 23/02-15 11:27 
Sjov lille ting:
Jeg har i forbindelse med noget debugging af et rutenet måttet konstatere at grænsen for hvor lange URL strenge man kan smide efter en browser er under 8K ;)

eks:
http://t.co/XF32qk1S8M
SIMDSpiller nu: Pokémon Ultra Moon, Pokémon Omega Ruby, Pokémon HeartGold
millenniummillenniumSkrevet 25/02-15 10:13, rettet 25/02-15 10:17 
Er det mig, eller....

Hvorfor virker disse iOS touch icons ikke...?

<link rel="apple-touch-icon-precomposed" href=".../icon_57x57.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href=".../icon_72x72.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href=".../icon_114x114.png"/>

Tre forskellige til hhv iPhone, iPad og retina. Men efter ændringerne er published, anvender hjemmeskærm-ikonet stadig det grimme thumb af forsiden.

EDIT: aaahaaa, PNG filen skal ligge i roden.
The medium is the message.
millenniummillenniumSkrevet 18/01-16 14:31 
Lidt CSS-nørd humor: http://digitalsynopsis.com/design/34-css-puns-web-design-funny-jokes/

#chucknorris {
color: #BADA55;
}
The medium is the message.
OdinOdinSkrevet 18/01-16 14:57, rettet 18/01-16 15:01 
Heheheh. Det' go' værkstedshumor.

#europe .country {border: none;} bærer dog præg af at være forældet allerede. Suk.
millenniummillenniumSkrevet 10/02-16 15:14 
Wild shot, men... Hvis man har en statisk HTML fil med lidt tilhørende .js filer, findes der så en online dev service, hvor man nemt kan uploade det og teste det fra en webserver?? (Uden at selv at bruge egen webserver).
The medium is the message.
SumezSumezSkrevet 10/02-16 15:26 
Hvis det er statiske HTML og JS filer, hvad er så formålet med en server?
Spis sundt og tro på dig selvSpiller nu: Gravity Circuit, Bonze Adventure
millenniummillenniumSkrevet 10/02-16 16:36 
Nemmere delning og test performance på mobile device med 4G. :)
The medium is the message.
millenniummillenniumSkrevet 16/02-16 14:31 
Er der nogen som (ligesom mig) roder med Adobe Edge Animate....?

På den ene side: Smart program, sjovt at arbejde med, har stort potentiale.

På den anden side: Hold kæft hvor kunne jeg godt bruge noget sparring, for der er dælme børnesygdomme som jeg gerne ville udveksle tips og erfaringer med.

Anyone? Anyone....?
The medium is the message.
OdinOdinSkrevet 16/02-16 15:06, rettet 16/02-16 15:07 
Jeg kan desværre ikke rigtig hjælpe, da jeg (heldigvis, set i bagklogskabens lys) ikke nåede at komme igang med Edge Animate før produktet blev nedlagt sammen med resten af Edge-serien. De børnesygdomme som du døjer med nu kommer værktøjet til at tage med sig i graven, idet der blev slukket for respiratoren sidste år.
Jeg vil i stedet anbefale dig at droppe Edge Animate og rykke over til Adobe Animate CC, som er animationsflagskibet nu. Det er essentielt set det langt mere solide Flash Professional under nyt navn.
millenniummillenniumSkrevet 16/02-16 15:23 
Takker, jeg bevæger mig hastigt videre til Animate CC, inden jeg river resten af håret ud :-D
The medium is the message.
millenniummillenniumSkrevet 15/06-16 12:35 
Lidt af et far shot, men... nogen der har erfaringer med at lægge Animate CC publiceringer ind i Umbraco CMS?

Synes ikke Umbraco accepterer hvad jeg gør.
The medium is the message.
DanerenDanerenSkrevet 17/06-16 09:15 
Du må næsten få nogle fejlbeskeder i konsollen?

Jeg forestiller mig at det er javascript issues. Jeg ved ikke hvilket javascriptbibliotek Umbraco bruger (jQuery, MooTools, andet)?
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 17/06-16 09:45 
Jeg er også lige blevet introduceret for Umbraco. Fandt bare en sektion hvor det var muligt at tilføje specifik side-scripts i header, body eller footer.

Tænkte det kunne bruges, hvis man skal have noget Animate CC snavs ind på siden. :)

Trial and error it is, then.
The medium is the message.
DanerenDanerenSkrevet 17/06-16 12:07 
Har du et link til siden eller ligger det lokalt?
Spiller nu: Super Mario 3D Land, Kabuki: Quantum Fighter
millenniummillenniumSkrevet 17/06-16 20:25 
Staging miljø, sorry. :)
The medium is the message.
millenniummillenniumSkrevet 21/11-17 13:30, rettet 21/11-17 13:31 
Ikke heeeelt HTML, men nogen som herinde som har sort bælte i Axure prototype?

Det handler om brug af variabler. :D
The medium is the message.
dRxLdRxLSkrevet 03/05-21 13:14 
Jeg har lavet en sjov lille ting til min kommende firma-hjemmeside.

Der er 3 forskellige renderings-effekter for kragebilledet.

Link...
SIMDSpiller nu: Pokémon Ultra Moon, Pokémon Omega Ruby, Pokémon HeartGold
100 emne(r).
« < 1 2

Login for at besvare
Profilnavn
Kodeord
Husk mig