Bloggande iFokus

Bloggande

Etikettbloggdesign-html-och-css
Läst 1821 ggr
[Vargöga]
0

Mamutdesign

Min första design som jag har gjort.

http://mamutdesign.blogg.se/gratisett/

Vad tycks? En lila-aktig design.

Wand
0
#1

Tycker att den var lite tråkig, men fint val av teckensnitt och färg, trots att rosa inte riktigt är min grej. 

Det jag reagerade mest på är namnet "mamut", syftar du på mammut där? Tyvärr så är stavfel som en vagel i ögat för mig, och jag misstänker att jag lider av någon form av tvångsbeteende, så jag kan inte hålla det inom mig med rädslan för att någon ska tro att jag är dålig.

Det verkliga livet existerar i fantasin. Did I mention demons?

[Vargöga]
0
#2

Det är med flit felstavat för när jag skapade min blogg så gick inte med den rätta stavningen. Tungan ute Sen har det liksom följt med.

MajaL
0
#3

Enkelt och snyggt tycker jag. :)

Med vänliga hälsningar

Maja Cool

www.majalind.se

 

 

 

Mimmi
0
#4

Jag tycker att det ser helt okej ut! Ett tips är att lägga in lite placeholderbilder för att få den att se lite mer spännande ut. Hittade dock en liten bugg. Ditt kommentarsfält är otroligt litet, jag gissar att det inte ska se ut så. Problemet uppstår i Chrome, IE och Opera.

Är det okej om jag ger lite konstruktiv kritik på designen?

[Vargöga]
0
#5

#3 Tack. Skrattande

[Vargöga]
0
#6

#4 Jo det går bra. Skall kolla in kommentatorsrutan. Tack.

Kollade in rutan på FF nu och den ser ut som den skall.

Mimmi
0
#7

Designmässigt var det bara två saker jag tänkte på. Det första är att jag gärna hade sett att du arbetat lite mer med positioneringen av de olika sakerna. Just nu börjat allt lite här och där. T.ex. skulle det sett mer "harmoniskt" ut om sidomenyn började antingen i nivå med headern eller där inläggen börjar.

Det är alltid bra att skissa upp designen på ett rutat papper först, för att se hur man ska göra med positioneringen av de olika delarna. Det ser nästan alltid bättre ut om man arbetar utifrån bestämda osynliga linjer när man positionerar saker.

Den andra saken var att jag tror att det skulle bli snyggare med lite marginal ovanför headern och nedanför sidomenyn.

En till sak som inte direkt har med designen att göra är att du behöver kika lite på hur bloggen ser ut i Internet Explorer. I IE8 är det en vit rand högst upp, och i IE7 är det ganska mycket som är galet.

Mimmi
0
#8

#6 Som jag skrev så uppstår problemet bara i IE, Opera och Chrome.

MajaL
0
#9

#8 Jag har safari. Ville bara inflika med det. :)

Med vänliga hälsningar

Maja Cool

www.majalind.se

 

 

 

Mimmi
0
#10

#8 Jag lyckas alltid glömma Safari! Men felet torde vara samma där, eftersom Safari är väldigt lik Chrome.

[Vargöga]
0
#11

Har ingen IE för den kraschar bara hela tiden. Chrome har jag men använder den inte. ;)

Jag ville ha meny lite halvhögt. :p

