Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Problem z oplywajacym tekstem obrazka
dante90
post
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 1
Dołączył: 5.04.2009

Ostrzeżenie: (0%)
-----

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

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 
  1. <body id="body">
  2. <div id="baner"><h1 id="napis_baner"> Baner </h1></div>
  3. <div id="menu">
  4.  <p style ="font-weight:900">Menu</p>
  5.  <p><a href="./zdjecia.html">Zdjęcia</a></p>
  6.  <p><a href="./index.html">Link 2</a></p>
  7.  <p><a href="./index.html">Link 3</a></p>
  8.  <p><a href="./index.html">Link 4</a></p>
  9.  <p><a href="./index.html">Link 5</a></p>
  10. </div>
  11. <div id="glowna">
  12.  <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>
  13.  	<img id="img_1" src="./media/1.jpg" alt="pierwszy obrazek" width="150" height="100" />
  14.  	<img id="img_2" src="./media/2.gif" alt="drugi obrazek" width="150" height="100" />
  15.  	<img id="img_3" src="./media/3.gif" alt="trzeci obrazek" width="150" height="100" />
  16.  </div>
  17.  
  18. </div>
  19. </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 biggrin.gif

Ten post edytował dante90 5.04.2009, 22:44:03
Go to the top of the page
+Quote Post
kartun11
post
Post #2





Grupa: Zarejestrowani
Postów: 29
Pomógł: 2
Dołączył: 22.07.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
dante90
post
Post #3





Grupa: Zarejestrowani
Postów: 21
Pomógł: 1
Dołączył: 5.04.2009

Ostrzeżenie: (0%)
-----

Tak czytałem biggrin.gif 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 :/
Go to the top of the page
+Quote Post
kartun11
post
Post #4





Grupa: Zarejestrowani
Postów: 29
Pomógł: 2
Dołączył: 22.07.2007

Ostrzeżenie: (0%)
-----

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.

Ten post edytował kartun11 6.04.2009, 20:45:17
Go to the top of the page
+Quote Post
dante90
post
Post #5





Grupa: Zarejestrowani
Postów: 21
Pomógł: 1
Dołączył: 5.04.2009

Ostrzeżenie: (0%)
-----

biggrin.gif 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 biggrin.gif, aha zero tabel i zero ramek takie załozenia :Dtylko na divach, btw. dzieki za odpowiedz
Go to the top of the page
+Quote Post
kartun11
post
Post #6





Grupa: Zarejestrowani
Postów: 29
Pomógł: 2
Dołączył: 22.07.2007

Ostrzeżenie: (0%)
-----

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

Ten post edytował kartun11 6.04.2009, 20:55:59
Go to the top of the page
+Quote Post
dante90
post
Post #7





Grupa: Zarejestrowani
Postów: 21
Pomógł: 1
Dołączył: 5.04.2009

Ostrzeżenie: (0%)
-----

oki sproboje , z innym position bo to tez probowałem ale tylko z absolute biggrin.gif 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 :/

Ten post edytował dante90 6.04.2009, 21:05:04
Go to the top of the page
+Quote Post
hiszpanespaniol
post
Post #8





Grupa: Zarejestrowani
Postów: 213
Pomógł: 39
Dołączył: 7.04.2008
Skąd: 3city

Ostrzeżenie: (0%)
-----

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.


--------------------
profesjonalny webmastering: "save for web > html and images"
Go to the top of the page
+Quote Post
dante90
post
Post #9





Grupa: Zarejestrowani
Postów: 21
Pomógł: 1
Dołączył: 5.04.2009

Ostrzeżenie: (0%)
-----

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 biggrin.gif jescze raz dzieki za pomoc 
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 14:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn