KompoZer / Nvu » Transparent baggrund med tekst

fredder
 

Transparent baggrund med tekst

Indlægaf fredder » fre 8. mar 2013 13:44

Hej,

jeg er helt ny i det her. Jeg har købt og læst Kim Ludvigsens hæfte, og vil nu selv lidt i gang men er selvfølgelig løbet ind i et par problemer.

1)
Først og fremmest vil jeg gerne lave en boks med tekst lig "indholdsboksen" fra hæftet. Den skal dog ligge ovenpå et baggrundsbillede, hvorfor jeg gerne vil lave en tranparent hvid baggrund til teksten, så man kan læse den. Når jeg i CSS-stilen vælger transparent baggrund til "Indhold" bliver teksten imidlertid også transparent, hvilket jo ikke er så hensigtsmæssigt. Hvad kan jeg gøre her?

2)
Derudover har jeg lidt problemer med placeringen af boksene. Jeg ønsker et 250pxX200px logo i højre hjørne - herunder en menu i samme bredde med links og til højre for disse en indholdsboks med tekst. For at få menuen på plads har jeg imidlertid måttet skrive -250px som ventremargin, hvilket ikke lige giver mening for mig.

3) Derudover opfører indholdsboksen sig lidt underligt for mig. Hvis jeg vælger en top-margin på den (for at få den ned i højde med logoet, som har en 5px margin i top), rykkes både logo og menu tilsvarende ned fra toppen.

Er det forståeligt, eller skal jeg finde billeder?

Venlig hilsen
Kristian

Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.56 Safari/537.17

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » fre 8. mar 2013 13:54

Dine beskrivelser er meget fine, men for at komme med løsningsforslag vil det være nødvendigt at se, hvad du har lavet. Har du mulighed for at lægge en prøveside ud på nettet?

Hvis du lægger en prøveside ud, kan vi dels se, hvad du har lavet, så skærmbilleder ikke er nødvendige, dels kan vi gå ind i sidens kildekode og ud fra den give dig løsninger på de forskellige problemer.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » lør 9. mar 2013 09:41

Tak for svaret.

Ok - jeg har ikke et domæne endnu, men mon ikke det kan lade sig gøre gennem Dropbox?

http://dl.dropbox.com/u/4824573/KompoZer/index.html

Funger det for dig?

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » lør 9. mar 2013 11:03

Overraskende nok, så virker det, det havde jeg ikke troet. Rart at vide til en anden gang.

Hvid er ikke transparant ;-)
Angiv farven hvid som baggrund, så bør det problem blive løst. Forklar lidt nærmere, hvis jeg har misforstået, hvad du vil.

Med hensyn til placeringen af menuen. Problemet er, at menuen placeres under indhold, og så skal du bruge et negativt tal for at rykke den til venstre. Det undgår du, hvis du pakker logo og menu ind i en samleboks.

Du får her en vejledning til at rette op på problemet, lad dig ikke afskrække af, at jeg angiver en metode med kildekode. Du skal bare gøre som beskrevet, men gem lige en backup af siden og css-filen for en sikkerheds skyld.

Åbn siden i KompoZer, klik på fanen Kildekodevisning og find koden:
<div class="logo">

Lige før den, indsætter du:
<div class="venstrespalte">

Rul ned og find denne kode:
<li><a href="contact.html">How to contact whatIwoulddo</a></li>
</ul>
</div>

Lige efter den indsætter du:
</div>

Nu har du fået pakket logoet og menuen og ind i en boks, der holder dem samlet. Gå tilbage til almindelig visning. Du kan endnu ikke se nogen forskel.

Åbn CSS-editoren, og bliv ikke forvirret over, at det måske kommer til at se værre ud, inden du er helt færdig.

Klik på stilen indhold i oversigten over stile, og klik på fanen Generelt (tror jeg den hedder, det er første fane) lav de 260px i nedenstående linje om til den ønskede afstand til logo og menuen, du skal sikkert bruge 10px, altså fra:
margin-left: 260px;
til
margin-left: 10px;
Og indsæt en ny linje:
float:left;

Klik på stilen menu, og lav:
margin-left: -250px;
om til:
margin-left: 5px;

Opret en ny stil og kald den venstrespalte, klik på den nye stil og indsæt følgende i vinduet til højre:
float:left;
width:255px;

De 255 er de 5px du har i afstand til venstre + bredden på spalten.
Klik på OK, og nu skulle det gerne virke.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » lør 9. mar 2013 18:15

Hej igen - jeg skrev et svar, men strømmen gik (jeg bor på Zanzibar!), og nu kan KompoZer ikke læse css-filen korrekt. I css-editoren står, at der kun er tre regler. Ved du hvad, der kan være galt?

Ellers var mit svar:

Placeringen er helt perfekt. Tusind tak for hjælpen.
Er det muligt at indsætte klassen "venstrespalte" rundt om logo og menu gennem css-menuen, eller er man nødt til at gå source-vejen? Det kan jeg huske, du også gjorde i øvelsen i hæftet.

Med hensyn til indholdfeltet, så har jeg sat baggrunden som hvid, og jeg har ikke sat flueben i transparent. Jeg vil derimod gøre den halvt gennemsigtig (opacity), for at billedet stadig skinner igennem, men at baggrunden ligesom er lidt "mælket", så man nemmere kan læse teksten. Problemet er dog, at når jeg skruer ned for opaciteten så bliver teksten også gennemsigtig, hvilket jo ikke er hensigtsmæssigt. Den skal gerne stå helt klar og sort.

Og så et lille ekstraspørgsmål - hvis jeg nu finder ud af, at jeg vil have endnu et element - fx. en kontaktbjælke i bunden - hvordan opretter jeg så den? Før gjorde jeg som i hæftet og brugte "generic container" på de markerede ord.

Ang. dropbox, så var jeg egentlig også lidt overrasket. Man skal selvfølgelig bare sørge for at lægge css-filen og billederne i public-mappen også.
http://dl.dropbox.com/u/4824573/KompoZer/index.html

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » lør 9. mar 2013 20:23

Med hensyn til CSS-filen, så blev den muligvis beskadiget ved strømafbrydelsen. Hvis du har en backup, så brug den i stedet. Ellers må du nok starte forfra.

Med hensyn til "venstrespalte", tænker du på placeringen i HTML-filen via kildekodevisning, eller tænker du på koderne, som du skulle indsætte i feltet i CSS-editoren?

Hvis det er placeringen i HTML-editoren, så kan det være meget svært at få koderne placeret det rigtige sted via den almindelige brugerflade i KompoZer - så her er kildekodevisningen ikke kun nemmere, den er også nødvendig.

Hvis du tænker på CSS-editoren, så kan det også gøres på de forskellige faneblade i stedet for at kopiere ind på det første faneblad. Min udgave af KompoZer er ikke helt den samme som din, fordi jeg sidder med en Linux-PC, så i stedet for at risikere at give dig forkerte anvisninger, så var det nemmere at bruge kopieringen på den første fane.

Jeg tror,du tager fejl med hensyn til gennemsigtigheden. Jeg har svært ved at tro, at bogstaverne bliver gennemsigtige, de bliver sikkert bare sværere at læse, fordi baggrunden ikke længere er helt hvid.

Hvis du vil have en ny boks i bunden, så er det også bedst at oprette den i kildekodevisning. Problemet er, at KompoZer ikke har en nem måde at kontrollere, hvor bokse indsættes efter den første start. Det bedste er derfor altid at have styr på layoutet og de nødvendige bokse, inden man starter, for så kan man lave dem, som jeg beskriver i hæftet.

Hvis du vil have lavet en boks i bunden, så læg en prøveside ud og vend tilbage, så kan jeg hjælpe dig med at få indsat koden i kildekodevisning.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » søn 10. mar 2013 09:23

Hej Kim, og tak for de gode svar.

Jeg ved ikke, hvad der skete med filen. Det var meget underligt, for KompoZer kunne tydeligvis ikke læse den korrekt, men den blev læst fint i browseren.
Anyway - nu er jeg startet helt forfra, for lige at få alle trin i processen med.