Enligt mina koder (som inte funkar) så skall det redan vara ett mellanrum ovanför headern. Vet inte hur jag får tillbaka den. :(

Samma sak med menyn så får jag inte mer "space" längst ner.

[Vargöga]
0
#12

Testade i Chrome och det är bara att dra i kommentarrutan så blir den större. Upptäckte en annan sak och det går inte att kommentera på den bloggen heller.

MajaL
0
#13

Någon som kan beskriva hur problemet ser ut?

Med vänliga hälsningar

Maja Cool

www.majalind.se

 

 

 

Mimmi
0
#14

#11 Att testa sin sida i olika webbläsare är väldigt viktigt. Du kan inte förvänta dig att alla ska använda samma webbläsare som du.

För att få marginal stoppar du bara marginal på toppen av wrappern.

#12 Jag tycker inte det låter så användarvänligt att man själv måste dra i rutan för att få den större. Vore bättre om den var en bra storlek redan från början. Många förstår nog inte att man kan dra i den. Du kan väl bara ge den en fast höjd och bredd? I Opera går det inte att dra i rutan, och då går det inte att se vad man skriver alls.

#13 Såhär ser det ut:

Opera

Safari och Chrome

Internet Explorer

Firefox (som det ska se ut)

[Vargöga]
0
#15

Nu har jag äntligen fått headern att stanna nere.

Men var i stilmallen ändrar jag storleken på kommentarsrutan. Det finns ju massor med comment så jag vet inte vilken jag skall ändra på.

Mimmi
0
#16

Du får sätta ett ID på kommentarsrutan och sedan ge den en fast höjd och bredd.

[Vargöga]
0
#17

Åhh jag har väntat hela dagen på att få svar. :p

ID? Var sätter jag den? Allt detta är men något med comment. Har försökt att lägga till width och heigt på några av dom men då hittas inte den sidan. :(

div.commentheader, p.commenttext {
margin: 0 0 0 15px;
font-weight: bold;
color: #222;
}

p.commenttext {
font-weight: normal;
}

div.commentmeta {
color: #666;
margin: 5px 0 20px 15px;
font-size: 11px;
}

form.commentform {
font-size: 11px;
}

form.commentform input, form.commentform textarea {
margin: 0 5px 10px 0;
vertical-align: middle;
}

Mimmi
0
#18

Det finns ingen selektor för just den rutan, så du måste lägga til det själv. Ett ID lägger du till i din kodmall. Kommentarsfältet ligger i en textarea, och det är där du ska stoppa ditt ID. T.ex. <textarea id="comment-box" name="comment"…

Glorious
0
#19

Jag tycker det var hur fint som helst, jag menar det var din första design… Mitt första försök var verkligen inte så avancerat eller fint :) Du har tänkt på färgerna och typsnitten osv. Det ser riktigt bra ut! Jag tänkte faktiskt inte på att leta efter fel men jag hoppas att de andra har upptäckt det och att du kan lösa dem nu med deras hjälp!

Men jag tänkte också precis som #7 att det hade sett bättre ut om sidomenyn hade varit i samma nivå som inläggen eller börjat där headern börjar!

[Vargöga]
0
#20

Så här ser det ut i kodmallen.

Mimmi
0
#21

I den taggen lägger du in ett ID, som du sedan använder som selektor i din CSS.

Där skriver du något inom citattecknen som beskriver fältet.

[Vargöga]
0
#22

Det funkade inte med Chrome iaf. :(

Mimmi
0
#23

Har du lagt till höjd och bredd i din stilmall? Att bara lägga till ett ID gör ingen skillnad. Att lägga till ett ID är bara som att lägga till ett namn.

[Vargöga]
0
#24

Men jag vet ju inte vart jag skall lägga in den i stilmallen. :( När jag skriver in i någon av dessa comment så hittas inte sidan sen. ::(

Mimmi
0
#25

Du ska skapa en ny selektor med ID:t du gav kommentarsfältet och sedan ge selektorn en höjd och bredd.

#Kommentar {

height:

width:

}

[Vargöga]
0
#26

Testar när jag kommer hem.

[Vargöga]
0
#27

Testar när jag kommer hem.

[Vargöga]
0
#28

Snart ger jag upp för det funkar inte. Gråter

Men du är så snäll som hjälper mig.

Mimmi
0
#29

Har du lagt in höjd och bredd som jag skrev? Jag kan inte se det i Inspect Element.

[Vargöga]
0
#30

Jo jag testade att lägga in det och sen förhandsgranskade jag. När det inte funka så sparade jag inte det jag skrivit in.

[Vargöga]
0
#31

Yes nu funkar den i Chrome. :)

Supertack.

Är det något mera fel? Som sagt jag gillar att den att meny är lite halvväg upp. Kanske ser bättre ut om man har en bild i headern och i menyn?

Mimmi
0
#32

Super! Det fungerar för mig med.

Det var ju också det jag skrev om stöd för IE7, om du känner för att fixa det.

[Vargöga]
0
#33

Kan tyvärr inte använda IE då det gick något fel vid Windows-installationen så den kraschar bara när jag försöker att starta den. har frågat inne på Dator.ifokus men ingen verkar kunna hjälpa mig.

Men kanske det går att få till ett stöd utan IE?

Mimmi
0
#34

Det är ju svårt att få sidan att se bra ut i en webbläsare utan att kunna testa i den webbläsaren, så jag vet inte riktigt hur du ska kunna lösa det.

[Vargöga]
0
#35

Okej.

Mimmi
0
#36

Det är ju alltid bra att validera sin kod för att se att man inte gjort några fel.

HTML-validering:

http://validator.w3.org/#validate_by_uri

CSS-validering:

http://jigsaw.w3.org/css-validator/

[Vargöga]
0
#37

HTML-valideringen litar jag inte ett strunt på. Den hittar "fel" som inte finns. Obestämd

Mimmi
0
#38

Den där HTML-valideringen är gjord av de som bestämmer standardena för HTML och CSS. Det är alltså de som bestämmer vad som är rätt och fel. Att säga att man inte litar på deras valideringstjänst är rätt absurt.

Jag kollade igenom valideringen av din design och jag ser inga fel som ser "overkliga" ut.

Dina vanligaste fel:

Du har inget alt-attribut i dina bilder. När man gör en img-tagg ska man alltid ha med det. Ett alt-attribut beskriver vad bilder föreställer. Denna text kommer fram när bilden inte fungerar och är vad synskadade som använder skärmläsare får höra. Såhär:

Häst

Ett annat fel du gör är att du inte stänger vissa taggar som måste stänga sig själva. Ett exempel ser du i img-taggen ovan. Den har ingen sluttagg, utan stänger istället sig själv. Ett annat exempel är br-taggen, som ska se ut såhär:


Du har även glömt att stänga din wrapper.

[Vargöga]
0
#39

Men jag ser ju inte dessa fel. Förvånad

Jag har tittat igenom ALLA kodmaller efter deras sk "fel" men jag ser inte ett enda i mina koder. För jag antar att dom rödmarkerade är det som är fel?

Jag gick igenom varenda en av felen i alla kodmallar och hittade inte det som dom påpekade sig vara fel därav mitt missnöje.

Mimmi
0
#40

Har du kollat igenom dina -taggar? Har du ett alt-attribut i dem?

Slutar dina -taggar såhär: /> eller är det bara >?

Står det
eller
i din kod? Alternativ nummer ett är fel.

Wrappern stänger du bara genom att lägga till en slutdiv (

) där den ska sluta.

[Vargöga]
0
#41

Fattar inte vad som är fel. Jag har gått igenom allt men hittar inga fel som den påstår. Har kollat igenom alla koder fyra gånger nu. Obestämd

Mimmi
0
#42

Jag har ju försökt beskriva precis vad som är fel! Klistra in din kodmall så kan jag visa var felen är.

[Vargöga]
0
#43

Vilken av dom?

Mimmi
0
#44

Om du har klistrat din länken till förstasidan av bloggen i valideringen är det i framsidan felen finns. Men samma fel lär ju finnas i resten av kodmallarna också.

[Vargöga]
0
#45

Jag har skrivit in bloggnamnet ej någon undersida eller vad jag skall säga. Har tittat i alla kodmallarna efter samma fel. :p

Mimmi
0
#46

Klistra bara in den från framsidan. När du förstått vad som är fel lär du ju hitta dem i de andra kodmallarna också.

[Vargöga]
0
#47

Hittar du något fel i koderna? :p

Inlägget är låst för nya kommentarer