12 svar · 707 visningar · startad av maqe
Jag försöker få till ett specialhörn på en div. Jag har en liten gif som ligger som bakgrund i högra hörnet på en div som även har border runt sig. Bordern hamnar dock över min bild i högra hörnet och det vill jag inte. Hur kan man göra för att komma runt det?
Om du iställer för en bakgrundsbild lägger bilden i en img-tag så har jag en lösning med modifikation. Det fungerar nämligen i FF och Opera men inte i IE...
<div>
<img align="right" style="margin-top:-1px; margin-right:-1px;" />
Och här en massa text som lägger sig vänster och under bilden i högra hörnet på div-en...
</div>
svårt att svara på utan din kod.
Lite kod
Såhär ser det ut nu:
<asp:panel runat="server" CssClass="important" id="ImportantMessagePanel">
En massa text ...
</asp:panel>
Såhär ser min css klass ut
.important {
background:#fffbef url('corner.gif') no-repeat right bottom;
border:solid 1px #fbb600;
padding:0 10px 10px 10px;
}
och såhär ser resultatet ut. Den gula bordern utanför "hundörat" vill jag alltså ha bort.
Antingen får du ta bort border helt och hållet från din css-klass, eller skriva
border-top: 1px solid #fbb600;
border-left: 1px solid #fbb600; då får border bara överst och till vänster men det är väl kanske inte vad du tänkt dig. Jag hade skapat en ny bild som bättre fyller sin funktion
Det här kan väl kanske vara en lösning: http://member.webforum.nu/3888/horn.htm
fiddler skrev:
Det här kan väl kanske vara en lösning: http://member.webforum.nu/3888/horn.htm
Snyggt! Går det att placera bilden så att man inte får med bordern? Det ser lite konstigt ut nu när de går runt bilden. 
silfver skrev:
Snyggt! Går det att placera bilden så att man inte får med bordern? Det ser lite konstigt ut nu när de går runt bilden.
Nu då? (Kollade bara i IE 
)
Kanon! Riktigt fint ju. Jag stjäl din kod, hoppas det inte gör nåt.
r/ Aha, du gjorde så. Nu ser jag, efter att ha kollat på bilden. Jag trodde du hade gjort en bild som såg ut som min bifogade.
.cont{
width: 250px;
border:1px solid #fde3a0;
background: url('corner.gif') no-repeat right bottom;
padding: 10px;
}
Kan man inte få bakgrundsbilden att lägga sig PÅ bordern?
silfver skrev:
Kanon! Riktigt fint ju.
Slit den med hälsan! Du kan ju alltid slänga den i nåt hörn...
silfver skrev:
Kanon! Riktigt fint ju.
r/ Aha, du gjorde så. Nu ser jag, efter att ha kollat på bilden. Jag trodde du hade gjort en bild som såg ut som min bifogade.
.cont{ width: 250px; border:1px solid #fde3a0; background: url('corner.gif') no-repeat right bottom; padding: 10px; }Kan man inte få bakgrundsbilden att lägga sig PÅ bordern?
Detta är ju precis vad jag vill åstadkomma men det bästa är att göra som fiddler gör kanske mao lägga border bottom, right i bilden med hundörat
silfver skrev:
Kan man inte få bakgrundsbilden att lägga sig PÅ bordern?
Jodå, med position: relative. Det förutsätter, om jag inte tänker fel, att div:en alltid har samma storlek. Övre vänstra hörnet vore inga problem...
fiddler skrev:
Jodå, med position: relative. Det förutsätter, om jag inte tänker fel, att div:en alltid har samma storlek. Övre vänstra hörnet vore inga problem...
Jo, vänstra hörnet är ju enkelt. Men med din metod så måste ju diven ändå ha en begränsad storlek, om man inte gör en oändligt lång gif-bild.