Nybörjare behöver hjälp med HTML

Permalänk
Medlem

Nybörjare behöver hjälp med HTML

Hej!

Jag har börjat med att koda hemsidor och det går ganska bra!
Nu är det så att jag har en sidomeny i form av fyra bilder som har fyra länkar i sig, den har jag lagt i en div.
Nu är det så att jag vill ha text på sidan om den, nu har jag alltså sidomenyn överst och texten hamnar under den. Eller tvärtom.
Hur gör jag för att få upp texten på sidan om min lilla sidomeny?
Tacksam för all hjälp!
Mvh

Permalänk
Medlem

Kanske använda dig av CSS z-index?

Var ett tag sedan jag höll på med hemsidor, men det var det första jag kom på.

Permalänk
Medlem
Skrivet av Tredent:

Kanske använda dig av CSS z-index?

Var ett tag sedan jag höll på med hemsidor, men det var det första jag kom på.

Z-index är djupgående, alltså om TS vill lägga texten över menyn. CSS är det som antagligen är bäst att använda då det är enklare att flytta runt grejer, är inte så bra på det själv då jag mest håller på och mixtra i Joomla och skriver därför inte min egen kod.

Permalänk
Medlem

Du vill ha det så här?

Bild 1 En massa text
Bild 2 som löper vid
Bild 3 sidan av bilderna

I så fall ger du både div:en med bilderna samt div:en med texten en bestämd bredd.
Har du t ex en omslutande div som är 300 pixlar bred så ger du bild-diven en bredd på t ex 120 pixlar och text-diven en bredd på upp till 180 pixlar. Då får de plats bredvid varandra.
Beroende på hur du gjort med resten så kanske du behöver floata elementen.
Det där funkar även om du angett bredd i något annat format, som t ex %.

Permalänk
Medlem
Skrivet av Tredent:

Kanske använda dig av CSS z-index?

Var ett tag sedan jag höll på med hemsidor, men det var det första jag kom på.

Lägger jag detta i en css mall då alltså?
Sådet finns inget lättare sätt att bara få upp texten på sidan om menyn?

Permalänk
Medlem
Skrivet av Fåtölj:

Lägger jag detta i en css mall då alltså?
Sådet finns inget lättare sätt att bara få upp texten på sidan om menyn?

Det stämmer.

Men lättast är att göra som "darkmoon" skriver tror jag.

Permalänk
99:e percentilen
Skrivet av Fåtölj:

Lägger jag detta i en css mall då alltså?
Sådet finns inget lättare sätt att bara få upp texten på sidan om menyn?

Förr i tiden använde man tabeller, men GÖR INTE DET.

Jag tar ett exempel:

HTML:

<div id="side">Blabla länkar</div> <div id="main">Blablablablablabla Blabla blablablabla blablabla</div> <div class="clear"></div>

CSS:

#side { float: left; width: 160px; } #main { float: left; width: 640px; } .clear { /* universell; därför använder jag klass istället för id */ clear: both; }

Detta förutsätter att #sides och #mains totala bredd inte överstiger den inre bredden på det element de ligger i. (Det gör de troligen inte om du inte har satt någon bredd på det element de ligger i.)

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av darkmoon:

Du vill ha det så här?

Bild 1 En massa text
Bild 2 som löper vid
Bild 3 sidan av bilderna

I så fall ger du både div:en med bilderna samt div:en med texten en bestämd bredd.
Har du t ex en omslutande div som är 300 pixlar bred så ger du bild-diven en bredd på t ex 120 pixlar och text-diven en bredd på upp till 180 pixlar. Då får de plats bredvid varandra.
Beroende på hur du gjort med resten så kanske du behöver floata elementen.
Det där funkar även om du angett bredd i något annat format, som t ex %.

Gör jag detta enklast i CSS mallen alltså?
Är det lätt att länka Div:ar?

Alltså jag har ju en meny. Bredvid den menyn vill jag ha text.

Permalänk

Mycket vanligt problem
Yes du sätter båda elementen till float:left
Därefter lägger du in en tom div med attributet clear. <div style="clear:both"></div>
Eller en "span" isyället för div skulle också funka med samma atrribut.

