CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

hanzalot Nybegynder

14. januar 2012 - 12:03 Der er 22 kommentarer og
1 løsning

Et par problemer med hjemmesideprogrammering (centrering af tekst, youtube-videoer etc.)

Hej alle,

Jeg er ved at have fået en hjemmeside stablet på benene, og nu er der kun lige de sidste par ting, som driller - og som jeg simpelthen ikke kan finde ud af - så jeg håber meget, at I kan hjælpe. Det drejer sig om disse fire ting:

1) Jeg kan simpelthen ikke få skrevet tekst på forsiden under billedet (her: www.hhrasmussen.dk/music) - ikke uden at den kommer på alle siderne.

2) Og så på denne side: http://www.hhrasmussen.dk/music/tabs/other/benharper/giveamanahome/ kan jeg ikke få akkordangivelserne (bogstaverne) til at stå ligesom jeg placerer dem i Notepad++ . De angiver det sted i teksten, hvor man skifter akkord, så det er ret vigtigt.
Hvis jeg venstrestiller det hele, står de rigtigt, men det skal helst være centreret.

Den "tilsvarende" side her http://www.hhrasmussen.dk/music/tabs/kjp/doxology/ står som den skal, men det er måske fordi der ikke er mellemrum i nogle af linjerne der...

3) Og når jeg går ind under menupunktet Videos, skubber menuen sig en lille tak til venstre - hvis jeg fjerner de embeddede youtube-videoer, gør den det ikke længere...

4) Endelig så hvis jeg zoomer ind eller ud på siden (altså med ctrl+musens scroll-knap), ryger menupunktet "Home" en linje ned.

Håber som sagt meget, at en af jer kan hjælpe! Og I må sige til, hvis jeg skal poste indexfiler eller style sheet eller noget.

På forhånd mange tak for hjælpen.

Mvh. Hans

Synes godt om

zips Juniormester

14. januar 2012 - 14:22 #1

Uden DOCTYPE kan og vil meget gå galt, læs denne guide http://www.eksperten.dk/guide/1288

Synes godt om

Slettet bruger

14. januar 2012 - 17:50 #2

1) Jeg ved ikke hvordan du har bygget din hjemmeside op. Måske er det en template du retter i som bruges på alle siderne?

2) Da du centrerer teksten, kan du løse det ved at tilføje mellemrum i slutningen så alle linier har lige mange tegn. Dit andet link virker fint, fordi du har lige mange tegn på de linier du vil have centreret ens.

3) Jeg tror det er fordi der dukker en scrollbar op på denne side. Siden er centreret men har mindre plads pga scrollbaren, så du oplever menuen flytter sig. Det er helt normalt.

4) Din menu står allerede i to linier i min browser, selvom jeg ikke zoomer (firefox og ie). Prøv at fjerne width og tilføj "display: inline-block;" i stedet.

Synes godt om

Slettet bruger

14. januar 2012 - 18:02 #3

Tilføjelse til punkt 2)

Du har parvis 2 linier du vil have centreret ens, så hver af disse 2 linier skal have lige mange tegn. Og det er første linie i hvert par der skal have tilføjet det antal mellemrum der gør at den indeholder ligeså mange tegn som anden linie.

Alternativt kan du bare sørge for at alle linier har lige mange tegn i notepad (med mellemrum tilføjet før og efter på alle linier), så vil hele teksten også være ens uanset om den er venstrestillet eller centreret.

Synes godt om

olebole Juniormester

14. januar 2012 - 19:52 #4

<ole>

@hanzalot: Jeg har selv spillet musik i 40 år (er iøvrigt stor Ben Harper fan, selvom jeg desværre endnu ikke ejer en Weisenborn). Heldigvis er jeg i årenes løb kun sjældent stødt ind i centrerede tekster, for de er ikke særligt læsevenlige.

Som min gamle typografilærer altid sagde: "Centreret tekst ser rasende godt ud i pavelige dekreter - men bør ikke bruges til seriøs læsning!" =)

Problemet er, at man har to variable 'kanter', som øjets bevægelser skal forholde sig til, hvilket er besværligt og trættende. Det er ligeså uegnet som laaaaange linjer, som de kendes fra Wikipedia i en maksimeret browser.

Hvis du derimod venstrestiller teksten og vælger en monospaced skrift (f.eks. Courier), har alle tegn samme bredde, og så er det let at styre, hvormange anslag den pågældende akkord skal flyttes ind. Du kan sagtens rykke teksterne ind på midten, men lnjerne bør helt klart venstrejusteres =)

