38 svar · 1 744 visningar · startad av Fireh · sida 2 av 2
tanten skrev:
Hittade den här länken i ett annat forum
http://hemsida.net/tua/forum/index.php?topic=22.new
TACK!! :f
Det funkade!! :D Tänk att det kan vara så enkelt.
Har du gett oss någon länk till din sida ännu... eller har jag missat det?
Om du menade min sida så finns den i min signatur... :)
Problem 1
Ett problem är att jag inte ser någon större skillnad.
Flaggorna ligger i den ordning du vill.
Är det avstånd till text och liknande du menar?
Du ska ta bort border=0 i koden och ha border:none; i css.
Förslagsvis img{}
I den kan du också fylla i med margin och padding eller vad du nu vill förändra.
Inte ser skillnaden...? Ja, allt ligger i rätt ordning i båda.
Men funktionsmässigt måste du väl ändå se nån skillnad?
Den CSS-baserade trycker ihop allt i en enda hög med minimal höjd.
Den tabell-baserade varierar höjden efter fönstrets storlek.
Det är så jag vill ha det, fast helst utan tabell (om det går).
CSS-baserad
Tabell-baserad (så här ska det fungera)
Dvs... om man har 800x600 i upplösning ska allt dras ut på höjden så att flaggorna är längst ner på skärmen. Om man har 1280x1024 ska samma sak hända där. Den med CSS ändrar inte storlek, den är statisk. Enklast syns det om du ändrar storleken på IE-fönstret, så ser du att den med tabell ändrar storlek.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<style type="text/css">
html { height:100%; background:gray url(img/bg_grad.png); text-align:center; }
body { display:table; background-color:#acacac; width:800px; height:100%; margin:0 auto; padding:0; }
body > * { display:table-row; }
img { border-style:none; }
li { display:inline; }
</style>
<title>Namn</title>
</head>
<body>
<h1><img src="img/logo.gif" alt="Företag" width="500" height="112"></h1>
<p><a href="start.asp?lang=en" hreflang="en"><img src="img/m-en.gif" alt="en"></a></p>
<p lang="en">Please choose your language</p>
<ul>
<li><a href="start.asp?lang=dk" hreflang="dk"><img src="img/m-dk.gif" alt="dk"></a></li>
<li><a href="start.asp?lang=fi" hreflang="fi"><img src="img/m-fi.gif" alt="fi"></a></li>
<li><a href="start.asp?lang=is" hreflang="is"><img src="img/m-is.gif" alt="is"></a></li>
<li><a href="start.asp?lang=no" hreflang="no"><img src="img/m-no.gif" alt="no"></a></li>
<li><a href="start.asp?lang=se" hreflang="se"><img src="img/m-se.gif" alt="se"></a></li>
</ul>
<p>Namn © 2006</p>
</body>
</html>
Humm... blev ju annorlunda i alla fall...
Innehållet ligger dock lika statiskt fast som tidigare...
Border på flaggorna verkade inte försvinna med "border-type:none;".
Oj, border-type ska förstås vara border-style. Fixat.
Det är inte "statiskt" i webbläsare som har stöd för 'display:table' och 'display:table-row'.
Sådana webbläsare i all ära. Men företaget riktar sig främst till andra företag och då är nog risken störst att det är IE som används. Det är det ju i vilket fall som helst då IE hade en marknadsandel på ca 90% eller vad jag läste. Och de privatpersoner som skulle vara intresserade av denna sida är troligen inte några datorentusiaster som använder andra webbläsare i majoritet heller.
Jag försöker dock få den att se så identisk ut i både IE och FF. Du får gärna komma med förslag på följdproblemet i problem 2 med att bakgrunden försvann i FF när det fixades med #siteinfo längst ner på sidan.
Ang problem 1 så tror jag att det får bli en mer utarbetad tabell ändå. Verkar inte finnas någon bra lösning med CSS som gör att det ser ut som jag och företaget önskar.
.Kopierade fel kod
Och vad händer om du gör så här
Lite ändringar i Zcorpans kod.
<style type="text/css">
html { height:100%; background:gray url(img/bg_grad.png); text-align:center; }
body { display:table; background-color:#acacac; width:800px; height:100%; margin:0 auto; padding:0; }
body > * { display:table-row; }
img { border:none; }
dl{ width: 70%; margin-left: -6%;}
dd { display:inline; margin-right: -3%; }
p{ margin-bottom: 2%;}
</style>
och
<dl>
<dd><a href="start.asp?lang=dk" hreflang="dk"><img src="m-dk.gif" alt="dk"></a></dd> osv...</dl>
Du får leka med procenten, har inte kollat utan satte bara dit några värden...
Det ser ut så här nu... men ser ingen större skillnad?
Jag la till 20px tomt längst upp bara så det följer resten av sidorna :P
Och då fick jag en sån där trevlig scroll i höjdled som jag la in overflow-y:hidden; för.
Annars är det så här resultatet blev:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Namn</title>
<style type="text/css">
html { height:100%; background:gray url(img/bg_grad.png); text-align:center; overflow-y:hidden; }
body { display:table; background-color:#acacac; width:800px; height:100%; margin:0 auto; margin-top:20px; padding:0px; }
body > * { display:table-row; }
img { border:none; }
dl { width: 70%; margin-left: -6%; }
dd { display:inline; margin-right: -3%; }
p { margin-bottom: 2%; }
</style>
</head>
<body>
<img src="img/logo.gif" alt="Företagslogo" width="500" height="112">
<p><a href="start.asp?lang=en" hreflang="en"><img src="img/m-en.gif" alt="en"></a></p>
<p lang="en">Please choose your language</p>
<dl>
<dd><a href="start.asp?lang=dk" hreflang="dk"><img src="img/m-dk.gif" alt="dk"></a></dd>
<dd><a href="start.asp?lang=fi" hreflang="fi"><img src="img/m-fi.gif" alt="fi"></a></dd>
<dd><a href="start.asp?lang=is" hreflang="is"><img src="img/m-is.gif" alt="is"></a></dd>
<dd><a href="start.asp?lang=no" hreflang="no"><img src="img/m-no.gif" alt="no"></a></dd>
<dd><a href="start.asp?lang=se" hreflang="se"><img src="img/m-se.gif" alt="se"></a></dd>
</dl>
<p>Namn © 2006<p>
</body>
</html>
Jag brukar försöka ta hänsyn till funktionshindrade och då är deras bildskärmar oftast 640 breda...
En svår bredd eftersom sidor oftast är bredare än så. Jag sätter då procent på bredden. d.v.s. oavsett skärm så ska innehållet ha en bredd på t.ex 70%.
Om du sätter din bredd till t.ex 82-83% i stället för 800px så kommer flaggorna lägga sig under varandra vid mindre skärmstorlekar. Och väldgt bred vid stora bildskärmar.
Men det är bättre tycker jag än att någon ska behöva scrolla sidledes.
En annan möjlighet är att göra en egen stylesheet för de olika storlekarna på skärmar. De som jobbar så brukar oftast ha tre st. small, medium och large. Men det blir ju en hel del jobb med det...
Alltså, det är ju inte bredden jag har problem med. Bredden är bra. Det är flaggornas placering i höjdled. Jag vill ha dem länst ner. Så som det är på den här tabellsidan.
Om du gör ditt browserfönster "icke maximerat" och sedan tar tag i nedre högerkanten och justerar storleken på fönstret, så ser du att flaggornas placering justerar sig efter fönstret så att de alltid ligger typ 20 pixlar från sidans botten.
Mynten börjar sakteliga trilla ner i min gamla skalle...
Jag såg inte att du hade bottentexten kvar på den du visade nu, så jag försökte bara med flaggorna.
Kanske är detta något för dig att jobba vidare med.
dl{left:15%; top:80%; position: absolute; }
Jag hade tagit bort din bottentext när jag testade
Det tar sig... nu ska jag försöka förklara helt från grunden :OO
Framsidan ska bygga på deras visitkort (se här), dvs det ska vara samma ljusgrå bakgrund som på allt annat, loggan ska vara längst upp, och raden med de skandinaviska flaggorna ska vara längst ner. Så ska förstasidan se ut oavsett vilken skärmupplösning man har när man kommer. Den engelska flaggan ska ligga helt i mitten tillsammans med lite annan text. Det är inte nödvändigt att ha med Namn (C) 2006 på förstasidan. Därför har jag tagit bort det därifrån.
Företaget i fråga vill egentligen ha förstasidan ännu smalare så att det "verkligen" känns som ett visitkort i större format. Detta har jag dock inte lyssnat på då jag tycker det ska följa samma upplägg i design/bredd som resten av sidorna och inte blanda. Det viktiga är i alla fall att flaggorna ska ligga på en rad absolut längst ner på sidan. Visst, en 20-40 pixlar uppåt går väl bra.
För att då få placeringen rätt i höjdled ändrade jag så här: dl { left:20%; bottom:30px; position:absolute; }
Dock vet jag inte hur jag får det att centreras på sidan. Left känns inte som ett alternativ där egentligen.
Men tar jag bort det hamnar det från mitten och åt höger.
Två saker kvar då...
1. Centrera flaggorna och texten där nere.
2. Den engelska flaggan ska centreras i höjdled, dvs middle.
<dl>
<p lang="en">Please choose your language</p>
...borde nog vara:
<dl>
<dt lang="en">Please choose your language</dt>
Fick en stund över nu och tittat på din sida igen.
Gjorde den efter företagets önskemål §jr :P
Tyckte jag fick ihop det riktigt bra, men... med en style för IE och en för FF.
Finns säker någon som kan få ihop det till en med någon hack-kod eller nåt... men nu hinner jag inte mer...
Jag nollade allt först...
Först IE med lite av html-koden också som jag ändrat
<style type="text/css">
*{margin:0 auto; padding:0;}
html { height:100%; background: gray url(img/bg_grad.png)left repeat y; text-align:center; overflow-y:hidden; }
body { display:table; background: #acacac; width: 504px; height:100%; margin:3% auto 0 25%; padding:0; text-align: center; }
body > * { display:table-row; }
img { border:none; }
dl{left: 25%; top: 85%; position: absolute; width:500px; }
dt{}
dd { display:inline; }
.center{top: 50%; position: absolute; }
</style>
<title>Namn</title>
</head>
<body>
<h1> <img src="img/m-se.gif" alt="Företag" width="500" height="112"></h1>
<p class="center"><a href="start.asp?lang=en" hreflang="en"><img src="img/m-en.gif" alt="en"></a></p>
<dl><dt>Please choose your language</dt>
och FF
<style type="text/css">
*{margin:0 auto; padding:0;}
html { height:100%; background: gray url(img/bg_grad.png) repeat top left; overflow-y:hidden; }
body { display:table; background: #acacac; width: 504px; height:100%; margin:3% auto 0 25%; padding:0; text-align: center; }
body > * { display:table-row; }
img { border:none; }
dl{ top: 85%; position: absolute; width:500px; }
dt{}
dd { display:inline; }
.center{top: 50%; position: absolute; left: 50%;}
</style>
Jag såg att du hade lagt flaggorna med uträkning från botten i stället för top. Det betyder att de kommer lägga sig över annat när man drar i hop sidan.
Kanske inte spelar så stor roll här eftersom man får dra ihop väldigt mycket innan det sker, men ska du ha in adresser och telefonnummer och sånt så...
Ha en trevlig helg
Internet Explorer: (sida / bild)
Hela bakgrunden blev ljusgrå, det är inte centrerad om man har ett mindre fönster än helskärm.
FireFox: (sida / bild)
Bättre än IE, men det är inte centrerad om man har ett mindre fönster än helskärm.
Det kommer inte att vara några adresser eller telefonnummer, det ska bara vara logo, engelsk flagga/välkomsttext, skandinaviska flaggorna. Så att sätta flaggorna baserat på botten tycker jag passar bättre. Och så små fönster är inte smidigt att ha om man ska vidare in sedan, så det är nog ingen fara.
Kom på felet i den här stylen varför bakgrundsbilden inte visas. Du kan inte ha grey där, radera den.
Den engelska flaggan räknas från sin vänsterkant, så själva bilden blir inte centrerad. Får man räkna om på något sätt. I IE går det att ha margin left -flaggans halva bredd.
Men det bästa är antagligen att göra en div runt allt innehåll och att man börjar räkna från den i stället för skärmkanten.
Hur lyckades du med att få en scroll i sidled i FF?
Finns inte hos mig!
För övrigt vet jag inte vad som blir fel. Så här ser det ut hos mig... :q
Jag avslutar nog projekt CSS på select-sidan...
Tackar alla för den tid och hjälp de lagt ner på att försöka lösa det.
Men hittills har ingenting slagit funktionaliteten i en tabell.
Den fungerar i både IE och FF helt utan problem.
Må hända att den inte blir verifierat korrekt, men det är ett senare problem.
:bire
