Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[CSS / HTML / DIV] Tło strony - obrazek z liniami poziomymi - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS / HTML / DIV] Tło strony - obrazek z liniami poziomymi (/thread-css-html-div-tlo-strony-obrazek-z-liniami-poziomymi)

[CSS / HTML / DIV] Tło strony - obrazek z liniami poziomymi - ciekawski - 06-08-2008

Witajcie,

jestem w trakcie pisania szablonu. Korzystam z DIVów, i mam takie tło: [Obrazek: tlo.gif].
Jest to wycięta linia ze zwykłego szkolnego zeszytu. Po lewej stronie znajduje się treść, po prawej menu, wszystko rozciąga się tak, jak powinno i generalnie działa, poza jedną rzeczą.

Mianowicie chciałbym, aby tekst przylegał ściśle do linii - niech to po prostu wygląda tak, jak zapisany zeszyt. Niestety, tekst co linie "podskakuje" o piksel, dwa w górę, przez co po kilkunastu zdaniach wyrazy znajdują się ponad liniami, aby w pewnym momencie "obrócić się" i wrócić na stare miejsce - tuż nad linią. Dokładnie tak, jak chciałbym, aby było w całym dokumencie. Poniżej zamieszczam CSS, może Wy będziecie w stanie mi pomóc?

Kod:
#container{
                width:750px;
                margin:0 auto;
                background:#ffffff url('./gfx/tlo.gif') repeat;
                

                }
#tresc{
                width:555px;
                margin:0 auto;
                float:left;
                display:inline;
                margin-left:10px;
                overflow:hidden;
}
#tresctxt{
                width:540px;
                line-height:21px;
                margin:0 auto;
                clear:both;
                margin-top:5px;
                font-weight:bold;
                text-align:justify;
                font-size:8pt;
                float:left;
                display:inline;}
#menu{
                width:140px;
                float:left;
                display:inline;
                margin-top:-8px;
                line-height:23px;
                margin-left:40px;
                overflow:hidden;
}
#menutxt{
                width:130px;
                font-weight:bold;
                text-align:justify;
                font-size:9pt;
                margin-top:17px;
                }
Jak z poniższego kodu widać, próbowałem sprawę załatwić odstępem między wierszami, jednak na nic się to zdaje Sad
Kod:
<div id="tresc" style="color:#035054;">

                        <p id="tresctxt">
                        <!-- TREŚĆ STRONY -->
                        <br>To jest wlasnie tekst, który powinien być na swoim miejscu. A nie jest.<br> Aby przekonać się o tym, wystarczy skopiować go kilkanaście razy. <br><br>
                        
                    
                        <!-- KONIEC TREŚCI STRONY -->
                        
                        </p>
                        
                    </div>

                <div id="menu">
                        <img src="./gfx/info.gif" style="margin-top:14px;"><br>

                    <p id="menutxt" style="color:#000;">
                        
                    Menu. Podobnie jak treść, przeskakuje :(<br>
                    </p>
</div>
Jest to tylko wycinek z kodu, nie chcę zasypywać Was całym szablonem, bo trochę tego jest... Smile
Jeżeli tylko możecie - bardzo proszę o pomoc.
Pozdrawiam!

edit: tak mi przyszło do głowy jeszcze... może wina leży po stronie obrazka? Mój ma wymiary: 750 x 18 px. Próbowałem z wartością parzystą i nieparzysą, ciągle to samo... choć może jest jakiś "złoty środek" na tę bolączkę? Smile