Builder.cz - Informacni server o programovani

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



Záhadná mezera mezi elementy

Seznam témat     Nová odpověď

Přihlásit se     Registrace     Zapomenuté heslo

Re: Záhadná mezera mezi elementy

Autor: peta1

14:13:06 01.09.2011

"Ten kód není asi ani tak podstatný"
"se objevuje neviditelný znak"
A to bys nezjistil, kdyby ses na html kod nepodival, ne? Html stranka je to, co se zobrazuje v prohlizeci.

Problem je, ze php ti vygeneruje do stranky nejaky nesmysl. A ciste nahodou, zkousel jsi v tom kodu to radkovani smazat a udelat ho tam znovu? Protoze nektere editory si pridavaji do textu skryte znaky. Muze to vzniknout i tim, ze jsi kod odkudsi zkopiroval. Taky se mi to stane.
Tez se mi tam nelibi ten include, ten muze mit na zacatku nephp kod kdo vi s cim v kdo vi v jakem kodovani. Mozna prave s tou mezerou.

google = 
http://www.fileformat.info/info/unicode/char/feff/index.htm
Zjistis, ze se jedna o non-break-space, nezalomitelna mezera, vetsinou se pise jako ctrl+shift+mezera

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

12:04:05 30.08.2011

Ten kód není asi ani tak podstatný zjistil jsem ,že se mi zde:
Mezi elementem content a kodem vygenerovaným v php se objevuje neviditelný znak,snad nový řádek.Který vytváří tu mezeru jen nevím kde se bere.

Pokud ten html kod

přidám do kodu php,tak je to ok.
Po vygenerování php kodu se objeví toto:




 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

12:33:24 28.08.2011

Stále se mi nedaří přijít na tu mezeru :-(
Html kód vypadá takto:
[code]





Classic Cars
















[/code]

CSS
[code]
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
background-image:url('images/road1.jpg');
background-repeat:repeat;
background-attachment:fixed;
background-color: #a89878;
}


.borderframe{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-color: white;
border-style: solid;
}



.buttons
{
display:inline-block;
width:219.9px;
height:46px;
text-align:center;
font-weight:100;
text-decoration:none;
font-style:normal;
font-size:23pt;
color:white;
position:relative;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}


a:hover
{
cursor:pointer;
}




#b1{background-image: url("images/but/s1.jpg");}
#b1:hover{background-image: url("images/but/b1.jpg");}

#b2{margin-left:1px; background-image: url("images/but/s2.jpg");}
#b2:hover{background-image: url("images/but/b2.jpg");}

#b3{margin-left:1px;background-image: url("images/but/s3.jpg");}
#b3:hover{background-image: url("images/but/b3.jpg");}

#b4{ float:right; background-image: url("images/but/s4.jpg");}
#b4:hover{background-image: url("images/but/b4.jpg");}

#shadow
{
background-image:url('images/shadow.png');
background-repeat:repeat-y;
width:984px;
margin-left:auto;
margin-right:auto;
z-index:100;
margin-top: 15px;
}


#central
{
position:relative;
width: 899px;
background-color: #a89878;
margin-left:auto;
margin-right:auto;
}

#content
{
border-top:1px #fff solid;
margin:0px;
display:inline-block;
}
#header
{
background-image: url(images/header3.jpg);
height:324px;

}

#navlist
{
display:block;
height:46px;
display:inline-block;
white-space: nowrap;
position: absolute;
margin-top:278px;
width:899px;
position:absolute;

}

#navlist li
{
display: inline;
list-style-type: none;
}


.gallery
{
background-color: #8d8065;
}

.gallery div
{
list-style:none;
display:inline-block;

}

.gal_but
{
display:inline-block;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size:14pt;
text-align:center;
color:#fff;
background-color: #8d8065;
margin-right: -6px;
height:30px;
text-decoration:none;

}



.gal_but:hover
{
cursor:pointer;
background-color:#a89878;

}

