Just nu i M3-nätverket
Jump to content

Synpunkter på denna layout


Swe_Tiger

Recommended Posts

Hej

 

Har börjat skissa på en design till min website. Är ganska ny på css, och har lite problem med att få css-boxarna att hamna där jag vill. Men tycker nu att det ser hyffsat bra ut. Kommentera gärna, med förslag på förbättringar etc.

 

http://jonpet.se

 

[inlägget ändrat 2008-04-24 15:35:07 av Swe_Tiger]

Link to comment
Share on other sites

Hej.

 

Ok start, men mycket frågetecken hos mig.

 

1. Om validering är viktigt för dig (att HTML-koden är valid HTML 4.01 Strict som du satt) så ta en titt här och fixa till felen:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fjonpet.se%2F

Bl a enkla fel som att du använder body background=xxx.gif" när detta borde anges i cssen istället

body{background: url(bilden.gif) repeat; }

 

2. Varför du gör så här fattar jag inte alls

<div class="roundbottom">
<div class="r12"></div>
<div class="r11"></div>
<div class="r10"></div>
<div class="r9"></div>
<div class="r8"></div>
<div class="r7"></div>
<div class="r6"></div>
<div class="r5"></div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>

 

3. Sedan används tabeller lite här och var utan någon nytta

<div id="sidhuvud">
<table><tr><td width="600" height="85"></td></tr></table> 
</div>

och

 

<table bgcolor="#999999" cellpadding="0" width="598"><tr><td width="10"></td><td>© 2007-2008 Jonpet.se</td></table>

 

Menyn går över gränserna i FF 2.0.0.14.

 

Designen har jag ingen synpunkt på egentligen.

 

Bra jobbat för övrigt!

 

Link to comment
Share on other sites

Jo, det är säkert lite fel i koden här och där, varför menyn blir cp i Firefox fattar jag inte. Hur fixar jag detta?

 

Jag var tvungen att använda tabeller på vissa ställen för det blev helt fel annars.

 

Jag får t.ex. inte in någon text i sidfoten som har "roundbottoms" så jag var tvungen att lägga in en tabell direkt ovanför.

 

Jag var också tvungen att lägga in en tabell i sidhuvudet för att bakgrunden (topbannern) skulle fyllas ut.

 

 

Jag hade även problem förut med att boxarna inte liksom fäste i varandra utan det blev som en glipa emellan, vilket var helt obegripligt.

 

Gjorde en validering på index.htm och då blev det helt cp. Bl.a. sköts menyn och sidfoten åt sidan.

 

[inlägget ändrat 2008-04-24 17:58:03 av Swe_Tiger]

[inlägget ändrat 2008-04-24 18:47:37 av Swe_Tiger]

Link to comment
Share on other sites

Hej igen.

 

Man är sällan "tvungen" att använda tabeller bara för att du inte får det att fungera. Då gör du antagligen på fel sätt, tyvärr.

 

Jag kan kolla på det och se om jag kan lämna en lösning på ditt problem.

Har du ngt emot xhtml 1.0 strict ?

 

ps. Undvik att använda order "cp" är du vänlig. Det är inte särskilt trevligt. ds

 

Link to comment
Share on other sites

Man är sällan "tvungen" att använda tabeller bara för att du inte får det att fungera. Då gör du antagligen på fel sätt, tyvärr.

 

Jo, frågan är bara vad jag gör för fel, det fattar jag inte.

 

 

Jag kan kolla på det och se om jag kan lämna en lösning på ditt problem.

Har du ngt emot xhtml 1.0 strict ?

 

Det vet jag inte, men behärskar bara html.

 

 

PS. Det var inte dig jag kallade "cp". Eller är du rädd för att min meny ska bli kränkt?

 

[inlägget ändrat 2008-04-24 19:54:44 av Swe_Tiger]

Link to comment
Share on other sites

Css

* {padding:0; margin:0;}

body {
padding: 20px 0;
font-family: Arial, Verdana, Helvetica, sans-serif;	
font-size: 0.7em;
background: url(pixel_ruta10.gif);
text-align: center;
}

h2 {margin: 0 0 0.5em 0;
font-size: 2.5em;}
h3 {margin: 1em 0 0.5em 0;
font-size: 1.5em;}
h4 {margin: 1.5em 0 0.5em 0;
font-size: 1em;}

p {line-height: 1.8em;
margin: 0 0 5px 0;}


/* sidlayout */
#wrapper {
width: 598px;
margin: 0 auto;
padding: 0;
text-align:left;
background: #ffffff; 
border: 1px solid #666666;
border-bottom:0;
}

