Forum PHP.pl > [HTML][CSS] Problem z oplywajacym tekstem obrazka

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Problem z oplywajacym tekstem obrazka

dante90

5.04.2009, 22:40:32

Witam, na wstępie powiem że zaczynam swoją przygodę z webmasteringiem, jesli moge tak nazwac

,

do rzeczy, mam w divie trzy obrazki w poziomie które chcem otoczyc tekstem z kazdej strony, gdy robie, i gdy dam tekst to tekst dokladnie jest nienaruszony i jest pod obrazkami, a nic nie robie z "z-index" tu troche kodu :

[HTML] pobierz, plaintext 
<body id="body">
<div id="baner"><h1 id="napis_baner"> Baner </h1></div>
<div id="menu">
 <p style ="font-weight:900">Menu</p>
 <p><a href="./zdjecia.html">Zdjęcia</a></p>
 <p><a href="./index.html">Link 2</a></p>
 <p><a href="./index.html">Link 3</a></p>
 <p><a href="./index.html">Link 4</a></p>
 <p><a href="./index.html">Link 5</a></p>
</div>
<div id="glowna">
 <div id="zdjecia_gora"><p> Moim skromnym zdaniem uważam, że przyczyn wypadków na Polskich drogach jest bardzo dużo. Jedną z tych przyczyn jest nie przestrzeganie przepisów  ruchu drogowego np: nadmierna prędkość,  wymuszanie pierwszeństwa, przejazd na czerwonym świetle,drugą taką przyczyną  wypadku jest kolizja na drodze bo inne pojazdy mogą najechać jeden na drugi .Następną przyczyną wypadków jest też rozmawianie w aucie przez telefon,bo jeżeli się rozmawia przez telefon to trzeba się zatrzymać na poboczu.</p>
 	<img id="img_1" src="./media/1.jpg" alt="pierwszy obrazek" width="150" height="100" />
 	<img id="img_2" src="./media/2.gif" alt="drugi obrazek" width="150" height="100" />
 	<img id="img_3" src="./media/3.gif" alt="trzeci obrazek" width="150" height="100" />
 </div>
 
</div>
</body>
[HTML] pobierz, plaintext

no i CSS

Kod

#baner
{
position : absolute;
height : 14%;
top : 1%;
left : 1%;
right : 1%;
border : 2px dotted;
border-color : lime;
}

#menu
{
position:absolute;
width:20%;
top:16%;
left : 1%;
border: dotted 2px;
border-color : lime;
text-align: center;
color: white;
font-family: "times new roman";
}

#glowna
{
position: absolute;
left: 25%;
top: 16%;
right: 1%;
bottom: 1%;
border: dotted 2px;
border-color : lime;
padding: 25px;
font-family: "times new roman";
color: white;

}

#img_1
{
position: absolute;
top: 15%;
left : 5%;
width: 150px;
height:100px;
border: dashed;
border-color:     #c2c2c2;
}

#img_2
{
position: absolute;
top: 15%;
left : 40%;
width:150px;
height:100px;
border: dashed;
border-color:     #c2c2c2;
}

#img_3
{
position: absolute;
top: 15%;
right : 5%;
width:150px;
height:100px;
border: dashed;
border-color:     #c2c2c2;

}

graficznie to tak ma wygladac, mozna zobaczyc Tutaj

jesli zauwazycie jakies bledy to rady mile widziane

kartun11

6.04.2009, 20:27:48

Ja bym radził się zastanowić czy position: absolute; to dobre rozwiązanie do pozycjonowania elementów strony.
Nigdy nie ustawiałem obrazków w taki sposób jak widać to na schemacie, ale wydaje mi się, że float powinien pomóc.
Mam nadzieję, że czytałeś kurs na kurshtml.boo.pl.

dante90

6.04.2009, 20:30:41

Tak czytałem

głownie o ten kurs sie opierom, ale zmieniałem positoion na fixed oraz relase ale to samo razem z float ale to nic nie pomaga bo to wyglada jakby byl inny wymiar cos w stylu z-index, mianowicie tekst jest nienaruszonym stanie pod obrazkami :/

kartun11

6.04.2009, 20:37:14

Chodzi mi o to, że ogólnie nie spotkałem się z tym, żeby ustawiać elementy na stronie przy użyciu position.
Nigdy nie spotkałem się z takim ułożeniem obrazków.
Wydaje mi się, że nawet jak zmienisz z-index, to to nie ma prawa opływać.
Może pocieszę cię faktem, że zrobienie czegoś takiego jest możliwe, problem w tym, że niestety nie wiem jak.

dante90

6.04.2009, 20:43:32

a no to fajnie bo my mamy to zrobic akurat na wymiary dlatego position, i własnie mamy zadane ze obrazki musza byc oplywane tekstem, jakas podpowiedz "wrap sandbag html" w googlu, ale nic nie moge wyczytac z tego

, aha zero tabel i zero ramek takie załozenia :Dtylko na divach, btw. dzieki za odpowiedz

kartun11

6.04.2009, 20:54:12

Spróbuj jeszcze umieścić te obrazki w divie i diva ustawić w odpowiednim miejscu.
Przykład sandbag'u.

dante90

6.04.2009, 20:56:06

oki sproboje , z innym position bo to tez probowałem ale tylko z absolute Ahh i niezauwazylem linka, tak widzialem, tylko ze tam siest podzielone, lecz tylko na prawo LUB lewo ale nie ma ze prawo lewo gora dól :/

hiszpanespaniol

6.04.2009, 22:47:44

nie da się z więcej niż jednym obrazkiem. <p> to element blokowy. Jeżeli do tego wypozycjonujesz obrazki absolutnie to tym bardziej nie będą się one "liczyć" dla tekstu.

Możesz zrobić tak: umieść fragmenty tekstu łącznie z obrazkiem wokół którego mają opływać w divie. czyli otrzymasz 3 div'y, każdy z obrazkiem i tekstem wewnątrz. W każdym z tych div'ów nadaj obrazkowi zwyczajne "float" css'owe. Jeżeli otrzymasz to co chciałeś (tekst opływający obrazki), to dopiero wtedy zajmij się float'owaniem divów, żeby były obok siebie.

Niestety nie uda się zrobić 3 obrazków które będą opływane przez tekst w sposób jaki pokazałeś na obrazku.

dante90

7.04.2009, 01:38:33

Wielkie dzieki za odpowiedzi, zrobiłem tak ze wszystko dałem do jednego diva i dałem mu ustawiłem mu w css z-index:1;to wyeliminowało tekst pod obrazkiem, oraz align do jednej stron, i takim sposobem mam krancowe obrazki powiedzmy ze zrobione bez brzegwego tekstu ale tego srodkokowego obrazku tak jak mowice nie dasie zrobic

jescze raz dzieki za pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.