Wysunięcie na margines

0

Witam, mam taki kod HTML:

<body>
<div style="padding:3cm">
<h3><span class="number">1.2</span>Tytuł rozdziału</h3>
</div>
</body>

Div reprezentuje strone (kartkę), w której zasadniczo tekst ma być 3 cm od brzegu (tak jak definiuje padding). Przestrzeń między brzegiem a tekstem, to margines.

Chciałbym, żeby numer, który jest w spanie znajdował się na marginesie strony, czyli w tym paddingu 3cm. Tekst w h3 za spanem "Tytuł rozdziału" powinien się zaczynać normalnie, czyli 3 cm od brzegu div'a. Rzecz w tym, że w spanie może być tekst różnej długości, albo elementu span może w ogóle nie być. Niezależnie od tego tytuł ma się zawsze zaczynać w tym samym miejscu.

Trochę kombinowałem z text-indent i position:relative, ale nic sensownego mi nie wyszło. Nie podaję przykładów, żeby nie sugerować.

Czy ma ktoś pomysł jak to zrobić w samym CSSie?

0

Chyba jedyne co mi przychodzi do głowy to dwa divy. Padding oznacza odsunięcie od krawędzi diva. Dlatego nie możesz wpisać nic w pole wyznaczone padding. Możesz spróbować porobić drugiego diva dla samych liczb i zrobić mu padding z minusem, ale czy to zadziała, ciężko tak gdybać bez konkretnego kodu. :)
A zapomniałabym RWD się przy dwóch divach prawdopodobnie rozjedzie dlatego jeśli strona ma być RWD to zdecydowanie nie najlepszy pomysł.

0

Dzięki za zainteresowanie. Niestety, nie mogę tak zrobić. Wyjaśniając: strona nie ma być responsywna, jak napisałem ma reprezentować kartkę, konkretnie A4. Najważniejsza sprawa, to kod html ma być dokładnie taki, jak napisałem, nie mogę go zmienić. Mogę tylko CSSem działać.

0

przy takich restrykcjach jest to niemożliwe, bo masz span zagnieżdżony w h3 lub czasem, jak sam napisałeś, spanu może nie być
można by odsunąć h3 za margines, ale przesuniesz również span...
wg. mnie bez edycji html nie podziałasz
założyłeś się z kimś, że się da? :)

0
trojanus napisał(a):

założyłeś się z kimś, że się da? :)

Nie chodzi o zakład, ale o to, że kod jest generowany i jednocześnie jest interpretowany jako model danych. Zmiana wymagałaby refaktoringu w zakresie, o którym nawet nie chcę myśleć.
Ogólnie sprawa byłaby prosta, gdyby span miał zawsze tą samą liczbę znaków, bo wtedy na h3 daję text-indent: -4ch; (np. dla 3 znaków)
Myślałem jeszcze o tym, żeby span miał pozycję ustawioną relative i wtedy żeby go dowiązać tak, że prawa krawędź tego spana ma przylegać do lewej krawędzi h3, który normalnie będzie się zaczynał po marginesie. Ale tu jest problem taki, że nie wiem jak to dowiązać, a i tak zostaje w h3 wolne miejsce po spanie.
Sprawa jest pozornie prosta z użyciem javascript, ale niestety, generuje to inne problemy, których bym się pozbył, gdyby udało się to w samym CSS opisać.

1 użytkowników online, w tym zalogowanych: 0, gości: 1