/mvh
</bole>

Synes godt om

olebole Juniormester

14. januar 2012 - 19:53 #5

- og hvis jeg nu havde haft en Weissenborn, havde jeg sikkert kunnet sdavø dens navn rigtigt, første gang *D

Synes godt om

NielsErikP Mester

14. januar 2012 - 22:07 #6

Hej...

Mon 4) løses, hvis du sætter

body {
font-size: 100.1%
}

I din Css...

Tænker lidt om det ændrer noget at du ændrer :

#menu_container ul {
list-style-type: none;
width: 316px; // til noget større antal pixels
margin : 0 auto;
padding: 0;
}

Da du har :

#menu_container li span.menu_divider{
margin-left: 15px;
margin-right: 15px;
}

Der skal jo også være plads til selve linket.

Håber du kan bruge det.

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 15:05 #7

Tusind tak for svarene alle sammen - der er allerede sket store fremskridt!

Jeg må hellere tage dem i nummerorden, for at det er nogenlunde til at overskue:

1) @tolamaps

Ja, det er vist nok en template, jeg retter i - det var noget jeg fik hjælp til at lave, så topmenuen fulgte med på alle sider - det ser sådan ud der, hvor jeg prøver at sætte "forsideteksten" ind:

<?php
require_once './includes/Menu.php';
?>

<html>
<head>
<link rel="stylesheet" type="text/css" href="/music/styles/styles.css">
</head>
<body>
<div id="main_container">
<div id="menu_container">
<?php
$menu = new Menu();
echo $menu->render();
?>
</div>
<div style="clear:both"></div>
<div id="content_container">
<?php
$str = preg_replace("'/music'", "", $_SERVER['REQUEST_URI'], 1);

if ($str !== '/' ) {
$content_file = './content' . $str . 'index.php';
require_once $content_file;
} else {
echo '<img id="main_image" src="/music/images/FJN.JPG" />';
}
?>
</div>
</div>
</body>
</html>

Jeg synes, jeg har prøvet alle steder, og ligegyldigt hvor kommer den med på alle sider af hjemmesiden.

2) @tolamaps:

Super! Jeg bildte mig ind, at jeg havde prøvet noget lignende, men det havde jeg åbenbart ikke, og det her virker jo glimrende (@olebole: så kan jeg også rette venstrekanten til for at skåne læsernes øjne :-).

3) @tolamaps - rigtigt! Så er det jo fint, som det er.

4) @tolamaps:

"display: inline-block;" i stedet for "width løser problemet, men kun i Firefox. I IE rykker det topmenuen et godt stykke over i venstre side. Udseendet i IE er dog et generelt problem, har jeg opdaget (se 5 nedenfor).

@NielsErikP:

"Større width løser til dels problemet - nu skal man zoome en del, før menuen rykker sig, så det er da til at leve med, hvis der ikke er andre gode forslag?

5) Og @zips:

Jeg kunne helt sikkert bruge det DOCTYPE til noget, da der er nogle uoverensstemmelser mellem Firefox og IE - jeg har dog læst artiklen og gogglet lidt og må indrømme, at det hurtigt bliver for indviklet for mig. Er der en eller anden let-forståelig måde at gøre det på?

Endnu en gang tak for hjælpen - det er særdeles påskønnet!

Mvh. Hans

Synes godt om

olebole Juniormester

15. januar 2012 - 15:23 #8

Prøv at skrive denne DTD som det allerførste i dokumentet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

- så er du væsentligt bedre sikret ens visning i forskellige browsere. Opstår der 'særheder' i denne forbindelse, må vi løse problemerne, efterhånden som de tårner sig op - men det er langtfra sikkert =)

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 15:26 #9

Hej Ole,

Er det i Style sheetet, du mener?

Tak for hjælpen,
Hans

Synes godt om

olebole Juniormester

15. januar 2012 - 15:32 #10

Nej, det er øverst i HTML-dokumentet. Det er derfor, jeg har ladet <html> komme med. Det tag skal naturligvis kun stå der én gang, men er medtaget for at vise, hvor DTD'en står i filen *o)

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 15:36 #11

Ok, selvfølgelig - jeg er ikke ligefrem nogen troldmand til det her :-). Skal det så ind allerøverst i samtlige html-dokumenter?

Synes godt om

olebole Juniormester

15. januar 2012 - 15:50 #12

