Hej,
Jag är rätt ny i webdesign grejen så jag behöver hjälp med en sak som kanske är jätte enkelt. Jag gör min hemsida och här har jag designen men jag vet inte hur exakt jag ska göra.
Hur kan jag lägga upp mina tabeller?
Jag vill att när man klickar på de små karaktärerna så ska det komma en meny med små ikoner på bandet nederst som ska gå att scrolla med små egen gjorda knappar. Hur gör jag scrollningen?
Sen vill jag att när jag för markören över en ikon att det ska visas en bild med info i den nedersta fältet, som på skissen. Hur gör jag det?
Jag är jätte tacksam för all råd och hjälp.
här är skissen:
http://www.atumanimation.com/layout11 copy.jpg
Det som jag har mest problem med är just scrollen med egna knappar på sidorna.
Jag vill ha nåt liknande det här:
https://www.filmtecknarna.se
när man klickar på t.ex. New projects, så kommer det där raden med små scrollar och thumbnails. Hur gör man det?
Tutorials funkar bra med.
tydalMedlem sedan juni 20034 013 inlägg Tabeller för webbdesign är 90-tal, jag skulle använda css i stället, så här:
http://www.tydal.nu/layouttest.html
tack för svaret.
Jag kan inte mycket om CSS. Kan du berätta lite mer om hur du gjorde?
(jag varnade att jag är nybörjare )
tantenMedlem sedan nov. 20051 596 inlägg Tittar man i koden för just den ramen med bilderna som scrollar så hittar man denna länk...http://www.dyn-web.com/dhtml/scroll/
och då tillhör nog din fråga mer till javascriptforumet, eller vill du att vi ska hjälpa dig med en css-lösning i stället? Har du förresten sett sidan du gav exempel på i FF? Finns lite problem där...
tydalMedlem sedan juni 20034 013 inlägg Titta på html-koden först. (Visa, Källa i Internt Explorer). Som du ser är den ganska enkel. Det beror på att man gör större delen av jobbet i css. Notera att sidan består av ett antal fyrkanter. Dessa kallas boxar och skrivs som <div> i html. Notera också att de har varsitt id (header, menu, content). Det är det id:t man använder i css för att referera till olika delar i html-koden.
Titta nu på css-koden:
http://www.tydal.nu/layouttest.css
Som du ser finns här först body och div. De anger generella värden som gäller för bodyn ("hela sidan") och alla div-taggar. Sedan kommer id:na.
I css skriver man olika attribut och ger dem värden, samt kopplar dem till något ställe i html-koden. Exempelvis har jag satt background-color på några ställen för att få de olika bakgrundsfärgerna. Jag har också satt höjd och bredd, i pixlar.
tantenMedlem sedan nov. 20051 596 inlägg ooops drar mig ur... kommer säkert fram till en mycket snyggare lösning med Tydal. än med en massa javascript... :) Såg inte att han skrev. Sorry
FuelMedlem sedan okt. 20001 285 inlägg Det bästa du kan göra Sofia är att göra det rätt från början, styla med css och se till att sidan är semantiskt rätt. Finns många sajter som har cool design och är äckligt snygga med bara css och är trots detta lätt navigerade t.o.m när css är avstängt. Du kommer att ha igen detta när du har fått kläm på det, snabbare sidor, lättare att uppdatera sidorna etc för att inte tala om hur lätt du kan switcha stil på sidan med en knapptryckning :birp
Fuel, det där känns som det är exakt så jag vill ha det. Jag är ingen webdesignare direkt dock så det känns som ni people pratar mer och mer utomjordiska till mig. Jag utbildade mig i html för länge sedan och har kört typ enkelt-enkelt sen dess, men visst skulle jag vilja ha lite snyggare och mer funktionel sida. Jag jobbar mest med illustration och animerad film så kod-världen är ren grekiska för mig.
Så kan man lägga in CSS kod i html sidor eller, hur gör man? Finns det några tutorials som man kan titta på?
tanten: tack för länken, det fanns en exampel på scroll som jag vill ha men jag har ingen anning om det är bättre(lättare) att göra det med Java eller CSS?!
FuelMedlem sedan okt. 20001 285 inlägg Ett simpel document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sofias Sida</title>
<!- så här kan man inkludera en stilmall -->
<link href="minstil.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
<h1>Sofias sida</h1>
</div>
<div id="menu">
<ul>
<li>Länk 1</li>
<li>Länk 2</li>
</ul>
</div>
<div id="content">
<h2>Innehåll</h2>
<p>Hej & välkommen till Hajk..</p>
</div>
</div>
</body>
</html>
och en stilmall: minstil.css
body {
background-color:#ffffff;
}
#header {
background-image:url(dinbild.png);
height:70px;
}
#menu {
background-color:#eeeeee;
}
#content {
background-color:#ffcccc;
}
h1 {
color:#009933;
}
p {
font-family:verdana, arial;
font-size:1em;
color:#000000;
}
Tips: använd tabeller för data inte design..
En guide : http://www.htmldog.com/guides/htmlbeginner/
Se även "Den stora tips tråden.." längst upp i detta forum, mkt bra länkar.
tantenMedlem sedan nov. 20051 596 inlägg Hej Sofia... Om man inte hållit på med hemsidor förut, så är det tycker jag enklast att börja med html utan javascript men med css.
Innan du kommer för långt med funderingarna hur sidan ska se ut, så börja med ett html-dokument som är helt ostylat. Tänk efter vad som ska finnas på sidan, vilka rubriker ska sidan ha? börja med h1 och gå neråt om du ska ha fler rubriker.Lägg text och bilder i <p> tills vidare. När du är klar ska du ha en sida som sidor såg ut förr. Allt smäckat till vänsterkanten. ful text och bilder uppradade eftervarandra längs med sidan.
Koppla bort bildvisningen och läs igenom vad som står där. Om någon bara får höra din sida så är det så som du ser den nu, som den personen kommer höra den. Är innehållet logiskt. Eller blir det konstiga hopp, säger bilderna något om vad de föreställer...
Sedan till designen:
Viktigast är kanske att du vet vilka målgrupper du vänder dig till och då tänker jag i första hand på de som normalt kan ha svårt att ta till sig innehåll på en hemsida, personligen tycker jag att illustrationer och filmer ska vända sig till funktionshindrade i hög grad. Det känns nästan som lite vår plikt att göra hemsidor "roliga" för dem som har liten möjlighet att se saker på annat sätt än just genom webben.
Vad bör man tänka på då? Jo att anpassa sidans innehåll för att passa deras skärmar. Fortfarande är det 640-skärmar som gäller för dem som har sitt tangenbord på skärmen och inte kan använda mus. Låter fjuttigt för dem som har större än 1200-skärmar.
Men då finns det något som kallas float i css.
Så istället för att ha en sådan där "scrollbilds-rad", så skulle du kunna tänka ut ett annat sätt att visa dina illustrationer, t.ex. genom att lägga dem i en div bredvid den första diven som är 640 bred... vilket då gör att den kommer att fylla ut sidan för de som har breda skärmar, men lägga sig under när det är smalare skärmar.
Gjorde en snabbskiss på grunden Tydals förslag, för att visa vad jag menar... utan en tanke på att göra något snyggt eller något som fungerar med olika storlekar på fonten... bara principen. förslag Öppna sidan stort först och dra sedan ihop den sidledes, när scrollen dyker upp nertill är det 640-skärmstorlek på fönstret.
Var lite sådana idéer jag ville väcka hos dig nu när du är i början av din "karriär". Att dela upp sin sida så här, så den visas olika i olika fönster, är nog bland det "senaste" hos de som vill göra tillgängliga hemsidor och det börjar dyka upp lite tutorials här och där.
Vill du kika närmare på hur jag gjort så finns css i head den här gången så det är bara att trycka på "visa källa". :) :birp Blev mycket...
Javascript är inte användarvänligt, om man inte kodar noscript-variant också... nu slutar jag för denna gång.
Glömde skriva att jag stoppade vid 640-skärm, för jag tror det är få som vill surfa dit med mobil eller handdator:-)
FuelMedlem sedan okt. 20001 285 inlägg Stabilt ! Jag kanske matade på för hastigt ... lyssna på Tanten nu Sofia ;)
tack så mycket tanten och fuel. Nu har jag en del att ta i.
Så koolt exampel, tanten, med de bildrutorna som flyttar sig.
preyMedlem sedan jan. 2002341 inlägg Hej igen.
Nu är jag här igen. Jag har börjat få greppet om CSS lite iaf. Men jag förstår fortfarande inte hur kan jag designa tabellerna med div.
cayaMedlem sedan aug. 20051 448 inlägg hej sofia
bara ett klargörande - tabeller och div är två skilda saker.
en tabell kan liknas med ett excel-blad och används som ett sådant
en div är som ett oh-ark, du kan lägga flera ovanpå varandra för att få olika element att ligga i lager. tex ett med en sorts bakgrund men ingen text, en annan med menyn, en med en annan bakgrund men med text etc... hur de ligger styr du med css.
nu är jag nyfiken på hur långt har du kommit med din sida...
http://www.webforum.nu/attachment.php?attachmentid=12348&stc=1 Hej Caya,
Jo, jag har börjat så småningom fatta skyllnaden.
Men jag har inte hunnit alls långt med hemsidan. Jag har dessutom tröttnat på designen under tiden så jag ville föreknla den ännu mer. Har haft annat att göra under tiden så nu är det dax att ta tag i det igen.
här är det den nya designen. Det här är bara en jpg bild.
Men hur ska jag kunna nu göra menyn så med div?
spelar det för roll vad man har för ordning på tagarna i css filen?
cayaMedlem sedan aug. 20051 448 inlägg du skulle kunna göra såhär
#meny {
width:800px; margin:0; padding:0;
}
#meny ul {
list-style:none;
}
#meny li {
float:left;
font:bold 30px Verdana, Arial, Helvetica, sans-serif;
margin:0 0 5px 0;
}
#meny a:link, #meny a:visited, #meny a:active {
display:block; color:#000; background:#fff;
padding:3px;
}
#meny a:hover {
display:block; color:#fff; background:#000;
padding:3px;
}
<div id="meny">
<ul>
<li><a href="/">home</a></li>
<li><a href="/news/">news</a></li>
<li><a href="/projects/">projects</a></li>
<li><a href="/staff/">staff</a></li>
<li><a href="/contact/">contact</a></li>
</ul>
</div>
Tack så mycket.
Jag testar nu.
Det funkade inte så bra. Menyn blev inte centrerad.
