Pyttelite hjälp med design/kodning

Avdelningen för webbrelaterad programmering och grafisk design.
Post Reply
User avatar
Schickhardt
Posts: 111
Joined: 2006-03-30 17:34:25
Location: Göteborg

Pyttelite hjälp med design/kodning

Post by Schickhardt »

Tjenixen!

Jag har lite erfarenhet av html och css och har nyligen fått uppdraget att fixa en ny hemsida åt en liten amatörförening. Jag har (enligt eget tycke) känsla för layout och design, men när det kommer till kodningen kan mina kunskaper tryta lite. Det är här ni kommer in i bilden. Det är nämligen så att jag har lite problem med att få mina avrundade hörn att stämma.

Jag har två png-bilder som delvis är transparanta, men de ligger i en div med en bakgrund som är vit, fast den transparenta delen ska egentligen ligga över den riktiga bakgrunden på sidan. En bild för att illustrera:

Image

Bilderna på hörnena är alltså redan "antialiasade" (läs: ej kantiga), det enda som behövs är alltså den transparenta bakgrunden. Grunden till templaten har jag laddat ner gratis och lagligt på en hemsida som erbjuder dessa templates och jag har ändrat på den en del för att den ska passa vårt ändamål.

http://www.speedyshare.com/930919773.html

Om någon har tid och lust att hjälpa mig, så har ni ovan koden till allt på sidan. Ni får lösa det på vilket vis ni vill, bara önskat resultat nås. Tack så hemskt mycket på förhand! :)
User avatar
ADiS
Posts: 5732
Joined: 2003-04-04 22:24:03
Location: Gävle
Contact:

Re: Pyttelite hjälp med design/kodning

Post by ADiS »

Jag tror att du gör ett vanlig misstag när det gäller runda hörn. Du kan inte lägga ditt runda hörn på dina content med vit bg. Då kommer inte radiusen att synas. Du får helt enkelt skapa en header div, dela upp den i tre delar. Enklast med display:inline-block.

eller så gör du det enkelt för dig:
-moz-border-radius:Xpx (ff)
-webkit-border-radius:Xpx (webkit baserade, typ Safari)
http://www.buildlog.eu - Din egna bygglogg på nätet
User avatar
madr
Posts: 998
Joined: 2004-08-24 11:12:39
Contact:

Re: Pyttelite hjälp med design/kodning

Post by madr »

Det går även att lösa det med :after och :before. Funkar i IE8.
http://src.madr.se/css/beforeAfterPseudoElements/

Men ska det funka crossbrowser inklusive IE6 och IE7 är ADiS lösning med flertalet extra divs eller spans vägen att gå.

En nyckelfråga du bör ställa: är avsaknaden av runda hörn i 1-2 webläsare något som kommer förstöra sidans upplevelse? Jag menar, det är inte direkt så att sidans innehåll blir lidande av det. Ren, semantisk HTML-kod är aldrig dåligt.
antlion: 3,2 GHz i7 | 32GB | 180GB+120GB SSD SATA III | 2TB SATA III | Dell u2410 | GF 5600ti Arch linux + Win 7
Post Reply