Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Problem z float.
#1
Witam serdecznie. Postanowilem i ja poprosic was o pomoc z problemem dosyc dziwnym jak dla mnie...:/
Robie swoja strone zwiazana z fotografia i studiem gdzie pracuje i napotkalem problem tego typu ze gdy mam Div zawierajacy obrazek i tresc-opis i po zastosowaniu opcji float na obrazku by tekst ladnie go oplywal div zawierajacy footer czyli biale tlo ponizej przesuwa sie w gore nie wiem dlaczego:/ a tekst niekoniecznie oplywa jak powinien... prosze pomozcie...
O to kody:
HTML
Kod:
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  <meta name="Description" content=" [wstaw tu opis strony] " />
  <meta name="Keywords" content=" [wstaw tu slowa kluczowe] " />
  <meta name="Author" content=" [dane autora] " />
  <meta name="Generator" content="kED" />

  <title> [tytuł strony] </title>

  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

<div id="center">

<div id="top">
    <h1>Fotolink - Agnieszka i Jerzy Turek</h1>
    <h2>Studio Fotograficzne</h2>
</div>
<hr>
<div id="menu">
<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" align="left" width="900" height="28" id="Cool Horizontal XML Menu">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="buton.swf" />
<param name="quality" value="High" /><param name="bgcolor" value="#000000" />
<embed src="buton.swf" quality="High" bgcolor="#333333" width="900" height="28" name="Cool Horizontal XML Menu" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<hr>

<div id="obrazek">
<img src="foto.jpg" alt="foto">
</div>
<p>Studio powstało w 2001 roku.</p>
<hr>
<div id="footer"></div>
<hr>

<div id="stopka"><a href="adres stronki" target="_blank" rel="nofollow"></a></div>

</div>

</body>

</html>

CSS
Kod:
body
{
background-color: #000000;
}

#center
{
position: absolute;
left:50%;
margin-left: -450px;
top:0px;
width:900px;
}

#top
{
width: 900px;
height: 120px;
margin-top: 20px;
background: url(../tlo_header.jpg);
}

h1
{
width: 900px;
font-family: times new roman;
font-size: 40px;
color: #FFFFFF;
text-align: left;
margin-left: 10px;
}

h2
{
width: 900px;
font-family: times new roman;
font-size: 30px;
color: #FFFFFF;
text-align: left;
margin-top: -20px;
margin-left: 40px;
}

h4
{
width: 900px;
font-family: arial;
font-size: 16px;
color: #FFFFFF;
text-align: left;
margin-top: 0px;
margin-left: 0px;
}

#menu
{
width: 900px;
height: 28px;
background-color: #000000;
}

#rotator
{
width: 900px;
height: 400px;
background-color: #000000;
}

p
{
width: 900px;
height: 0 auto;
font-family: arial;
font-size: 16px;
color: #FFFFFF;
margin-left: 30px;
}

#obrazek
{
width: 150px;
height: 226px;
background-color: #000000;
float: left;
}



#footer
{
width: 900px;
height: 28px;
background-color: #FFFFFF;
font-family: arial;
font-size: 10px;
color: #000000;
text-align: right;
display: block;
}

#stopka
{
width: 900px;
height: 28px;
position: relative;
background-color: #000000;
font-family: arial;
font-size: 10px;
color: #FFFFFF;
text-align: right;
margin-top:20px;
clear:both;
}

a:link {
color:#FFFFFF;
text-decoration: none;
}
a:hover {
color:#FFFFFF;
text-decoration: none;
}
a:active {
color:#FFFFFF;
text-decoration: none;
}
a:visited {
color:#FFFFFF;
text-decoration: none;
}

pod FF wyglada ten problem tak:
http://www.vandj.webd.pl/cms/ff.jpg

a
pod IE
http://www.vandj.webd.pl/cms/ie.jpg
wyglada dobrze ale nie oblewa:/
Odpowiedz
#2
Overflow:hidden dla głównego kontenera.
Odpowiedz
#3
moglbys mi wrzucic kod gdzie dokladnie??Bo wydaje mi sie overflow:hidden, ze ukrywa elementy a nie poprawnie je ustawia?
pozdrowka
Odpowiedz
#4
bardzo duzo pustych divów masz zupelnie nipotrzebnie bo to tylko zawala kod.
Twoja metoda mozesz zrobic tak zeby baner mial float:left;
dalej zdjecie w divie mialo clear:left, zrobic diva ktory bedzie zawieral tresc obok zdjecia ustalic wymiary tego boxa i ustawic na float:left; i na koniec stopke dac clear:left;

nie wiem czy to dokladnie o to Ci chodzilo.
Odpowiedz
#5
(16-03-2011, 20:29)jacob napisał(a): bardzo duzo pustych divów masz zupelnie nipotrzebnie bo to tylko zawala kod.
Twoja metoda mozesz zrobic tak zeby baner mial float:left;
dalej zdjecie w divie mialo clear:left, zrobic diva ktory bedzie zawieral tresc obok zdjecia ustalic wymiary tego boxa i ustawic na float:left; i na koniec stopke dac clear:left;

nie wiem czy to dokladnie o to Ci chodzilo.

Dziękuję serdecznie za pomoc, nie do końca zadziałało to tak jakbym chciał bo wszystko się poukładało ale tekst nie chciał dalej oblewać, a może coś zle zrozumiałem, ale zastosowałem myk z divami obok siebie jakbym robił menu i wszystko gra pomijając fakt, że tekst nie oblewa obrazka w miejscu gdzie się on kończy no ale jak to Div chyba z przypisana wielkością-mam tylko nadzieję, że to zgodne ze standardami. pozdróweczka i jeszcze raz dziękuję za pomoc.

PS: Chociaż będę drążył temat dlaczego tak a nie inaczej to mi zadziałało! bo wiedza jest nieoceniona.
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Css3 właściwość float-offset. finito 1 2,371 11-02-2013, 03:12
Ostatni post: Kartofelek
Question Float a img Moody 4 3,066 03-02-2012, 17:25
Ostatni post: kornell
  [CSS] Float, Clear, Position Damian19 3 3,054 17-10-2011, 14:01
Ostatni post: Kartofelek
  Problem z float w dwóch divach obok siebie VuQ 4 3,952 02-10-2011, 23:57
Ostatni post: Kartofelek
  div float problem [html] janusz1200 8 6,398 27-04-2011, 15:18
Ostatni post: janusz1200

Skocz do:


Użytkownicy przeglądający ten wątek: 3 gości
Sponsorzy i przyjaciele
SeoHost.pl