Yups. Du kan til en vis grad sammenligne den med G-/F-/C-nøgle og tilhørende krydser og b'er. 'Nodeprikkerne' kan betyde meget forskelligt, så 'noget' skal fortælle musikeren, hvordan de skal præcist skal tolkes i det foreliggende nodeark. Det er det samme, en Doc Type Definition bruges til i HTML =)

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 16:10 #13

For pokker - det er jo fantastisk! :) Nu er problem 4) også løst, da "display: inline-block;" i stedet for "witdh: 325px;" nu også virker i IE. Fedt!

Jeg har faktisk kun sat DTD'en ind i den "første" index-fil, men det virker tilsyneladende over det hele. Kan det være, fordi alle "under-siderne" peger tilbage til den for at hente topmenuen?

Tusind tak for hjælpen, Ole - og ikke mindst node/nøgle-forklaringen, som helst klart er lettere at forstå :).

Nu mangler der bare lige det med at få skrevet den her tekst på forsiden under billedet (her: www.hhrasmussen.dk/music) - har du nogen bud på det?

Mvh. Hans

Synes godt om

olebole Juniormester

15. januar 2012 - 16:48 #14

Den 'første' index-fil er en template, som alle dine sider bliver lavet over. Derfor slår DTD'en igennem på alle siderne.

Prøv at skifte dette:

} else {
echo '<img id="main_image" src="/music/images/FJN.JPG" />';
}

- ud med dette:

} else {
echo '<img id="main_image" src="/music/images/FJN.JPG" />'
.'<p>En eller anden tekst om en skøn, aldrende Gibson.</p>';
}

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 17:18 #15

Ahh ok - og fantastisk hjælp endnu engang! Nu kører det sør'me.

Jeg takker mange gange og håber, at du måske kan finde lidt Ben Harper eller andre tabs, du kan bruge, når jeg inden længe får alle sammen lagt på :-). Og skulle du få mod på at investere i en weissenborn står jeg gerne til rådighed med mine erfaringer (der er jeg mere på hjemmebane ind i html-verdenen!)

Vil du lave et svar, så jeg kan give points?

Og tolamaps, du må også gerne gøre det samme.

I skal have mange tak for hjælpen alle sammen - det var en KÆMPE hjælp for mig.

Mvh. Hans

Synes godt om

olebole Juniormester

15. januar 2012 - 17:33 #16

Hehe ... spørgsmålet er, om vi mon ikke kender hinanden fra Mojo el.lign. På et tidspunkt blev jeg 'truet' med at blive opført på inventarlisten :D

Ellers tak, jeg samler ikke point, så det må være tolamaps' =)

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 17:41 #17

Hehe, det kan være. Jeg er nu ikke kommet der så meget, men jeg har en ven, der vist var hustrommeslager en overgang, så vi er da ikke "langt fra hinanden" :-).

Mvh. Hans

Synes godt om

Slettet bruger

15. januar 2012 - 20:01 #18

Jeg samler heller ikke point. Glæder mig du fik det løst så hurtigt. :)

Synes godt om

hanzalot Nybegynder

15. januar 2012 - 20:26 #19

Ok, jamen, så siger jeg bare tak for hjælpen :).

Skulle der være andre, der bidragede til tråden her, som kan bruge point, skal de bare melde sig på banen.

Mvh. Hans

Synes godt om

olebole Juniormester

15. januar 2012 - 22:10 #20

Hvis ingen melder sig de næste par dage, må du meget gerne accpeptere dit eget svar, så tråden lukkes =)

Hustrommeslager ... det skulle vel aldrig være Leif M.? Anyway - en lille verden =)

Synes godt om

hanzalot Nybegynder

16. januar 2012 - 00:50 #21

Ok - det skal jeg gøre. Og han hedder Jakob Petersen - men det er vist en håndfuld år siden eller noget i den retning :).

Mvh. Hans

Synes godt om

NielsErikP Mester

16. januar 2012 - 22:27 #22

@NielsErikP:

"Større width løser til dels problemet - nu skal man zoome en del, før menuen rykker sig, så det er da til at leve med, hvis der ikke er andre gode forslag?
....
Jamen jamen har du prøvet og sætte dette i din Css fil :

body {
font-size: 100.1%;
}

Synes godt om

hanzalot Nybegynder

16. januar 2012 - 22:31 #23

Hej,

Det hjalp heller ikke, men som du kan se ovenfor, er problemet løst nu :).

Tak for hjælpen,
Hans

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS