niestandardowy układ (ścięty rożek) Opcje

[rbart]

Mam prostokąt o zawiniętym rogu do środka

problem w tym że prostoką (div) zmienia rozmiary więc zastosowanie obrazka
jako podkładu całkowicie odpada

w tabelkach było to banalne wystarczył podzielić to odpowiednio a poźniej rozmiar
nie miał znaczenia a z div'ami to całkiem inna bajka

_______________________________________________________________________
Po półrocznej przerwie powracam do programowania i przerabiam właśnie przesiadkę
z tabelek na xhtml + css (bolesną).

Ten post edytował rbart 1.03.2006, 16:18:51

[ActivePlayer]

a moze obrazek z rogiem w tle + background-position ?

[rbart]

problem w tym że prostokąt też musi mieć border z wyjątkiem tego jednego feralnego rogu

dodaje link do bardzo małego bmp < 1 kb
rożek

Ten post edytował rbart 1.03.2006, 16:30:30

[comzit]

To robisz jeszcze jednego DIVa z tlem (rożek) i pozycjonujesz go: lewy gorny rog w stosunku do DIVa glownego.

[code46]

Mam prostokąt o zawiniętym rogu do środka

problem w tym że prostoką (div) zmienia rozmiary więc zastosowanie obrazka
jako podkładu całkowicie odpada

w tabelkach było to banalne wystarczył podzielić to odpowiednio a poźniej rozmiar
nie miał znaczenia a z div'ami to całkiem inna bajka

_______________________________________________________________________
Po półrocznej przerwie powracam do programowania i przerabiam właśnie przesiadkę
z tabelek na xhtml + css (bolesną).

Da się spokojnie to zrobić na divach.. Pomyśl trochę.

[gekon]

Do 6 grudnia co prawda daleko...

Kod

.border { border: solid 1px #000;}
.bottomRecurvate {
background: url(../images/bottomCorner.png) no-repeat 100% 0;
bottom: -1px !important;
right: -1px !important;
position: relative;
overflow: hidden;
border:none !important;
padding: 0;
width: 100%;
height: 9px; /*wyskosc obrazka z zagieciem*/
}

[HTML] pobierz, plaintext 
<div class="border">
<p>Lorem</p>
<div class="bottomRecurvate "></div>
</div>
[HTML] pobierz, plaintext 

Powinno działać (KHTML by Apple [czyli Safari] nie bardzo to łyka, bo nie wie co to jest width:100%+1px;).

Edit:
Mój błąd. Nie sprawdziłem czy ta szerokość jest zgodna ze specyfikacją.
Zmieniłem margines na right i bottom, teraz się waliduje i nie ma problemu z szerokością

Ten post edytował gekon 4.03.2006, 22:41:17