Forum PHP.pl > niestandardowy układ (ścięty rożek)

rbart

1.03.2006, 16:16:33

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ą).

ActivePlayer

1.03.2006, 16:21:43

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

rbart

1.03.2006, 16:27:47

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

comzit

1.03.2006, 17:17:35

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

code46

2.03.2006, 11:38:13

Cytat(rbart @ 2006-03-01 15:16:33)

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

2.03.2006, 21:35:48

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ą