Så nu vil jeg gerne have venstrespalten og en kontaktbjælke i bunden med fra start. Kan du guide mig til at lave dem?

Jeg sidder i øvrigt også på en Linux-maskine - og går aldrig tilbage - så jeg vil gerne høre dine metoder i forhold til dette.

Med hensyn til gennemsigtigheden, var den nu god nok. Hvis jeg skruede helt ned for opaciteten var bogstaverne også helt væk. Men nu ser jeg, om det sker igen.

Venlig hilsen
Kristian

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » søn 10. mar 2013 10:22

Hej igen,

nu har jeg bygget det op igen, og denne gang virker det. Men som du kan se af prøvesiden har jeg stadig problemet med at teksten bliver gennemsigtig.
Kan det evt. være, den skal lægge i et lag over indholdsboksen?

Derudover vil jeg gerne lære at lave en ny boks i bunden.

http://dl.dropbox.com/u/4824573/KompoZer/index.html

Venlig hilsen
Kristian

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » søn 10. mar 2013 11:20

Kristian, det virker desværre ikke på Dropbox denne gang. Årsagen er, at du har glemt at give CSS-filen en filtype. Når filtypen mangler, vil det ikke altid virke hos modtageren.

Du skal omdøbe filen til stilwiwd.css (i din Linux) og så skal du også have rettet filnavnet i KompoZer - det kan vst gøres fra CSS-editoren.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » søn 10. mar 2013 11:42

Åh,

prøv igen - http://dl.dropbox.com/u/4824573/KompoZer/index.html

- ok, nu kan jeg se, at baggrundsbilledet ikke er kommet med. Men du kan vel se, hvad jeg har lavet alligevel?

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » søn 10. mar 2013 12:52

Åh, jeg fik ikke tænkt mig ordentlig om. Ja, alt i boksen gøres gennemsigtigt. Der er flere måder at omgå det på, men den nemmeste er nok følgende - og du får lige igen den nørdede metode, for jeg tror ikke, du kan indsætte denne kode via CSS-editorens faneblade.

Åbn CSS-editoren, klik på stilen indhold, på det første faneblad,
slet linjerne:
background-color: white;
opacity: 0.167;
og indsæt i stedet linjen:
background-color: RGB(0,0,0,0.167);

Du kan lege med andre værdier i stedet for "0.167" for at finde det mest velegnede.

Jeg vender tilbage om lidt ang. en ny boks i bunden.
Mvh. Kim

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » søn 10. mar 2013 13:03

Ok, her er så, hvordan du indsætter boksen i bunden.

Åbn siden i KompoZer
Klik på Kildekodevisning
Rul helt ned i bunden og indsæt dette som det sidste:
<div class="sidefod">Boks i bunden</div>
Klik dig tilbage til almindelig visning.

Boksen er nu placeret forkert, men det retter vi op på med CSS-editoren, så åbn den.
Opret en ny stil med navnet sidefod
Marker sidefod i oversigten, og indsæt dette i ruden til højre:
clear:both;

Du kan nu bruge de andre faneblade til at formatere sidefoden og teksten boksen, fx hvis du vil have teksten centreret.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » man 11. mar 2013 19:14

Hej Kim og endnu en gang tak for de gode råd.

Nu skal jeg nok snart lade dig komme tilbage til andet arbejde...

Men ang. baggrunden virker det som om, css-editoren ikke kan acceptere den linje, du skrev. Den bliver ikke gemt når man opdaterer eller klikker "done".

Kristian

http://dl.dropbox.com/u/4824573/KompoZer/index.html

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » man 11. mar 2013 19:55

fredder skrev: Men ang. baggrunden virker det som om, css-editoren ikke kan acceptere den linje, du skrev. Den bliver ikke gemt når man opdaterer eller klikker "done".


Øv, det er fordi KompoZer er ved at være gammel. Brugen af gennemsigtighed på den måde er forholdsvis nyt, så KompoZer tror, det er ugyldig kode og sletter det derfor igen.

Jeg har lige prøvet at indsætte koden manuelt i en CSS-fil, og det slettes også der.

Der findes andre løsninger, men de er lidt mere omstændige. Jeg vender tilbage.
Mvh. Kim

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » man 11. mar 2013 20:12

Løsningen er at lave et billede, der består at en gennemsigtig farve og så angive billedet som baggrundsbillede.

Det vil sige, at du skal have fat i et billedbehandlingsprogram eller tegneprogram, som kan arbejde med gennemsigtighed. Eftersom du bruger Linux, har du vel GIMP installeret?

I så fald (jeg sidder med en engelsk GIMP, så jeg gætter lidt med menupunkterne):
Opret en ny fil i GIMP, Filer => Ny.
Angiv størrelsen 5x5 pixel.
Klik på Avanceret i samme boks og vælg, at du vil have gennemsigtig baggrundsfarve.
Klik på OK.
Du skal nok forstørre til 800 procent for at se noget.

Klik på udfyldspanden i værktøjsboksen.
Klik på skiftepilen ved boksene for forgrunds- og baggrundsfarve, så du får hvid som forgrundsfarve.
Brug skydepilen til at vælge gennemsigtighed.
Klik på det nyoprettede billede for at påføre farven.
Gem filen som en png-fil, fx menubaggrund.png.

Brug herefter CSS-editoren i KompoZer til at angive filen som baggrundsbillede på menuboksen, eller hvor du nu ellers vil have gennemsigtig baggrund.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » lør 16. mar 2013 08:43

Perfekt mand - nu funger det.

Tusind tak for hjælpen.
Jeg er ved at fatte det nu, og er blevet helt fortrolig med source editing. På din side henviser du ofte til html.dk, men den side kan jeg ikke få til at fungere. Er der andre steder, du kan henvise til, hvor jeg kan lære mere?

Venlig hilsen
Kristian

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » lør 16. mar 2013 09:33

Html.dk er lukket, jeg har åbenbart overset nogle links, så det vil jeg lige tjekke nærmere her i weekenden, tak!

Der findes ikke andre danske sider, der giver en lige så let indføring i html-koder som html.dk gjorde. Men der findes da andre sider om kodning i HTML og CSS, fx:
http://netkoder.dk/
http://hjemmesideskolen.dk
http://webdesign101.dk

Hvis du en dag vil udvide horisonten lidt, og dit webhotel understøtter scriptsproget PHP, så giver jeg en indføring i PHP sammen med KompoZer her:
http://kimludvigsen.dk/programmer-inter ... in-php.php

Netkoder, se ovenfor, skriver også om kodning i PHP.
Mvh. Kim

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » lør 16. mar 2013 09:39

Tak for det. Jeg arbejder videre.
Vi tales nok ved.
Mange hilsener fra et solbeskinnet Zanzibar.

fredder
 
Indlæg: 9
Tilmeldt: fre 8. mar 2013 13:45

Re: Transparent baggrund med tekst

Indlægaf fredder » lør 16. mar 2013 11:56

Lige angående sidefoden.
Er der ikke en funktion til altid at vise den nederst i det, som browservinduet kan se?

Kim Ludvigsen
MozillaDanmark
 
Indlæg: 11520
Tilmeldt: lør 5. mar 2005 22:45

Re: Transparent baggrund med tekst

Indlægaf Kim Ludvigsen » lør 16. mar 2013 13:01

Jo, du kan bruge fast placering (i kodesprog, position:fixed;).

Åbn CSS-editoren, markér stilen sidefod, klik på fanen Boks, vælg Fast ud for Position. Du skal også angive en afstand fra bunden, fx 5 px.

Du skal desuden have angivet, om boksen skal placeres ovenpå eller under andre lag, der skal du bruge Z-indeks. Angiv Z-indeks 50 for sidefod, og angiv Z-indeks 10 for indhold.

Ovenstående ud fra hukommelsen, hvis du ikke kan få det til at virke - evt. ved at prøve dig lidt frem, så læg en kopi ud af siden, så kan jeg se nærmere på det.
Mvh. Kim