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:
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!
Pyttelite hjälp med design/kodning
- Schickhardt
- Posts: 111
- Joined: 2006-03-30 17:34:25
- Location: Göteborg
Re: Pyttelite hjälp med design/kodning
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)
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
Re: Pyttelite hjälp med design/kodning
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.
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