Hjälp och kritik med och på min första hemsida

Trädvy Permalänk
Medlem
Plats
Skara
Registrerad
Mar 2003

Hjälp och kritik med och på min första hemsida

Hej css-gurus och alla andra! Lång post, men hoppas någon orkar läsa! Jag behöver er hjälp!

Jag pluggade en a-kurs i webbplatskonstruktion i fjol som jag aldrig riktigt slutförde, men det tänkte jag att det skulle bli ändring på nu.

Jag hittade ett företag att göra ett litet webbprojekt med, som ingick i kursen. I detta läget är jag inte så intresserad av själva utseendet utan syftet är att lära mig korrekt html och css. Bortsett från kompatibilitet med webbläsare tror jag att jag har lyckats då jag validerat koden som html 4.01 Strict samt css 2.1. Räcker detta valideringsmässigt sett?

Problemet är att min struktur inte går hem i äldre versioner av explorer. Scroll skall endast vara på mainfönstret där innehållet är och alltså inte på hela sidan. Boxen med företagsinfo skall ligga under den vertikala menyn och main - som skall ligga brevid varandra. Zoom funkar tillfredsställande i några steg, men det är ändå inte hundra pga strukturen.

Jag försöker använda relativa mått i form av % men jag lyckas inte riktigt med detta då innehållet styr höjd vilket resulterar i att info-boxen inte hamnar längst ner när det är lite innehåll. Som sidan ser ut i firefox vill jag ha det, men detta går alltså inte hem i explorer 6 etc då den inte verkar gilla att jag satt position:absolute på info-boxen. Jag har svårt överlag att fatta hur jag skall ställa in diverse %-storlekar och position-attribut... I min värld är fasta värden som pixlar på boxar inte bra att använda!?

Mitt största problem är alltså själva strukturen. Kan någon förklara hur jag skall tänka generellt sett när man använder sig av en traditionell struktur med horisontell och vertikal meny samt ett "mainfönster" där innehållet är och således overflow:auto skall vara? Är det möjligt att använda %?

Länk till mitt template:

Startsidan:

Css-filen

Återigen, jag är medveten om att det inte är världens snyggaste sida men det är som sagt innehållet som skall vara det viktigaste och att göra en sida av korrekt css för att teoretiskt sett kunna få bättre sökträffar. Min enda tanke med designen är de två bakgrundsfärgerna som menyerna skall "flyta in i". Samt få innehållet centrerat. Utöver det är jag bara ute efter ett stilrent utseende och hög tillgänglighet. Det återstår arbete på detta men i grund och botten lär väl sidan se ut som den gör nu - i firefox.

Det är bara några av sidorna som har innehåll än...Bland annat under luftvapen - axsor och gemini, samt startsidan.. Det är inte klart om sidan någonsin kommer publiceras "skarpt" men det var tänkt så från början^^.

Här är -för skoj skull - länken till sidan idag

MERA HJÄLP:

1: Logotypen - ja den ser ut som logon på en gammal spel-konsoll men det är inget ajg kan påverka - är dåligt gjord och jag tror att sidan skulle lyftas av en "clean" sådan. Samma design fast proffsigare. Jag suger på PS så om det är någon som har en länk till en guide som kan visa mig hur jag kan göra den...Eller kanske till och med fixa en åt mig?

2: Vertikala menyn: Jag är lite lost på alla #meny, #meny ul, #meny ul li tjofräs i css-filen och skulle vilja att hovereffekten eller bakgrunden på samtliga länkar ligger an mot bakgrunden, samtidigt som texten skall ha lite padding. Vad gör jag för fel?

3: Kom med förslag hur sidan kan förbättras utseendemässigt och tillgänglighetsmässigt!!

Jag är sjukt tacksam för all hjälp! ALL HJÄLP!

Asus Gryphon Z87 | i5 4670K | 16 GB Vengeance| MSI 390 Gaming 8 GB | Newton R2 650 W | W10 | BF4: Livhusar
Asus VivoTab 64 GB

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005

Hejsan.

Vad det gäller struktur och positionera så kan du få lite idéer om du studerar CSS koden för mitt länkarkiv till exempel.

Studera index.php och style.css

Sedan koden inte är den mest lättlästa för jag brukar programmera på mitt eget speciella sätt.

Men det kan ge dig en fingervisning om hur det kan fungera.

Sedan skulle jag nog tipsa om att gå över till PHP och köra med include() för det innehåll du hämtar in och ska visa i innehålls "fönstret"/"rutan".

http://magnusbonnevier.se/urlarkivet/index.php
http://magnusbonnevier.se/urlarkivet/style.css

OBS! finns en del jox och classer och ID i CSS filen som ska rensas bort.
Då jag återanvänt en del kod för URL arkivet som jag använder till mitt wordpress theme.

Bortse bara ifrån dom.

Leta upp classerna och ID som har att göra med:

<div ID="container">

<div ID="left_container">
<div ID="leftMenuContainer"></div>
</div>

<div ID="right_container">
<div ID="postContainer">
Bla bla bla en massa innehåll.
</div>
</div>

</div>

<div ID="footer"></div>

Hoppas det kan ge dig en start.

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008

Tycker att det skulle vara snyggare om du "drog ihop" allt lite. Det är så överdrivet luftigt nu! Bara en idé

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av KurreKula
Tycker att det skulle vara snyggare om du "drog ihop" allt lite. Det är så överdrivet luftigt nu! Bara en idé

Tänkte du på Tråd skaparens sida eller min ?

Om det är det senare så är det gjort luftigt med flit för att inte verka så ihop tryckt.

Mer luftiga sidor åt folket

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008

Nää din var lagom luftig;) Den första kändes för luftig... Menyn uppe till höger kan ju ligga ovanför resten, behöver ju inte vara tomt under den?

Btw, menyn verkar inte funka i IE7 heller? Funkar dock i min 8 men inte i compability mode

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Skara
Registrerad
Mar 2003

Tackar för tipset BlueEyes, skall kola igenom. Mjo, sidan är totalt knas i IE7.

Angående IE8 och compatibility mode, innebär det att den "går tillbaka" till tidigare versioner? Kan man lägga till webbplatser och att de visas som i tex IE7. jag uppgraderade till IE8 och har lite problem att se hur det ser ut i IE7

Använder en tjänst som ger skärmdumpar, men det känns inte så optimalt!

Edit: Nu skall menyn funka i ie7!?

Asus Gryphon Z87 | i5 4670K | 16 GB Vengeance| MSI 390 Gaming 8 GB | Newton R2 650 W | W10 | BF4: Livhusar
Asus VivoTab 64 GB

Trädvy Permalänk
Medlem
Plats
Bromma
Registrerad
Aug 2008

Jo, den går tillbaka till IE7... Nu ser det likadant ut i IE8 och IE7.. Dock så har menyn bytt färg? Eller var den alltid så?

Asus Striker II Extreme / XFX Geforce GTX 280 / Q9450 @ 3.6GHz/ TRUE Noctua 120/ 4x1GB Corsair TWIN3X2048-1333C9DHX / X25-M G2 80gb Velociraptor / Win 7 Ultimate x64/ Antec P190

MovieDatabase

Trädvy Permalänk
Medlem
Plats
Skara
Registrerad
Mar 2003
Citat:

Ursprungligen inskrivet av KurreKula
Jo, den går tillbaka till IE7... Nu ser det likadant ut i IE8 och IE7.. Dock så har menyn bytt färg? Eller var den alltid så?

Nä, jag pillar runt lite med färger o så..Det ser så "plumpt" ut med tunga färger på båda sidor...

Använder netrenderer för o kolla hur det blir i ie7. Det verkar funka nu

Någon som kan hjälpa mig att få mainfönstret ända ner? Så scrollen går till botten av sidan.. Om man zoomar in väldigt mycket blir det knas...Bakgrunden följer inte med!

Asus Gryphon Z87 | i5 4670K | 16 GB Vengeance| MSI 390 Gaming 8 GB | Newton R2 650 W | W10 | BF4: Livhusar
Asus VivoTab 64 GB