Permalänk
Medlem

Hjälp med hemsida

Jag håller på att bygga denna hemsidan: Prisvärd logi Bed & Breakfast mellan Landskrona och helsingborg - Välkomna
och skulle behöva lite hjälp

Till att börja med så skulle jag vilja ha en stor bild på huset som ni ser på förstasidan, texten bredvid och sedan 2st bilder under huset, istället för 3st. För att få plats med mer text.
Jag lyckas inte ens med detta eftersom jag bara kan välja align left, center eller right på tabellen där bilderna är.

Hur ska jag göra på bästa sätt?

Sen skulle jag vilja göra ett litet bildspel så att man kan klicka på de små bilderna för att få upp dom där huset är nu.. kan leta upp ett exempel så ni förstår vad jag menar.

Jag kodar i Dreamweaver och är tacksam för hjälp!

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Hej,

Tabeller är till för tabulär data, inte för att designa utseende på en hemsida. Detta gör du med andra blockelement och CSS regler.

Problem 1: Se ovan.
Problem 2: Använd dig av JavaScript.

Visa signatur

Tillgänglig Python/Django utvecklare - www.roiio.com

Permalänk
Medlem
Skrivet av Cotopaxi:

Hej,

Tabeller är till för tabulär data, inte för att designa utseende på en hemsida. Detta gör du med andra blockelement och CSS regler.

Problem 1: Se ovan.
Problem 2: Använd dig av JavaScript.

Tack för ditt svar
Om vi börjar med problem 1, finns det någonstans jag kan läsa om det? Eller ska jag läsa allt om CSS helt enkelt? Jag har en mall.css där jag har alla färgerna och stil på texten.

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Problem 1:

<!-- box som innehållet ska vara i--> <div style="width:500px;"> <!-- stora bildens div, vänster sida--> <div style="float:left; width:300px;"> stor bild </div> <!-- text div, höger sida--> <div style="float:right; width:200px;"> <span>text om stora bilden?</span> </div> <!-- de andra bilderna som ska ligga under stora bilden. Den gör då ett hopp ner då det inte finns mera plats i bredden. Den hamnar då under den första diven--> <div style="float:left; width:300px;"> Bilder </div> <!-- box avslut--> </div>

Du får ändra efter ditt eget tycke, men nu har du en grund att gå på och hur det kan se ut.

Länkar för att läsa på mera om css och html:

CSS Tutorial

HTML Tutorial

Advanced CSS Layouts: Step by Step

Permalänk
Medlem
Skrivet av tougent:

"Massa hjälp"

Tack för hjälpen, känner att jag har kommit en bit på vägen nu

Såhär ser min kodning ut nu:
Kod @ pici.se

och såhär ser designen ut:
design @ pici.se

och såhär index sidan ut om man öppnar den i IE:
sida.PNG @ pici.se

Det enda som inte blev rätt är att jag vill ha lite mellanrum mellan de 3 bilderna och att allt ska vara i mitten av sidan

Kan jag göra något av detta i css.mall så att jag inte behöver göra samma sak på alla sidorna?

Ska ta o kolla länkarna också så länge, känns som om det behövs!

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Lägg CSS i en egen fil, blir lättare att överskåda och felsöka i framtiden, lixom div style="width: 300px; height: 20px; float: left;" kommer inte säga dig så mycket i framtiden, däremot gör tex div class="content" det.

I CSS:en är det bara att sätta en punkt före class namnet och # före id, tex:

.content { samma som du gör vanliga fall, det som är inom style="" }

Lägg gärna till kommentarer efter avslutad div, ungefär så som du gjort på ett ställe:

<div style="content">

Innehåll och skit

</div><!-- .content --> (jag brukar köra med: <!-- .content, END --> för att ännu förtydliga)

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Permalänk
Medlem
Skrivet av JesperA:

Lägg CSS i en egen fil, blir lättare att överskåda och felsöka i framtiden, lixom div style="width: 300px; height: 20px; float: left;" kommer inte säga dig så mycket i framtiden, däremot gör tex div class="content" det.

I CSS:en är det bara att sätta en punkt före class namnet och # före id, tex:

.content { samma som du gör vanliga fall, det som är inom style="" }

