Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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 (IMG:http://forum.php.pl/style_emoticons/default/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 :

  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>
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 (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

Ten post edytował dante90 5.04.2009, 22:44:03
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
hiszpanespaniol
post
Post #2





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

Posty w temacie


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

 



RSS Aktualny czas: 13.10.2025 - 06:11