#header {}
#header h1 a{
display: block;
background: url(http://www.jonpet.se/topbanner.jpg) no-repeat;
background-repeat: no-repeat;
height: 90px;
margin-bottom: 15px;
text-indent: -9999px;
}

#content {
width: 578px;
padding: 10px;	
background: #ffffff;
float:none;
clear: both;}

#footer {
display: block;
margin: 0 auto;
width: 600px;
background: url(footer-bg.gif) no-repeat bottom left;
height: 50px;
}
#footer p {padding: 10px 10px 0 ;}

/* CSS menymall */

#menu {
display: block;
width: 598px;
background-color: #999999;
}
#menu ul{
width: 100%;
background-color: #999999;
font: 95% Trebuchet MS, Verdana, sans-serif;
}

#menu li{display: inline; background-color: #999999;}
#menu ul a{float: left; background: #999999;
 text-decoration: none;
padding: 0.4em 2.9em;
border: 1px solid #666666;
margin-left: -2px;}
#menu a{color: #000000;}
#menu a:hover{border: 1px solid #000000;}

#menu ul #nav-home a {margin-left: 34px;}

#home #menu ul #nav-home a,
#films #menu ul #nav-filmse a,
#music #menu ul #nav-music a,
#gallery #menu ul #nav-gallery a,
#contact #menu ul #nav-contact a {
background: #bbbbbb;
color: #000000;}



 

Det vet jag inte, men behärskar bara html.

HTML

(xhtml är typ som HTML man mera strikt hur man skriver och använder attribut m m )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title> new document </title>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 <meta name="author" content="JonPet" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <link href="Jonpet_files/style.css" rel="stylesheet" type="text/css"/>
</head>
<body id="home">
 <div id="wrapper">
<div id="header"><h1><a href="#">Jonpet</a></h1></div>
<div id="menu">
	<ul>
		<li id="nav-home"><a href="/sida1.htm"><b>:: home</b></a></li>
		<li id="nav-films"><a href="/sida2.htm"><b>:: films</b></a></li>
		<li id="nav-music"><a href="/sida3.htm"><b>:: music</b></a></li>
		<li id="nav-gallery"><a href="/sida4.htm"><b>:: gallery</b></a></li>
		<li id="nav-contact"><a href="/sida5.htm"><b>:: contact</b></a></li>
	</ul>
	<div style="clear: both;"></div>
</div>
<div id="content">
	<h3>Home</h3>
	<h4>CSS tar kontroll över dina sidor</h4>
	<p> CSS - (Cascading Style Sheets) är stilmallar som tillåter både
	  den som skapar dokument och den som läser dem att använda sin egen
	  stilmall. I praktiken har CSS använts till att formge dokument när
	  det gäller färg, teckensnitt, justering av text och objekt mm. En
	  enda CSS-mall kan styra tusentals dokument och det är då enkelt
	  att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit
	  HTML ett steg längre och möjliggjort formateringar och effekter som
	  inte fanns tidigare. En av fördelarna med CSS är att flera mallar
	  kan användas och de har då företräde inbördes så att
	  en "huvudmall" med de övergripande formateringarna kan ersättas på en
	  lägre nivå av en "lokal mall" som då gäller före
	  huvudmallen. </p>
	<h4>Separera innehåll och struktur </h4>
	<p>CSS är liksom XML/XHTML ett steg mot att separera innehåll och
	  struktur i dokument. All formatering bör ske i externa mallar vilket gör
	  att mängden kod i själva dokumentet minskar avsevärt och gör
	  att sidorna laddas snabbare i webläsaren. Då samma mall används
	  för varje dokument behöver inte webläsaren läsa in formateringsanvisningar
	  på nytt varje gång en ny sida anropas. </p>
	<h4>Tillgänglighet</h4>
	<p> En målsättning med CSS är att läsaren ska kunna påverka
	  utseendet av dokumentet när sidorna läses i webläsaren vilket
	  inte alltid har varit populärt bland författarna av dokumenten då förändringar
	  kan påverka webplatsens layout. Detta har i praktiken inneburit att vissa
	  grupper har utestängts från att använda många platser
	  på Internet. Syn- och hörselskadade och andra har haft svårigheter
	  att ta del av innehåll på sidorna trots att det finns programvaror
	  för tolkning av innehåll på websidor. Tillgänglighet är
	  ett av ledorden när framtidens webplatser ska utformas och då gäller
	  detta inte bara de som har svårt att läsa dokumenten på en
	  PC. </p>
</div>
 </div>
 <div id="footer"><p>© 2008 JonPet</p></div>	
</body>
</html>

 

Jo, frågan är bara vad jag gör för fel, det fattar jag inte.

Tabellerna, som jag skrev, behövs inte. Att se till att bredden hålls kan man se till i cssen

 

 

PS. Det var inte dig jag kallade "cp". Eller är du rädd för att min meny ska bli kränkt?

Jag blir inte kränkt, din meny skiter jag i, men det passar aldrig in att säga det ordet och det är så onödigt.

Lär dig det redan nu.

 

bakgrundsbild till footern bifogad.

 

[bild bifogad 2008-04-24 20:56:59 av Jonas_Bo]

 

edit: fix för FF

[inlägget ändrat 2008-04-24 21:14:25 av Jonas_Bo]

1048562_thumb.jpg

Link to comment
Share on other sites

Just det, det glömde jag skriva.

Jag har fixat menyn så att för varje ny sida du har, skall du sätta ett id i bodyn

 

<body id="home"> för förstasidan,

<body id="music"> för musiksidan,

<body id="gallery"> för gallery osv.

Då lyser den upp rätt knapp automatiskt.

 

 

Link to comment
Share on other sites

Ledsen, din kod verkar tyvärr inte fungera.

 

 

Såhär blev det när jag använde din kod:

 

 

[bild bifogad 2008-04-25 00:48:31 av Swe_Tiger]

 

Jag blir inte kränkt, din meny skiter jag i, men det passar aldrig in att säga det ordet och det är så onödigt.

Lär dig det redan nu.

 

Hahaha, jag använder det ordet så mycket jag vill :D

[inlägget ändrat 2008-04-25 00:52:33 av Swe_Tiger]

1048607_thumb.jpg

Link to comment
Share on other sites

Koden fungerar toppen! Testade i IE6 och FF2

 

Nix, tyvärr inte. Hela min design är borta. Det är bara text uppradat. Blir likadant både i FF och IE7.

 

Link to comment
Share on other sites

Hela min design är borta. Det är bara text uppradat.
Det beror nog på att din css-fil inte laddas in.
<link href="Jonpet_files/style.css" rel="stylesheet" type="text/css"/>

ska antagligen vara

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

(eller korrekt sökväg till style.css)

 

/Cluster

------------------------------------------------------

I do not fear computers. I fear the lack of them

--------> http://eforum.kicks-ass.net <---------

 

[inlägget ändrat 2008-04-25 12:55:13 av Cluster]

Link to comment
Share on other sites

Sluta upp allihop med skällsord!

Oavsett om det förekommer smileys eller inte så skapar det en otrevlig stämning.

 

Läs igenom reglerna en gång till //eforum.idg.se/Eforumintro.asp#Del8 särskilt regel 2.

 

Om man känner någon har Celebral Pares så är det inte trevligt att få den personen jämförd med webbsidor som inte fungerar som de ska.

 

Cecilia - Huvudmoderator för Eforum

 

Link to comment
Share on other sites

Japp, det var nog sökvägen som var fel, ändrade den.

Men det blir fortfarande helt fel, menyn hamnar t.ex. helt fel. Sidfoten synns inte.

 

Såhär ser det ut med Jonas_bo´s kod:

 

 

 

[bild bifogad 2008-04-25 13:21:18 av Swe_Tiger]

[inlägget ändrat 2008-04-25 13:22:06 av Swe_Tiger]

1048689_thumb.jpg

Link to comment
Share on other sites

Så ser det inte ut för mig när jag testar Jonas_bo´s kod.

 

Att sidfoten inte syns beror nog på att du inte sparat ned den bild som han har använt. Se gemet i hans inlägg.

 

/Cluster

------------------------------------------------------

I do not fear computers. I fear the lack of them

--------> http://eforum.kicks-ass.net <---------

 

Link to comment
Share on other sites

Testa att ändra

[log]style.css:

* {padding:0; margin:0;}

body {
padding: 20px 0;
font-family: Arial, Verdana, Helvetica, sans-serif;	
font-size: 0.7em;
background: url(pixel_ruta10.gif);
text-align: center;
}

h2 {margin: 0 0 0.5em 0;
font-size: 2.5em;}
h3 {margin: 1em 0 0.5em 0;
font-size: 1.5em;}
h4 {margin: 1.5em 0 0.5em 0;
font-size: 1em;	}
p {line-height: 1.8em;
margin: 0 0 5px 0;}


/* sidlayout */
#wrapper {
width: 598px;
margin: 0 auto;
padding: 0;
text-align:left;
background: #ffffff; 
border: 1px solid #666666;
border-bottom:0;
}

#header {}
#header h1 a{
display: block;
background: url(topbanner.jpg) no-repeat;
background-repeat: no-repeat;
height: 90px;
margin-bottom: 15px;
text-indent: -9999px;
}

