Kompozer opfører sig mærkeligt

[lmdsop]

Hej Ludvigs hjørne,

Jeg synes kompozer opfører sig meget mærkeligt, jeg har lavet en side med fem bokse med hver sin overskrift,
og nogle links til billeder nedenunder.
For det første undrer det mig at selv om boksene ligger på linje, så er topmargen i den første menu -600px nr. 2 -618px
nr. 3 -602px nr. 4 -600 px og nr. 5 40px, og det er meget besværligt at få dem til at være på linje. Hvis jeg ændrer topmargen
på en af dem følger resten af boksene med, og så må jeg flytte nogle af dem enten ned eller op.
Er der en der har en forklaring på det.
Jeg har en webserver hjemme hos mig selv, og hvis jeg lægger siden ud på den virker det, ( http://www.lmdsop.dk ) men hvis jeg
uploader den til vores officielle webserver som findes hos Dansk Folkeoplysnings Samråd, ( http://www.sksa.dk ) virker kun de links
der ligger under menuen Andrup, der skal vælges gårdbilleder i hovedmenuen. (Hovedmenuen ser også mærkelig ud )
Mvh. Svend

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)

[Kim Ludvigsen]

Du har benyttet en lidt forkert tankegang. Boksene skal være ens, så du skal blot genbruge den samme stilklasse på dem alle.

Start med at ændre, så alle bokse bruger stilklassen .menu, og slet så stilklasserne .menu1, .menu2 osv. og alle de tilhørende stilklasser: .menu1 li, .menu2 li, .menu1 li a osv. Dem er der ikke brug for.

Nu ligger alle boksene oveni hinanden og delvist uden for skærmbilledet, så der skal ændres lidt i stilklassen .menu. Vælg .menu i CSS-editoren, og klik på fanen Boks.

I rullemenuen Flyd skal du vælge venstre. Det får boksene til at ligge ved siden af hinanden, så længe der er plads på skærmen. Bemærk, at når der ikke er plads til flere bokse, vil der automatisk blive indsat en ny linje - ligesom i et tekstbehandlingsprogram, når der ikke er plads til flere bogstaver. Da du har valgt en meget høj bokshøjde, vil eventuelle bokse på den nye linje ikke umiddelbart kunne ses af brugeren. Hvis du har tænkt dig at fylde boksene ud i hele højden er det naturligvis ikke et problem, fordi brugeren så alligevel ruller nedad. Men ellers, så prøv at vælge en bokshøjde, der passer bedre med indholdet i den boks med flest links. Du kan evt. helt fjerne højdeangivelsen på .menu.

Nulstil Margin,Top - så ryger boksene på plads.

Tilpas Margin, Venstre, så du får en passende afstand mellem boksene - mon ikke 20px vil være fint?

Du har så et enkelt problem tilbage i form af linket tilbage til forsiden, som hænger et forkert sted. Opret en ny stilklasse i CSS-editoren, kald den fx .flydestop. Klik på fanen Boks, vælg begge i rullemenuen Nulstil, klik på OK og tilføj så stilklassen på tilbagelinket.

Med hensyn til linkene, så virker de alle - undtagen Sadderup og Oksvang, og det er fordi, du endnu ikke har langt link ind på dem.

[lmdsop]

Hej Kim,

Tak for svaret, jeg synes ellers selv jeg plejer at være ret god kunne bruge nye programmer,
men kompozer må være ret speciel, for jeg kan ihvertfald ikke få det til at virke, selv efter dine anvisninger.
Enten må jeg opgive at bruge programmet, ellers må du pinde det lidt mere ud så jeg helt
nøjagtigt kan finde ud hvordan jeg gør det du har foreslået.
Mvh. Svend

[Kim Ludvigsen]

Ok, jeg gik måske lidt for let og elegant hen over fremgangsmåden, fordi jeg regnede med, at du ikke var helt ny med tanke på det, du havde fået lavet.

Fortæl lige, hvor du gik i stå med ovenstående.

[lmdsop]

Jeg klikker på overskriften Andrup, den der bruger menu1, så vælger jeg menu
i rullemenuen ingen klasse, så forsvinder overskriften.
Derefter åbner jeg css editoren og sletter alle stilklasser der hedder noget med menu1,
så vælger jeg menu og boks og sætter flyd til venstre og fjerner topmargen, men det ændrer ikke
noger boksene står stadig oven i hinanden og overskriften mangler stadig.
Hvad er det jeg gør forkert??
Mvh. Svend

[Kim Ludvigsen]

Overskriften skulle ikke forsvinde, så du må have gjort noget forkert - du har muligvis fået markeret det forkerte tag, inden du påførte stilklassen. Lad os starte forfra:

Brug en backup (download evt. filerne fra nettet, hvis du ikke har gemt en lokal backup).

Sådan fjerner du menu1 fra Andrup-boksen:

Klik på overskriften Andrup. Du kan nu se en række tags i statuslinjen, heriblandt denne:
<div class="menu1">
Klik på tagget for at markere det, og højreklik så på det. En menu åbnes, vælg menupunktet Klasser. Du får nu vist en undermenu med alle stilklasserne, og der er flueben ud for menu1. Klik på menu1 for at få fjernet fluebenet. Tagget ændres til <div> i statuslinjen. Højreklik nu på <div>, klik på menupunktet Klasser, og klik så på stilklassen menu i undermenuen.
Gentag for de andre bokse, undtagen Solbjerg (som jo allerede har stilklassen menu).

Nu har du fået påført de rette stilklasser - og alle boksene er forsvundet, hvilket du ikke skal lade dig afskrække af. Næste trin er at åbne CSS-editoren og ændre stilklassen .menu som tidligere beskrevet, så skulle alt falde på plads.

Går du i stå undervejs, så vend tilbage og fortæl hvor.

[lmdsop]

Det var jo en anden måde end du først beskrev, men det virker delvis,
bortset fra at boksene nu har byttet plads og den ene Andrup ikke er på linie
med de andre ca. 10 px lavere, hvordan får jeg det på plads, og hvordan kan
jeg få boksene til at bytte plads igen ??
Mvh. Svend

[Kim Ludvigsen]

Boksene vises i den rækkefølge, de er indsat i koden. Du kan flytte rundt i kildekodevisning, men det nemmeste er måske simpelthen at bytte rundt på indholdet, nu du alligevel ikke har så meget i boksene.

Med hensyn til den ekstra luft over Andrup, så er det fordi, du har fået indsat et linjeskift. Klik på knappen Kildekodevisning, og find så denne kode - bemærk, at du nok ikke har samme linjeombrydning som her - det kan risikere at stå på én linje hos dig:

</div>
<br>
<div class="menu">
<ul>
<li>
<h3>Andrup</h3>

Du skal slette <br> fra ovenstående kode.

[lmdsop]

Tak for din tålmodighed, nu har jeg fået det til at se ud nogenlunde som jeg vil have det, men
det med tilbagelinket virker lidt underligt det står rigtigt når det vises i kompozer, men på hjemmesiden
vises det til højre for den sidste boks.
Jeg synes stadigvæk at kompozer er temmelig besværligt at have med at gøre, da der tilsyneladende er flere løsninger
på at opnå det samme.
Mvh. Svend

[Kim Ludvigsen]

At der er flere muligheder for at opnå det samme kan måske virke forvirrende i starten - især hvis sådan en som mig blander mulighederne sammen - men ellers er det en fordel, fordi man kan vælge den mulighed, man bedst kan lide. Ligesom du kan kopiere en tekst i Windows på flere måder: Ctrl + C eller Ctrl + Insert eller menupunktet Rediger => Kopier eller højreklik => Kopier.

Med hensyn til tilbagelinket, så har du måske ikke fået oprettet stilreglen .flydestop som tidligere beskrevet, eller du har ikke fået den påført på tilbagelinket. Hvis du uploader siden og giver mig adressen til den, kan jeg se, hvad der er gået galt, og så beskrive, hvordan du får det rettet.

[lmdsop]

Adressen er www.sksa.dk
Hvorfor er hovedmenuen forskudt tilhøjre, det er den ikke hvis du ser det på min
private server www.lmdsop.dk, og linket under Oksvang er forskubbet tilhøjre.
Hvorfor ser det ikke ens ud på de to sider, det de samme filer jeg har uploadet??.
Mvh. Svend

[Kim Ludvigsen]

CSS-filerne er ikke ens de to steder. I den ene har du en venstre-margin på 5px på .menu, i den anden har du en venstre-margin på 15px.

Jeg opdager så lige, at du benytter forskellige CSS-filer til hver side. Det er ikke meningen med CSS, du går dermed glip af den helt store fordel, nemlig genbrug.
Du bør samle alle dine CSS-koder i en enkelt CSS-fil som så bruges på alle sider. Fordelen er, at du så kun skal rette ét sted, hvis du en dag vil lave layoutet om. Hertil kommer, at den besøgendes browser husker CSS-filen, så den kun hentes én gang, dermed bliver det hurtigere at hente efterfølgende sider.

Der kan i sjældne tilfælde være fornuft i at have CSS i flere filer, men ikke i dette tilfælde.

Det kan dog være lidt besværligt og nørdet at få samlet koderne, da der skal ændres i både CSS-fil og i HTML-filerne - og hvis jeg skal hjælpe med anvisning, vil det være til at gøre det i kildekodevisning. Sig til, hvis du har mod på en ændring.

[Gæst]

Det vil jeg gerne, jeg synes ikke man kan se hvilken css fil der hører til den html fil man har åben i kompozer,
så jeg ved ikke lige hvordan jeg har fået flere css filer.
Jeg har selv forsøgt mig lidt, men hvordan kan det være at når jeg åbner en html fil der er lavet i kompozer
i notepad står teksten i en lang smøre, men ikke hvis filen er lavet i notepad, det gør det jo næsten umuligt
at redigere filerne ( det er det samme med css filer ), med mindre man gør det i kildekodevisning i kompozer,
men der kan man jo ikke se css filen.
Mvh. Svend

p. s. jeg har prøvet at installere notepad++ men den gør det samme.

[Kim Ludvigsen]

Det er desværre KompoZer, der leger med linjeskiftene. Prøver man at indsætte linjeskift i kildekodevisning, fjernes de ofte også igen. Det er drønirriterende for dem, der ofte skal bruge kildekodevisning eller som skal redigere i andre programmer.

Fremover, når du opretter en ny side, så tag en eksisterende side, der ligner den nye, du vil lave. Så genbruges CSS-filen helt automatisk. Skal layoutet være anderledes på den nye side, så tilføj nye stilregler med sigende navne i CSS-editoren.

Det fremgår af koden, hvilken CSS-fil der bruges. Du kan se det i kildekodevisning, og du kan se det i CSS-editoren. Og du kan se det i en teksteditor som Notepad++.

Det er ikke helt så nemt at foretage de her omtalte ændringer i KompoZer, så brug Notepad++. Luk KompoZer imens, så du ikke får problemer med, at flere programmer har adgang til filerne samtidig.

Lav lige en backup først, så det er nemmere at starte forfra, hvis noget driller.

Jeg beskriver her, hvordan du bruger arkivet.css (bruges i øjeblikket på forsiden) som CSS-fil på gårdbilleder-siden, og hvordan du får flyttet stilregler fra gårdbilleder.css over i arkivet.css. Gentag fremgangsmåden, hvis du har flere sider, der skal "samles". Bemærk, det er kun, hvis du har "genbrugt" stilregelnavne men med forskellige egenskaber, det er nødvendigt at omdøbe stilregler, ellers kan du nøjes med første, enkle trin nedenfor.

Åbn gaardbilleder.htm i Notepad++
Find koden:
<link rel="stylesheet" href="gaardbilleder.css" type="text/css">
Udskift den med:
<link rel="stylesheet" href="arkivet.css" type="text/css">

Nu bruger den samme CSS-fil som forsiden.

Du skal nu have omdøbt alle forekomster af stilreglen "menu" i filen, fordi du allerede bruger "menu" på forsiden med nogle andre egenskaber. Find alle forekomster af koden:
<div class="menu">
Omdøb til:
<div class="linkkolonne">

Vi skal også lige have repareret dit tilbagelink, find koden:
</center>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="Index.htm">Tilbage til forsiden</a><br></body></html>
Ændr til:
</center>
<p class="flydestop">
<a href="Index.htm">Tilbage til forsiden</a></p></body></html>

Gem filen.

Åbn gaardbilleder.css
Omdøb alle forekomster af "menu" til "linkkolonne", fx:
.menu {
height: 600px; ...
til:
.linkkolonne {
height: 600px; ...

og:
.menu ul {
border-style: none; ...
til:
.linkkolonne ul {
border-style: none; ...

Slet de øverste linjer:
/* Generated by KompoZer */
* {
margin: 0;
padding: 0;
}

Kopier nu alt indholdet i filen, åbn arkivet.css og indsæt det kopierede sidst i arkivet.css.

Og for at få placeret tilbagelinket korrekt, indsæt følgende sidst i filen:
.flydestop { clear:both; }

Gem arkivet.css og luk filerne. Nu skulle alt gerne være på plads.

[Gæst]

Det lykkedes, men jeg blev nødt til midlertidigt at omdøbe filen .htm til .txt for at kunne redigere den ( det bliver ikke nemmere i notepad++ )..
Meeeen det ser stadig ikke ens ud på www.sksa.dk og www.lmdsop.dk selvom det er
nøjagtigt de samme filer jeg har iploadet til de to servere??? har du en forklaring på det.
Mvh. Svend