Lägg gärna till kommentarer efter avslutad div, ungefär så som du gjort på ett ställe:

<div style="content">

Innehåll och skit

</div><!-- .content --> (jag brukar köra med: <!-- .content, END --> för att ännu förtydliga)

Jag hänger inte riktigt med, tror jag har missat något. Har inte byggt hemsidan själv från grunden.
Jag har en mall.css och där finns bara färger och stil på texten, och måtten för själva sidan verkar det som.
Hur gör jag om jag vill att några sidor ska vara likadana? Måste jag göra en ny .css och hänvisa till den?
Typ såhär: <link href="css/mall.css" rel="stylesheet" type="text/css" />? Står så längst upp i kodningen. Att den ska hänvisa till mappen css och filen mall.css förstår jag, men inte resten..

Sen finns där en mapp som heter "test" där jag hittar en fil som heter "style.css"..

Såhär ser mall.css ut ungefär: mall.PNG @ pici.se

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Ja du kan lägga till alla andra värden i mall.css.

Tex om du vill att menyn skall se likadan ut på varenda sida så kan du göra såhär på varje sida:

<div class="meny">din meny</div>

Sen i mall.css:

.meny { det du brukar lägga i style="" lägger du här istället }

Då blir menyn likadan på alla sidor du lägger den på, detta gäller alla element och du kan valfritt döpa dom till vad du vill

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Permalänk
Medlem
Skrivet av JesperA:

Ja du kan lägga till alla andra värden i mall.css.

Tex om du vill att menyn skall se likadan ut på varenda sida så kan du göra såhär på varje sida:

<div class="meny">din meny</div>

Sen i mall.css:

.meny { det du brukar lägga i style="" lägger du här istället }

Då blir menyn likadan på alla sidor du lägger den på, detta gäller alla element och du kan valfritt döpa dom till vad du vill

Jag lyckades göra precis som du säger, det går inte att göra så att man slipper skriva
"<div class="meny">din meny</div>" på varje sida också? För menyn i toppen av sidan ska ju se lika dan ut på alla sidorna och.

men sen när jag ska göra kodningen längre upp på sidan i css mallen så funkar det inte

Såhär försöker jag göra i mallen:

.innehåll {
width:500px;
}

.storbild {
float:left;
width:300px;
stor bild
}

och på index sidan skriver jag:

<div class="innehåll">(innehåll)
<div class="storbild">(stor bild)</div>

Blir helt fel!

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

tror inte man kan använda å, ä, ö i CSS, nog darför det blir helt fel!

Vill du gå in på PHP eller annat serversidespråk kan du tex dela upp sidan i 3 olia dokument, tex topp (som inkluderar menyn), mitten och footern, på så sätt slipper du skriva samma kod på endel iaf

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Permalänk
Medlem
Skrivet av JesperA:

tror inte man kan använda å, ä, ö i CSS, nog darför det blir helt fel!

Vill du gå in på PHP eller annat serversidespråk kan du tex dela upp sidan i 3 olia dokument, tex topp (som inkluderar menyn), mitten och footern, på så sätt slipper du skriva samma kod på endel iaf

Tog bort ÅÄÖ men det funkar fortfarande inte
Innehålls diven blir en lika liten div som de andra där den stora bilden ska va osv, den går inte runt om allt

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Du har glömt avsluta "innehåll" diven, dessutom har du skrivit "stor bild" i .storbild i css:en

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Permalänk
Medlem
Skrivet av JesperA:

Du har glömt avsluta "innehåll" diven, dessutom har du skrivit "stor bild" i .storbild i css:en

Ska det vara så då?

<div class="innehåll">(innehåll)</div>
<div class="storbild">(storbild)</div>

Blir innehållsdiven så stor så att den går runt om all text o bilder då?

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem
Skrivet av MORD:

Ska det vara så då?

<div class="innehåll">(innehåll)</div>
<div class="storbild">(storbild)</div>

Blir innehållsdiven så stor så att den går runt om all text o bilder då?

Det beror helt på layouten och hur du vill bygga upp sidan

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Permalänk
Medlem

Var lite att läsa, men ska försöka svara efter det jag tror du vill ha hjälp med.

