2014-02-23, 18:35
  #1
Medlem
Towans avatar
Hallå igen. Nu ska jag komma med än en nybörjarfråga, men det tycker jag att ni ska se som en bra sak eftersom jag då lär mig!

Jag har en hemsida, här, och jag behöver hjälp med contentboxens och boxarnas positionering. Som det är nu så har de position: absolute, och det fungerar ju såklart, men känns lite omodernt och bökigt. Går det på något sätt att få till att de fyra småboxarnas placering är relativ gentemot den stora contentboxen? Som det är nu måste jag köra att deras margin-top är på runt 800px, vilket känns lite amatörmässigt.

Utöver detta så tar jag gärna emot tips angående hemsidans design. Det känns lite 90tal med de starka färgkontrasterna. Hur kan jag få till mjukare övergångar och allmänt proffsigare design? Kan tillägga att jag i dagsläget bara kan HTML och CSS.
Citera
2014-02-23, 18:50
  #2
Medlem
Fundamentalists avatar
När det handlar om positionering av element på det här sättet brukar man använda sig av gridsystem. Finns gott om information på nätet om detta, ger dig ett litet axplock:

http://stackoverflow.com/questions/4...ss-grid-system
http://code.tutsplus.com/tutorials/w...design--net-25
http://960.gs/
http://www.responsivegridsystem.com/
http://designinstruct.com/web-design...sive-css-grid/
http://www.oakesdesign.ca/10-awesome...d-grid-systems
Citera
2014-02-23, 18:54
  #3
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av Towan
Hallå igen. Nu ska jag komma med än en nybörjarfråga, men det tycker jag att ni ska se som en bra sak eftersom jag då lär mig!

Jag har en hemsida, här, och jag behöver hjälp med contentboxens och boxarnas positionering. Som det är nu så har de position: absolute, och det fungerar ju såklart, men känns lite omodernt och bökigt. Går det på något sätt att få till att de fyra småboxarnas placering är relativ gentemot den stora contentboxen? Som det är nu måste jag köra att deras margin-top är på runt 800px, vilket känns lite amatörmässigt.

Utöver detta så tar jag gärna emot tips angående hemsidans design. Det känns lite 90tal med de starka färgkontrasterna. Hur kan jag få till mjukare övergångar och allmänt proffsigare design? Kan tillägga att jag i dagsläget bara kan HTML och CSS.

Ta en titt på Bootstrap och liknande. Gör det enklare för en nybörjare att få till olika lösningar.
När det gäller design så är det ett stort område, finns folk som studerar det i flera år, inget som man svarar på i ett enda inlägg på Flashback. :-)

Men min personliga favorit är en ren design, med några få kontrasterande färger, och olika nyanser av grått för att dela upp olika sektioner. Lagom mycket whitespace/tomrum är viktigt.

Ofta ser det bättre ut att ha rubriker/stor text i en mycket mörkt grå nyans istället för svart, till exempel. Min personliga site är byggd på basic Bootstrap, med några få justeringar för att få det att se ut som jag gillar det: http://www.texasswede.com/
Inget avancerat, men kanske kan ge lite idéer.
En annan site baserad på Bootstrap, men som använder ett tema vi köpte for $4 är den här (inte 100% klar ännu, saknar vissa sidor/information), som min flickvän petade ihop: http://www.demandbettersolutions.com/

Så du kan göra mycket med Bootstrap. Och om du inte är en fena på design, ladda ner ett gratis-tema, eller köp ett billigt tema från någon som är duktig på detta.
Citera
2014-02-24, 10:05
  #4
Medlem
Towans avatar
Bootstrap verkar intressant! Hur fungerar det egentligen? Laddar man ner fördiga html och css-koder, som man sen utgår ifrån för att göra en egen hemsida?
Citera
2014-02-24, 10:51
  #5
Medlem
Citat:
Ursprungligen postat av Towan
Bootstrap verkar intressant! Hur fungerar det egentligen? Laddar man ner fördiga html och css-koder, som man sen utgår ifrån för att göra en egen hemsida?

Gå hit: http://getbootstrap.com/getting-started/#download

Ladda ner och placera "bootstrap.css" och "bootstrap.js" in din css och javascript mapp.
Inkludera sedan dessa på din sida (i <head> för enkelhetens skull):

<script type="text/javascript" src="boostrap.js"></script>

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

När detta är klart tittar du igenom dessa sidor för hur du använder bootstrap. (Exempelkod):
http://getbootstrap.com/css/
http://getbootstrap.com/components/
http://getbootstrap.com/javascript/

Bootstrap är väldigt stort och innehåller även väldigt mycket onödigt. Dock är det en god start till att göra en snygg och modern hemsida. Om du kan en del om html, css och javascript så har jag för mig att man kan anpassa innehållet i sina bootstrap filer någonstans på deras hemsida.
__________________
Senast redigerad av Xercise 2014-02-24 kl. 10:53.
Citera
2014-02-24, 20:04
  #6
Medlem
Towans avatar
Jag har inte hunnit läsa på helt om grid, men jag har en fundering om hur positioneringen fungerar och undrar om jag på ett ungefär är rätt ute.

Vi säger att jag har en navbar som är högst uppe på sidan, med position: fixed. Under den har jag en contentlåda som är position:absolute med en margin-tio på navbarens höjd kanske 10px för ett litet mellanrum. Denna contentlåda har en height:auto så att den anpassar sig efter texten i lådan.

Om jag sen har en till div under contentlådan med position:relative, är den diven relativt placerad mot contentlådan, och ständigt ligger exempelvis 10px under oavsett om det är lite eller mycket text som finns där (i lådan), som gör den antingen väldigt hög eller väldigt låg?
Citera
2014-02-24, 20:06
  #7
Medlem
Towans avatar
Är på iphone och kan inte ändra mitt förra inlägg, men menar såklart margin-top och "navbarens höjd plus kanske 10px"!
Citera
2014-02-24, 21:03
  #8
Medlem
Fundamentalists avatar
Citat:
Ursprungligen postat av Towan
Jag har inte hunnit läsa på helt om grid, men jag har en fundering om hur positioneringen fungerar och undrar om jag på ett ungefär är rätt ute.

Vi säger att jag har en navbar som är högst uppe på sidan, med position: fixed. Under den har jag en contentlåda som är position:absolute med en margin-tio på navbarens höjd kanske 10px för ett litet mellanrum. Denna contentlåda har en height:auto så att den anpassar sig efter texten i lådan.

Om jag sen har en till div under contentlådan med position:relative, är den diven relativt placerad mot contentlådan, och ständigt ligger exempelvis 10px under oavsett om det är lite eller mycket text som finns där (i lådan), som gör den antingen väldigt hög eller väldigt låg?

Nah, ett gridsystem är uppbyggt utan absolutpositionering. Det handlar om att du har en fast bredd och sen räknar ut hur stora alla kolumner inuti (inklusive margin för mellanrum) ska i jämförelse med vara och sedan fyller ut en hel bredd själva.

Detta är ett väldigt simpelt exempel. Men låt säga att din grid ska ha fyra kolumner, då ska varje rad ha utrymme för fyra kolumners bredd utan att bryta rad. Har gjort ett simpelt exempel här: http://jsfiddle.net/u846U/
Citera
2014-02-24, 21:21
  #9
Medlem
Towans avatar
Jag tänkte främst på CSS i allmänhet och inte just specifikt för gridsystem, men all kunskap är bra kunskap! :)
Citera

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in