.cur_gal_but
{
background-color:#a89878;
}


#s1{width:175px}
#s2{width:175px}
#s3{width:175px}
#s4{width:175px}

#gallery-menu
{
border-bottom:1px #fff solid;
}

#gallery-pic {
background-color: #8d8065;
border-bottom:1px #fff solid;
display:inline-block;
padding:10px;

}
#gallery-pic ul li { display: inline-block;list-style:none }
#gallery-pic ul img {
border: 5px solid #695f4b;


}
#gallery-pic ul a:hover img {
border: 5px solid #fff;
color: #fff;
}

.textbox
{
background-color: #8d8065;
padding:10px;
margin:5px;
max-width:400px;
color:#fff;
font-size:13pt;
border-radius:5px;
-Moz-border-radius:5px;
text-align:center

}


[code]

[/code] CSS [code] * {margin:0px;padding:0px;top:0px;left:0px;} body{ background-image:url('images/road1.jpg'); background-repeat:repeat; background-attachment:fixed; background-color: #a89878; } .borderframe{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-color: white; border-style: solid; } .buttons { display:inline-block; width:219.9px; height:46px; text-align:center; font-weight:100; text-decoration:none; font-style:normal; font-size:23pt; color:white; position:relative; font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } a:hover { cursor:pointer; } #b1{background-image: url("images/but/s1.jpg");} #b1:hover{background-image: url("images/but/b1.jpg");} #b2{margin-left:1px; background-image: url("images/but/s2.jpg");} #b2:hover{background-image: url("images/but/b2.jpg");} #b3{margin-left:1px;background-image: url("images/but/s3.jpg");} #b3:hover{background-image: url("images/but/b3.jpg");} #b4{ float:right; background-image: url("images/but/s4.jpg");} #b4:hover{background-image: url("images/but/b4.jpg");} #shadow { background-image:url('images/shadow.png'); background-repeat:repeat-y; width:984px; margin-left:auto; margin-right:auto; z-index:100; margin-top: 15px; } #central { position:relative; width: 899px; background-color: #a89878; margin-left:auto; margin-right:auto; } #content { border-top:1px #fff solid; margin:0px; display:inline-block; } #header { background-image: url(images/header3.jpg); height:324px; } #navlist { display:block; height:46px; display:inline-block; white-space: nowrap; position: absolute; margin-top:278px; width:899px; position:absolute; } #navlist li { display: inline; list-style-type: none; } .gallery { background-color: #8d8065; } .gallery div { list-style:none; display:inline-block; } .gal_but { display:inline-block; font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size:14pt; text-align:center; color:#fff; background-color: #8d8065; margin-right: -6px; height:30px; text-decoration:none; } .gal_but:hover { cursor:pointer; background-color:#a89878; } .cur_gal_but { background-color:#a89878; } #s1{width:175px} #s2{width:175px} #s3{width:175px} #s4{width:175px} #gallery-menu { border-bottom:1px #fff solid; } #gallery-pic { background-color: #8d8065; border-bottom:1px #fff solid; display:inline-block; padding:10px; } #gallery-pic ul li { display: inline-block;list-style:none } #gallery-pic ul img { border: 5px solid #695f4b; } #gallery-pic ul a:hover img { border: 5px solid #fff; color: #fff; } .textbox { background-color: #8d8065; padding:10px; margin:5px; max-width:400px; color:#fff; font-size:13pt; border-radius:5px; -Moz-border-radius:5px; text-align:center } [code]

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: peta1

7:50:36 26.08.2011

A? Nove radky a mezery jsou pri vypise nahrazeny jedinou mezerou. To je pravidlo html.
Pokud se chces bavit o html, bylo by dobre, dat sem odkaz na html kod a neplacat tu php, ktere se zobrazovanim nesouvisi.



    Kdyz pouzijes UL, UL ma prednastaveny margin a ten musis pres css odstranit, jinak se zobrazi. Pokud nedas divu nad nim border, pak margin pres nej pretece a udela se mezera nad tim divem. To same udela ve spod.
    Mozna podobny problem nastvava v tve galerii, ale protoze nezname ani html kod, ani css kod, tak nelze odpovedet. Moji oblibenou analogii je, mam doa auto, je rozbite, neco tam skruci nekde dole, najdi mi, co je na nem rozbite. Tak jako to auto bys musel videt, ne?

    aaa
    bbb

    Tady ti mezi aaa a bbb vlozi take mezeru, protoze b je take radkovy element.

    aaa
    bbb


    Tady to da na novy radek, ale za aaa neudela mezeru. Nehlede na to, ze to neni validni :)

    aaa
    bbb


    Totez. Ale validni to je.

    aaa
    bbb

    Tady ti udela mezeru mezi aaa a bbb.


    Tady ti prida nad obrazek mezeru v nekterych prohlizecich, je treba to osetrit pres vertical-align.

    Ale tohle je jen takova tipovacka moznosti, ktere ti tam nastavaji, je jich jeste asi 100. Ma smyl je vyjmenovavat nebo se budeme bavit o tvem skutecnem kode?

      Kdyz pouzijes UL, UL ma prednastaveny margin a ten musis pres css odstranit, jinak se zobrazi. Pokud nedas divu nad nim border, pak margin pres nej pretece a udela se mezera nad tim divem. To same udela ve spod. Mozna podobny problem nastvava v tve galerii, ale protoze nezname ani html kod, ani css kod, tak nelze odpovedet. Moji oblibenou analogii je, mam doa auto, je rozbite, neco tam skruci nekde dole, najdi mi, co je na nem rozbite. Tak jako to auto bys musel videt, ne? aaa bbb Tady ti mezi aaa a bbb vlozi take mezeru, protoze b je take radkovy element. aaa
      bbb
      Tady to da na novy radek, ale za aaa neudela mezeru. Nehlede na to, ze to neni validni :)
      aaa
      bbb
      Totez. Ale validni to je.
      aaa bbb
      Tady ti udela mezeru mezi aaa a bbb. Tady ti prida nad obrazek mezeru v nekterych prohlizecich, je treba to osetrit pres vertical-align. Ale tohle je jen takova tipovacka moznosti, ktere ti tam nastavaji, je jich jeste asi 100. Ma smyl je vyjmenovavat nebo se budeme bavit o tvem skutecnem kode?

      Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

16:58:30 25.08.2011

Tak sem zjistil,že problém vzniká zde:
[code]


--pokud zde umístím element,tak nemá žádný margin ale v místě těsně před vykonaným php kodem se oběví ona záhadná mezera
if($cat == "gallery")
{
include "gallery.php";
}
else if($cat == "Service")
{
}
else if($cat == "Contact")
{
}
else
{
}
?>



[/code]

--pokud zde umístím element,tak nemá žádný margin ale v místě těsně před vykonaným php kodem se oběví ona záhadná mezera
[/code]

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

16:33:57 25.08.2011

Bohužel,žádný margin nevidím :-( .Všechno je vynulované u obou elementů.(header,content)

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: roman.hocke

16:22:20 25.08.2011

Výborně! To jsem přesně myslel. A když si ty elementy takhle prohlédneš a vpravo se podíváš na "Computed style" a na "Metrics", u obou těch DIVů, nemáš tam nějaký podezřelý nenulový margin nebo podobně?

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

16:18:02 25.08.2011

Mno v divu centra je:
header pod ním je ta mezera cca 20px ta mezera má stejné pozadí jako central.
a pak následuje div content.Debugoval sem to v chrome a jak ti to blokově vybírá ty elementy na který najedeš cursorem.Tak ta mezera k žádnýmu elementu nepatří :-\

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: roman.hocke

16:14:33 25.08.2011

A teď ještě popiš (nebo postni screen), jak ta mezera vypadá, protožé já žádnou nepozoruju ani v IE, ani v Chrome, ani v Opeře, ani ve FF. A nebo ještě lépe - spusť si vývojářské nástroje (IE9 je má, Chrome je má, FF má FireBug, Opera má DragonFly) a zkus prozkoumat tam, jaké vyšly "vypočítané styly", třeba na něco natrefíš.

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

16:11:51 25.08.2011

Jj div headeru vypadá takto:
[code]



"; ?>
[/code]

"; ?> [/code]

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: roman.hocke

16:09:30 25.08.2011

Aha, díky, ještě prosím ukaž jak vypadá ten DIV od headeru.

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: roman.hocke

16:08:47 25.08.2011

Mno, to už je lepší, ale ještě by to chtělo ukázat tu podstatnou část HTML kódu, konkrétně jak máš definované ty dva DIVy, jaké mají classy a tak. A co přesně myslíš tou mezerou? Vidím že #content má horní okraj bílý, není to náhodou ta "mezera"?

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

16:07:27 25.08.2011

Ještě vnoření elementů v html:
[code]



include "header.php";
?>


if($cat == "gallery")
{
include "gallery.php";
}
else if($cat == "Service")
{
}
else if($cat == "Contact")
{
}
else
{
}
?>









[/code]

[/code]

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: Pepinator

16:02:25 25.08.2011

[code]
css -mezera se dělá mezi headerem a contentem

* {margin:0px;padding:0px;top:0px;left:0px;}
body{
background-image:url('images/road1.jpg');
background-repeat:repeat;
background-attachment:fixed;
background-color: #a89878;
}


.borderframe{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-color: white;
border-style: solid;
}



.buttons
{
display:inline-block;
width:219.9px;
height:46px;
text-align:center;
font-weight:100;
text-decoration:none;
font-style:normal;
font-size:23pt;
color:white;
position:relative;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}


a:hover
{
cursor:pointer;
}



#b1{background-image: url("images/but/s1.jpg");}
#b1:hover{background-image: url("images/but/b1.jpg");}

#b2{margin-left:1px; background-image: url("images/but/s2.jpg");}
#b2:hover{background-image: url("images/but/b2.jpg");}

#b3{margin-left:1px;background-image: url("images/but/s3.jpg");}
#b3:hover{background-image: url("images/but/b3.jpg");}

#b4{ float:right; background-image: url("images/but/s4.jpg");}
#b4:hover{background-image: url("images/but/b4.jpg");}

#shadow
{
background-image:url('images/shadow.png');
background-repeat:repeat-y;
width:984px;
margin-left:auto;
margin-right:auto;
z-index:100;
margin-top: 15px;
}


#central
{
position:relative;
width: 899px;
background-color: #a89878;
margin-left:auto;
margin-right:auto;
}

#content
{
border-top:1px #fff solid;
}
#header
{
background-image: url(images/header3.jpg);
height:324px;
}

#navlist
{
display:block;
height:46px;
display:inline;
white-space: nowrap;
position: absolute;
margin-top:278px;
width:899px;
position:absolute;
}

#navlist li
{
display: inline;
list-style-type: none;
}


.gallery
{
background-color: #8d8065;
}

.gallery div
{
list-style:none;
display:inline-block;

}

[/code]

Citovat příspěvek

 

Re: Záhadná mezera mezi elementy

Autor: roman.hocke

15:50:00 25.08.2011

A ukážeš nám konkrétní kód a příslušné CSS, nebo je to tajné?

Citovat příspěvek

 

Záhadná mezera mezi elementy

Autor: Pepinator

15:38:57 25.08.2011

Zdravím ,chtěl bych poprosit o radu mezi dvěma elementy se mi dělá horizontalní mezera a nikde nemůžu nají žádný margion co by to dělal. V IE9 se to chová jak má a v chrome ne

Citovat příspěvek

 

 

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: