Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS][XML] Problem z opływaniem
--arczi82--
post 14.08.2008, 13:05:35
Post #1





Goście







Witam mam następujący problem. Usiłuje opłynąć zdjęcie poprzez "float:" i o ile tekst opływa obraz to stronka się lekko rozpiepsza, nie stosuje hspace ani align przy którym wszystko działało, gdyż nie jest to zgodne ze specyfikacja xhtml strict, której użyłem.
Powyższy problem można zobaczyć tu
Zamierzonym celem jest wyśrodkowanie tekstu po prawej stronie obrazka.

Poniżej kod css
Kod
html {height: 100%; margin: 0; padding: 0; padding-bottom: 1px; }
body {
    background-image: url("img/bg.jpg");
    margin: 50px auto;
    width: 800px;
    font: 75%/120% Arial, Helvetica, sans-serif;
    color: #fff;
    overflow: auto;
}

.accordion {
    width: 780px;
    border-top: dotted 1px #fff;
    padding: 0px 0px;
   }

.accordion h3 {
    height: 15px;
    color: #e2e0e0;
    padding: 7px 15px;
    background-image: url("img/slider.png"); /*no-repeat right -51px;*/
    background-repeat: no-repeat;
    background-position: right;
    margin: 0px 0 0 0;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    /*border-top: dotted 2px #fff; */
    border-bottom: dotted 1px #fff;
    cursor: pointer;
       float: none;
}
.accordion h3:hover {
     margin: 0px 0 0 0;
     color: #fff;
     }

.accordion h3.active {
    background-position: right 5px;
    margin: 0px 0 0 0;
        border-bottom: dotted 1px #fff;
       color: #fff;
    float: none;
}    
.accordion div {
    margin: 10px 0 0 0;
    padding: 0px 15px 20px;
    border-bottom: none;
}


H4 {
Color: #e2e0e0;
}


#intro img {
float: left;
}

#galeria{
color: fff;
}

#footer {
margin-top: 280px;
padding-top: 10px;
border-top: dotted 1px #fff;
text-align: center;
}


Pozdrawiam
Powód edycji: Poprawiłem tytuł tematu. /webdicepl
Go to the top of the page
+Quote Post
Ar2r
post 14.08.2008, 13:16:06
Post #2





Grupa: Zarejestrowani
Postów: 140
Pomógł: 16
Dołączył: 12.06.2002
Skąd: Kielce

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


Możesz wypróbować następujące rozwiązanie:
1. do #intro dodaj float: left;
2. jeśli będzie umieszczona jedna linia tekstu ustaw line-height na wysokość obrazka
Go to the top of the page
+Quote Post
arczi82
post 14.08.2008, 16:00:15
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 4.08.2008

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


Jak widzisz w css mam ustawione tak jak mówisz, a jednak dalej coś nie gra, zerknij w linku i poklikaj.

Dziękuję za wszelaką pomoc.
Go to the top of the page
+Quote Post
-m-
post 14.08.2008, 16:21:23
Post #4





Goście







kiedy zaglądam w źródło strony to widzę 2 x element DOCTYPE, 2 x sekcję HEAD (u samej góry i jakieś 10 cm niżej w sekcji BODY)
Go to the top of the page
+Quote Post
arczi82
post 14.08.2008, 17:27:21
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 4.08.2008

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


Co do sekcji head, body, to już poprawiłem. problem byl w tym iż includuje pliki, które miały zdeklarowane body i head. Natomiast nadal nie poradziłem sobie z tym float: left sad.gif
Go to the top of the page
+Quote Post
Ar2r
post 14.08.2008, 17:32:17
Post #6





Grupa: Zarejestrowani
Postów: 140
Pomógł: 16
Dołączył: 12.06.2002
Skąd: Kielce

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


No dobra to teraz albo daj dla #intro width: 780px; albo .accordion h3 zamiast float: none; daj clear:left;
Go to the top of the page
+Quote Post
arczi82
post 14.08.2008, 17:49:56
Post #7





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 4.08.2008

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


Dzieki wielkie, "clear: left" pomogł, a jak ustawic teraz ten tekst aby był wysrodkowany i w pionie i w poziomie?

Pozdrawiam
Go to the top of the page
+Quote Post
Maxik
post 14.08.2008, 18:00:31
Post #8





Grupa: Zarejestrowani
Postów: 726
Pomógł: 129
Dołączył: 10.01.2008
Skąd: Gdańsk

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


Może text-align i vertical-align?


--------------------
Pomogłem? Kliknij przycisk Pomógł pod pomocnym Ci postem.
http://maxik.me/
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 8.07.2025 - 08:47