Det finns en till lösning. Det är att skapa en tabell där du lägger dessa två divs i var sin cell på samma rad.
Inte lika snygg om du inte ska använda samma fält o marginal längre ner.

Annars fortsätter allt nedanför att flyta ihop till vänster.

Permalänk
Medlem
Skrivet av Zuggmate:

Förr i tiden använde man tabeller, men GÖR INTE DET.

Jag tar ett exempel:

HTML:

<div id="side">Blabla länkar</div> <div id="main">Blablablablablabla Blabla blablablabla blablabla</div>

CSS:

#side { float: left; width: 160px; } #main { float: left; width: 640px; }

Detta förutsätter att #sides och #mains totala bredd inte överstiger den inre bredden på det element de ligger i. (Det gör de troligen inte om du inte har satt någon bredd på det element de ligger i.)

Jag gjorde som du sade och det funkade! Jag får använda detta för tillfället, tackar!
Jag kommer säkert stöta på lite fler fel så då återkommer jag hit, så lås inte tråden mod!
Mvh

Permalänk
99:e percentilen
Skrivet av Fåtölj:

Jag gjorde som du sade och det funkade! Jag får använda detta för tillfället, tackar!
Jag kommer säkert stöta på lite fler fel så då återkommer jag hit, så lås inte tråden mod!
Mvh

Det är ingen temporär fix, utan det är ett korrekt sätt att göra det. Du bör, som ovanstående sa, även lägga till en clear-div efter. Jag redigerar mitt ursprungliga inlägg.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Zuggmate:

Det är ingen temporär fix, utan det är ett korrekt sätt att göra det. Du bör, som ovanstående sa, även lägga till en clear-div efter. Jag redigerar mitt ursprungliga inlägg.

Mje... du ska inte lägga till en div med clear bara för att cleara. Det fungerar men är inte semantiskt korrekt. Bättre att lösa det på andra sätt. En ren float: left med korrekta bredder kommer skjuta ner nästföljande float till rätt plats. Har du däremot ett innehåll i din clearade div så är det helt korrekt. Men tomma element bara för att layouten ska se bra ut är nästan lika illa som tabeller

Permalänk
99:e percentilen
Skrivet av darkmoon:

Mje... du ska inte lägga till en div med clear bara för att cleara. Det fungerar men är inte semantiskt korrekt. Bättre att lösa det på andra sätt. En ren float: left med korrekta bredder kommer skjuta ner nästföljande float till rätt plats. Har du däremot ett innehåll i din clearade div så är det helt korrekt. Men tomma element bara för att layouten ska se bra ut är nästan lika illa som tabeller

OK, det är nog sant, men då jag har uppfattningen att TS ännu inte är på den kunskapsnivån är en clear-div en enkel fix som kommer bespara honom många hårtussar.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

Hej, jag är tillbaka.

Det är så att jag har några bilder som jag har lagt in i en div. Men jag förstår verkligen inte hur man exakt byter deras position...
Det jag undrar är om man kan byta typ koordinaterna för dem eller något i koden.
2)Just det, om jag har t.ex. en liten "thumbnail" av en bild och så "hoovrar" jag musen över den så ska den expanderas, någon som vet hur jag gör detta? Ni som har svarat i tråden låter mycket satta inom detta, gärna liknande svar uppskattas!
Mvh

Permalänk
Skrivet av darkmoon:

Mje... du ska inte lägga till en div med clear bara för att cleara. Det fungerar men är inte semantiskt korrekt. Bättre att lösa det på andra sätt. En ren float: left med korrekta bredder kommer skjuta ner nästföljande float till rätt plats. Har du däremot ett innehåll i din clearade div så är det helt korrekt. Men tomma element bara för att layouten ska se bra ut är nästan lika illa som tabeller

Skrivet av Zuggmate:

OK, det är nog sant, men då jag har uppfattningen att TS ännu inte är på den kunskapsnivån är en clear-div en enkel fix som kommer bespara honom många hårtussar.

Är det inte mer korrekt att använda "overflow"?
http://pathfindersoftware.com/2007/09/developers-note-2/

Visa signatur
Permalänk
Medlem
Skrivet av Fåtölj:

Hej, jag är tillbaka.