#content {
width: 578px;
padding: 10px;	
background: #ffffff;
float:none;
clear: both;}

#footer {
display: block;
margin: 0 auto;
width: 600px;
height: 50px;
background: url(footer-bg.jpg) no-repeat bottom left;
}
#footer p {padding: 10px 10px 0 ;}

/* CSS menymall */

#menu {
display: block;
width: 598px;
background-color: #999999;
}
#menu ul{
width: 100%;
background-color: #999999;
font: 95% Trebuchet MS, Verdana, sans-serif;
}

#menu li{display: inline; background-color: #999999;}

#menu ul a{float: left; background: #999999;
text-decoration: none;
padding: 0.4em 2.9em;
border: 1px solid #666666;
margin-left: -2px;
font-weight:bold;
}

#menu a{color: #000000;}
#menu a:hover{border: 1px solid #000000;}

#menu ul #nav-home a {margin-left: 34px;}

#home #menu ul #nav-home a,
#films #menu ul #nav-filmse a,
#music #menu ul #nav-music a,
#gallery #menu ul #nav-gallery a,
#contact #menu ul #nav-contact a {
	background: #bbbbbb;
	color: #000000;
	}

 

new-page.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Jonpet</title>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 <meta name="author" content="JonPet" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body id="home">
 <div id="wrapper">
<div id="header"><h1><a href="#">Jonpet</a></h1></div>
<div id="menu">
	<ul>
		<li id="nav-home"><a href="/sida1.htm">:: home</a></li>
		<li id="nav-films"><a href="/sida2.htm">:: films</a></li>
		<li id="nav-music"><a href="/sida3.htm">:: music</a></li>
		<li id="nav-gallery"><a href="/sida4.htm">:: gallery</a></li>
		<li id="nav-contact"><a href="/sida5.htm">:: contact</a></li>
	</ul>
	<div style="clear: both;"></div>
</div>
<div id="content">
	<h2>Home</h2>
	<h3>CSS tar kontroll över dina sidor</h3>
	<p> CSS - (Cascading Style Sheets) är stilmallar som tillåter både
	  den som skapar dokument och den som läser dem att använda sin egen
	  stilmall. I praktiken har CSS använts till att formge dokument när
	  det gäller färg, teckensnitt, justering av text och objekt mm. En
	  enda CSS-mall kan styra tusentals dokument och det är då enkelt
	  att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit
	  HTML ett steg längre och möjliggjort formateringar och effekter som
	  inte fanns tidigare. En av fördelarna med CSS är att flera mallar
	  kan användas och de har då företräde inbördes så att
	  en "huvudmall" med de övergripande formateringarna kan ersättas på en
	  lägre nivå av en "lokal mall" som då gäller före
	  huvudmallen. </p>
	<h3>Separera innehåll och struktur </h3>
	<p>CSS är liksom XML/XHTML ett steg mot att separera innehåll och
	  struktur i dokument. All formatering bör ske i externa mallar vilket gör
	  att mängden kod i själva dokumentet minskar avsevärt och gör
	  att sidorna laddas snabbare i webläsaren. Då samma mall används
	  för varje dokument behöver inte webläsaren läsa in formateringsanvisningar
	  på nytt varje gång en ny sida anropas. </p>
	<h3>Tillgänglighet</h3>
	<p> En målsättning med CSS är att läsaren ska kunna påverka
	  utseendet av dokumentet när sidorna läses i webläsaren vilket
	  inte alltid har varit populärt bland författarna av dokumenten då förändringar
	  kan påverka webplatsens layout. Detta har i praktiken inneburit att vissa
	  grupper har utestängts från att använda många platser
	  på Internet. Syn- och hörselskadade och andra har haft svårigheter
	  att ta del av innehåll på sidorna trots att det finns programvaror
	  för tolkning av innehåll på websidor. Tillgänglighet är
	  ett av ledorden när framtidens webplatser ska utformas och då gäller
	  detta inte bara de som har svårt att läsa dokumenten på en
	  PC. </p>
</div>
 </div>
 <div id="footer"><p>© 2008 JonPet</p></div>	
</body>
</html>

[/log]

 

[edit:] Av någon anledning lägger eforums-kod-ruta in ett semikolon sist i första raden för new-page.html det ska du ta bort.

 

/Cluster

------------------------------------------------------

I do not fear computers. I fear the lack of them

--------> http://eforum.kicks-ass.net <---------

 

[inlägget ändrat 2008-04-25 14:02:36 av Cluster]

Link to comment
Share on other sites

Hjälper tyvärr inte så mkt, se själv:

 

www.jonpet.se/new-page.html

 

 

Jag föredrar nog min gamla kod, bara man fixar så att menyn hamnar rätt i FF. Har det nåt med Em eller Px att göra?

 

[inlägget ändrat 2008-04-25 14:06:42 av Swe_Tiger]

Link to comment
Share on other sites

Hjälper tyvärr inte så mkt, se själv
Det ser väl mycket bättre ut?

 

Testa ändra style.css:

* {padding:0; margin:0;}

body {
padding: 20px 0;
font-family: Arial, Verdana, Helvetica, sans-serif;	
font-size: 0.7em;
background: url(pixel_ruta10.gif);
text-align: center;
}

h2 {margin: 0 0 0.5em 0;
font-size: 1.5em;}
h3 {margin: 1em 0 0.5em 0;
font-size: 1em;}
h4 {margin: 1.5em 0 0.5em 0;
font-size: 0.9em;	}

p {line-height: 1.8em;
margin: 0 0 5px 0;}


/* sidlayout */
#wrapper {
width: 598px;
margin: 0 auto;
padding: 0;
text-align:left;
background: #ffffff; 
border: 1px solid #666666;
border-bottom:0;
}

#header {}
#header h1 a{
display: block;
background: url(topbanner.jpg) no-repeat;
background-repeat: no-repeat;
height: 90px;

text-indent: -9999px;
}

#content {
width: 578px;
padding: 10px;	
background: #ffffff;
float:none;
clear: both;}

#footer {
display: block;
margin: 0 auto;
width: 600px;
height: 30px;
background: url(footer-bg.jpg) no-repeat bottom left;
text-align:left;
}
#footer p {text-indent:10px;}

/* CSS menymall */

#menu {
display: block;
width: 598px;
background-color: #999999;
}
#menu ul{
width: 100%;
background-color: #999999;
font: 95% Trebuchet MS, Verdana, sans-serif;
}

#menu li{display: inline; background-color: #999999;}

#menu ul a{float: left; background: #999999;
text-decoration: none;
padding: 0.4em 2.9em;
border: 1px solid #666666;
margin-left: -2px;
font-weight:bold;
}

#menu a{color: #000000;}
#menu a:hover{border: 1px solid #000000;}

#menu ul #nav-home a {margin-left: 34px;}

#home #menu ul #nav-home a,
#films #menu ul #nav-filmse a,
#music #menu ul #nav-music a,
#gallery #menu ul #nav-gallery a,
#contact #menu ul #nav-contact a {
	background: #bbbbbb;
	color: #000000;
	}

 

Jag föredrar nog min gamla kod
Men den var ju som sagt förskräcklig (inget illa menat).

 

/Cluster

------------------------------------------------------

I do not fear computers. I fear the lack of them

--------> http://eforum.kicks-ass.net <---------

 

[inlägget ändrat 2008-04-25 14:28:24 av Cluster]

Link to comment
Share on other sites

Testa ändra style.css:

 

Oj, nu hamna menyn rätt , vad var det som var fel i jonasbo-koden?

 

Men den var ju som sagt förskräcklig (inget illa menat).

 

Den såg bättre ut i IE än jonasbos kod iaf ;)

 

Du måste gjort några ändringar i hans kod så fick menyn att hamna rätt.

 

Link to comment
Share on other sites

Oj, nu hamna menyn rätt , vad var det som var fel i jonasbo-koden?
Mins faktiskt inte vad det var jag ändrade, men du kan ju jämföra koderna själv för att se det.

 

Den såg bättre ut i IE än jonasbos kod iaf
Nej, koden såg inte bra ut! Det rendrerade resultatet kanske såg bättre ut (i IE), men det är en helt annan sak :)

 

/Cluster

------------------------------------------------------

I do not fear computers. I fear the lack of them

--------> http://eforum.kicks-ass.net <---------

 

Link to comment
Share on other sites

Mins faktiskt inte vad det var jag ändrade, men du kan ju jämföra koderna själv för att se det.

Okej

 

Nej, koden såg inte bra ut! Det rendrerade resultatet kanske såg bättre ut (i IE), men det är en helt annan sak

 

Det var det jag menade, att slutresultatet såg bättre ut. Jag skiter väl i hur koden ser ut bara det renderade resultatet är bra så ;)

 

Du vet möjligtvis inte hur man får menyn till vänster? Just nu är den ju centrerad.

 

Och varför måste man använda en bild till sidfoten? Är inte det onödigt?

 

 

 

[inlägget ändrat 2008-04-25 15:40:24 av Swe_Tiger]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.


×
×
  • Create New...