116 svar · 2 412 visningar · startad av ptr_lks
Hej,
har gjort mitt första försök med 3 raders layout i CSS. Får inte till det, så hoppas på er hjälp :)
gärna med en liten förklaring, så att även jag lär mig lite :stud
Ett tips som både fungerar bra och är väldigt lärorikt är att plocka bort del för del från sidan och se vad som händer, sedan lägger du tillbaka bitar som du tror behövs och så håller du på så ett tag. Du får då bättre inblick i vad koden gör och förhoppningsvis så får du en fungerande hemsida tillslut :)
Försökte kolla igenom din kod, men det var ju bara ett virrvarr och jag gissar på att det är mycket copy-paste?
mozilla skrev:
Ett tips som både fungerar bra och är väldigt lärorikt är att plocka bort del för del från sidan och se vad som händer, sedan lägger du tillbaka bitar som du tror behövs och så håller du på så ett tag. Du får då bättre inblick i vad koden gör och förhoppningsvis så får du en fungerande hemsida tillslut :)
det är så jag har gjort..
mozilla skrev:
Försökte kolla igenom din kod, men det var ju bara ett virrvarr och jag gissar på att det är mycket copy-paste?
Vad menar du med virvarr??
Det enklaste är att helt enkelt flytta upp raden div content högst upp och låta den omsluta hela sidan.
så här:
<body>
<div id="Content">
<div id="header"><img src="spifbanner.jpg" alt="logga" />
<h1>Pojkar p93`s sida i h1</h1></div>
<ul class="menu">
<li><a href="index.html">Hem</a></li>
<li><a href="trupp.htm">Truppen</a></li>
<li><a href="coach.asp">Coachens sida</a></li>
<li><a href="matcher.htm">Matcher</a></li>
<li><a href="tid.htm">Träningstider</a></li>
<li><a href="galleri.htm">Galleri</a></li>
<li><a href="ink1.htm">Länkar</a></li>
<li><a href="gbok.asp">Gästbok</a></li>
</ul>
<h3>Innehållet kommer här med h3</h3>
<p>brödtext</p>
</div>
</body>
</html>
Sedan får du ändra border och sådant som du vill ha det.
Tänk på att h1- h6 bör komma efter varandra som rubriker och att du inte hoppar över h2.
tanten skrev:
Det enklaste är att helt enkelt flytta upp raden div content högst upp och låta den omsluta hela sidan.
så här:
<body>
<div id="Content">
<div id="header"><img src="spifbanner.jpg" alt="logga" />
<h1>Pojkar p93`s sida i h1</h1></div>
<ul class="menu">
<li><a href="index.html">Hem</a></li>
<li><a href="trupp.htm">Truppen</a></li>
<li><a href="coach.asp">Coachens sida</a></li>
<li><a href="matcher.htm">Matcher</a></li>
<li><a href="tid.htm">Träningstider</a></li>
<li><a href="galleri.htm">Galleri</a></li>
<li><a href="ink1.htm">Länkar</a></li>
<li><a href="gbok.asp">Gästbok</a></li>
</ul>
<h3>Innehållet kommer här med h3</h3>
<p>brödtext</p>
</div>
</body>
</html>
Sedan får du ändra border och sådant som du vill ha det.
Tänk på att h1- h6 bör komma efter varandra som rubriker och att du inte hoppar över h2.
tack tanten, det är bättre men ser fortfarande mysko ut i FF och Netscape
Ja det förstår jag. Det var därför jag sa att du skulle fixa med de andra värdena.
Du kanske dessutom bör ha menyn i en egen div.
Det är lite svårt att se resultatet för min del eftersom jag inte har dina bilder.
Men om du tänker dig att content är den diven som du ska ha allt det andra i så kan du i stället för exakta mått på innehållet börja testa med hur stor % av t.ex headern ska vara. Ingenting får ju vara bredare än vad contenten är och då är det ganska fiffigt att räkna med % och så länge du inte vill ha med kolumner så är det lätt.
Ska du göra en riktigt tillgänglig sida så kan du även ange % på contenten. Sätter du bredden på contenten till t.ex 80% och centrerar den så kommer den alltid att visas så oavsett om någon ser den i mobil eller på en jättestor bildskärm.
Så allt som du nu gör är att räkna från contentes sidor och inte från bodyns.
Såg inte att du skickat en ny bild. Är ju ny för dagen här och har inte vant mig vid dessa funktioner.
Din header är ju lika bred som din content + att du har padding 15px på den, så egentligen räcker det med att du raderar padding eller sätter padding-left på 0, eller som jag skrev förut sätt width:en på 100%.
Men detta hade du kanske redan upptäckt...
Det jag ser är att du nog ska göra en "box" till för texten. Om du sätter in en div där så kan du använda många p, nu har du angivit att den ska vara 230px från toppen och då kommer det bli väldigt långa avstånd mellan styckena. Testa med ett <p>till så får du se vad jag menar.
tanten skrev:
Det jag ser är att du nog ska göra en "box" till för texten. Om du sätter in en div där så kan du använda många p, nu har du angivit att den ska vara 230px från toppen och då kommer det bli väldigt långa avstånd mellan styckena. Testa med ett <p>till så får du se vad jag menar.
har redan kommit på med en box till...
skall strax visa, men måste jobba lite först :)
Nu börjar det närma sig utseende jag vill ha...
Men:
Tacksam med hjälp med dessa punkter
Eftersom din meny är exakt i måtten xsom inte stämmer med dina mått på li så måste du göra en div att lägga in menyn i och ha samma bakgrundsfärg som resten
Lägg till
#menu{
width: 100%;
background-color: #283a86;
}
Och byt ut
<div class="menu">
mot <div id="menu">
Hinner inte mer nu, återkommer senare ...
tanten skrev:
Eftersom din meny är exakt i måtten xsom inte stämmer med dina mått på li så måste du göra en div att lägga in menyn i och ha samma bakgrundsfärg som resten
Lägg till
#menu{
width: 100%;
background-color: #283a86;
}
Och byt ut
<div class="menu">
mot <div id="menu">Hinner inte mer nu, återkommer senare ...
fungerar tyvärr endast i IE
Välkommen till wF tanten! :bire Hoppas du kommer att trivas!
Ser att ptr_lks hamnat i goda händer. ;)
mmm... kanon bra hjälp :bire
Nu börjar det likna något, så bra :) Du kanske skulle ändra text-align:center; i p{} till text-align:left:
Nu vet jag inte riktigt vad du gjort.
Du får bara ha de olika id:ena en gång per sida. Varför tog du bort class="menu"?
Så <div id="menu"> finns en gång för mycket...:-) och sådant accepterar inte FF
Ett tips som kanske inte helt handlar om detta men som är en väldigt stor hjälp.
Validera sidan, ta länken och klistra in den någonstans på sidan och validera sedan ofta. Oftast ligger felen i att man glömt något och nu när du gör xhtml-sida så finns det inga genvägar att fuska sig förbi som man kan i html.
Så tycker jag du ska byta ut doctypen. Ska du starta upp en helt ny sida så är det lika bra att sikta högt.
Lägg in den här i stället...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="Sv">
Stöter du på problem så vet du att jag finns:-)
Här är länken till din sidas validering
http://validator.w3.org/check?verbose=1&uri=http%3A//www.polisenbasket-p93.se/test2.html
Vad är det för gul border du pratar om?
p taggarna är bland det viktigaste du har på en sida. Dem ska du kunna floata runt bilder, ha kanter runt, placera bredvid varandra med mera med mera, så försök undvik att ha p ensamt, som jag skrev tidigare skapa en div och lägg in p taggarna i.
till exempel
Ta dessa rader, klistra in dem och lek med dem...
<div id ="text"><p>Du får inte använda stora bokstäver i taggarna!</p>
<p> Matcher på lördag!</p></div>
<div id="sidotext"><p> Så kan vi ha lite bakgrundsfärg på den här texten...</p>
Lägg in detta på sidan och detta i Stylesheeten
#text{ width: 30%; float: left; border: 1px solid #FF6347;}
#sidotext{width: 20%; float:left; background-color:#000;}
#sidotext p{color:#fff; text-align:left;}
För att detta ska funka så måste du radera
ditt p i stylesheeten och
lägga in dessa rader i body i stället
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000033;
Så undvik att koda med hack. Strunta i dem som kör med IE5... Du kommer bara få problem med dem snart när webläsarna kommer ut med nya versioner.
Hoppas jag skrivit rätt nu... Har inte kontrollerat det.
Tack du är en riktig pärla :birp
tanten skrev:
Nu vet jag inte riktigt vad du gjort.
Du får bara ha de olika id:ena en gång per sida. Varför tog du bort class="menu"?
Så <div id="menu"> finns en gång för mycket...:-) och sådant accepterar inte FF
jag har väl bara en <div id="menu"> ? den andra är väl <ul id="menu">
Validera sidan, ta länken och klistra in den någonstans på sidan och validera sedan ofta
hur menar du?
Förrästen:
varför har du med "float"? vilka fördelar ser du med float?
även fast jag ändrade tillbaka, så går inte menyn ända ut i FF och Netscape