Det är så att jag har några bilder som jag har lagt in i en div. Men jag förstår verkligen inte hur man exakt byter deras position...
Det jag undrar är om man kan byta typ koordinaterna för dem eller något i koden.
2)Just det, om jag har t.ex. en liten "thumbnail" av en bild och så "hoovrar" jag musen över den så ska den expanderas, någon som vet hur jag gör detta? Ni som har svarat i tråden låter mycket satta inom detta, gärna liknande svar uppskattas!
Mvh

Är det någon som kan svara på detta?
Mvh

Permalänk
Medlem

Hej igen!
Vill bara uppdatera lite + en fråga!
Har nu blivit mycket bättre på webbdesign och koda html. Det är riktigt roligt!
Nu är det så att jag har laddat hem ett Javascript vilket gör så att bilder öppnas i ett litet fönster vid klick. Som i Facebook t.ex. Min enda fråga är vart jag lägger java koden, en hel mapp följde med, med diverse css kod och javascriptet. Vart lägger jag scriptet. DVS hur "installerar" jag den?
Mvh

Permalänk
Hedersmedlem
Skrivet av Fåtölj:

Är det någon som kan svara på detta?
Mvh

Fåtölj, det är inte tillåtet att bumpa sin tråd som du gjorde här.

Citat:

§ 4
Bumpning
Det är inte tillåtet att skriva inlägg som endast är till för att flytta tråden högre upp i trådlistningen (så kallad bumpning).

Permalänk
Medlem
Skrivet av Shimonu:

Fåtölj, det är inte tillåtet att bumpa sin tråd som du gjorde här.

Det där torde vara preskriberat? Det var flera veckor sedan, aja. Inte medvetet.

Permalänk
Hedersmedlem
Skrivet av Fåtölj:

Det där torde vara preskriberat? Det var flera veckor sedan, aja. Inte medvetet.

Hehe jag såg det nu och oavsett så bör du vara medveten om att det är mot reglerna. Gör det inte i framtiden bara.

Permalänk
Medlem
Skrivet av Fåtölj:

Hej igen!
Vill bara uppdatera lite + en fråga!
Har nu blivit mycket bättre på webbdesign och koda html. Det är riktigt roligt!
Nu är det så att jag har laddat hem ett Javascript vilket gör så att bilder öppnas i ett litet fönster vid klick. Som i Facebook t.ex. Min enda fråga är vart jag lägger java koden, en hel mapp följde med, med diverse css kod och javascriptet. Vart lägger jag scriptet. DVS hur "installerar" jag den?
Mvh

Är det en lightboxfunktion som den här http://lokeshdhakar.com/projects/lightbox2/ ? Isf finns allt beskrivet ganska väl på den sidan. Fanns det inga som helst instruktioner där du laddade ner skriptet ifrån?

Visa signatur
Permalänk
Medlem

Har inte blivit klokare på javascript än, det här är första gången jag använder javascript så enkelt är det i varje fall inte. Problemen jag känner är att jag inte vet vart jag ska placera mina olika filer bland annat.. Jag kan länka till sidan där jag hämtade javascriptet:
http://www.dhtmlgoodies.com/index.html?whichScript=picture-zo...

Där står det ändå ganska tydligt, men jag förstår inte bara vart de ska läggas!

Uppskattar all hjälp, det skulle betyda väldigt mycket då jag känner att jag fastnat helt...

Mvh

Permalänk
Medlem
Skrivet av Fåtölj:

Har inte blivit klokare på javascript än, det här är första gången jag använder javascript så enkelt är det i varje fall inte. Problemen jag känner är att jag inte vet vart jag ska placera mina olika filer bland annat.. Jag kan länka till sidan där jag hämtade javascriptet:
http://www.dhtmlgoodies.com/index.html?whichScript=picture-zo...

Där står det ändå ganska tydligt, men jag förstår inte bara vart de ska läggas!

Uppskattar all hjälp, det skulle betyda väldigt mycket då jag känner att jag fastnat helt...

Mvh

Packa upp mapparna i den mappen du har dina hemsidesfiler/mappar, och öppna html.filen som är med i en texteditor (eller välj "visa källa" i webbläsaren). Då ser du hur det är länkat. Sen får du ändra sökvägen till dina bilder.

Visa signatur