Citat:

Det enda som inte blev rätt är att jag vill ha lite mellanrum mellan de 3 bilderna och att allt ska vara i mitten av sidan

Kan jag göra något av detta i css.mall så att jag inte behöver göra samma sak på alla sidorna?

Du kan lägga in det i din css.mall om du vill.
För att skapa mellanrum kan man tex använda sig av margin

exempel:
.mellanrum {margin:2px;} - där margin:2px; gör så att du petar ut 2 pixlar från alla sidor. Om du vill peta ut från något speciellt håll använder du margin-left:2px; istället som är vänster, -right (höger) -top (toppen) -bottom (botten). Om du vill ha större mellanrum ökar du bara siffran 2 eller minskar för mindre avstånd.

För att de ska hamna i mitten skriver du .mitten {margin:0 auto;} eller .mittentext {text-align:center;} för din text tex.

Citat:

Ska det vara så då?

<div class="innehåll">(innehåll)</div>
<div class="storbild">(storbild)</div>

Blir innehållsdiven så stor så att den går runt om all text o bilder då?

Ta bort å ä ö och lägg till a o istället. Som jag förstår det som ska innehåll vara den div som allt ska ligga i?
Då ska du inte stänga den som du gör nu utan stänga den efter alla andra divar tex.

<div innehåll> - är den div som har allt i sig
<div storbild> </div> är en div som ligger i innehåll
</div> avslut på innehåll

eller har jag förstått de helt fel nu?

Permalänk
Medlem

EDIT:

Tack för all hjälp

Jag försöker nu att göra en dropdown menu men det går sådär.

Jag har gjort en meny på denna sidan och laddat ner den:
Drop Down Menus || CSS Menu Maker

Står att jag ska kopiera in koden i index.htm "där jag vill ha den"
och lägga mappen "menu" i rootmappen, och där i ligger mappen "images" och filen menu_style.css
När jag följer instruktionerna ser min sida ut såhär:

Imageshack - meny.png

känns som det är i början av menyn som något är fel

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Rad 24 begriper jag inte. Om du vill inkludera en css-fil så skriv det i <head> istället.

<link rel="stylesheet" type="text/css" href="mincssfil.css">

Permalänk
Medlem
Skrivet av Meat:

Rad 24 begriper jag inte. Om du vill inkludera en css-fil så skriv det i <head> istället.

<link rel="stylesheet" type="text/css" href="mincssfil.css">

stod så i instruktionerna, tog bort raden och valde "attach style sheet" i dreamweaver istället
Ta gärna en titt på sidan nu Prisvärd logi Bed & Breakfast mellan Landskrona och helsingborg - Meny

Edit: bilderna tar lång tid att ladda så jag antar att jag får spara dom för weben i photoshop o ladda upp dom igen, annars är jag väl ganska nöjd för tillfället. Där är mer som ska fixas men jag tar en liten paus så länge

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Permalänk
Medlem

Bilderna är förhållandevis enorma. Den storlek du ser på hemsidan är en hoptryckt representation av den egentliga bild som laddas. Mittenbilden är på 1.5 MB och typ sjuttio gånger större än det format den visas i

Den visas som 320x240 men är egentligen 2800x2128 så det du vill göra är att förminska den, sen Spara Som... för att inte förstöra originalet.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Du verkar ha fått det att funka, men byt till Helsingborg med H i <title>, störigt att det står med liten bokstav.

Permalänk
Medlem
Skrivet av Teknocide:

Bilderna är förhållandevis enorma. Den storlek du ser på hemsidan är en hoptryckt representation av den egentliga bild som laddas. Mittenbilden är på 1.5 MB och typ sjuttio gånger större än det format den visas i

Den visas som 320x240 men är egentligen 2800x2128 så det du vill göra är att förminska den, sen Spara Som... för att inte förstöra originalet.

Det är fixat nu! går det snabbt att ladda sidan nu?

Skrivet av Meat:

Du verkar ha fått det att funka, men byt till Helsingborg med H i <title>, störigt att det står med liten bokstav.

har ordnat det också, och det stod ..Helsingborg - Meny överallt innan, det är också fixat.

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB