Autor Zpráva
radim24
Profil *
Ahoj.
Poradili jste mi, že mám vyzkoušet box-sizing: border-box; aby se mi opravila výška DIVu. Zvláštní je, že v něčem to pomohlo a v něčem jiném ne. Později jsem chtěl odstranit nesprávnou výšku, způsobenou přičtením paddingu (konkréntně padding top) a nakonec taky šířku boxu s obsahem. Tento parametr už nezabíral a tak jsem zkoušel jiné chytáky, ale nezabrali spolehlivě. např. Hei\gh=(sirka-padding) sice zabere, ale bohuzel to odecte padding taky v Mozzile a tak je nastavená výška spatne. Ještě něco jsem zkoušel, ale potrebuji najít nějaký chyták, který zabírá jen na Operu.

Díky za pomoc
Plaváček
Profil
radim24

Nechci být za šťourala, ale řekl bych, že bys mnohem lépe prospěl sobě i ochotným pomocníkům, pokud bys místo sáhodlouhého slovního popisu uvedl odkaz na živou ukázku s konkrétním problémem. Ostatně tvořit CSS kód a snažit se odlišit jednotlivé prohlížeče či jejich konkrétní verze je přímou cestou do kodérského podsvětí.

Nicméně - http://diskuse.jakpsatweb.cz/index.php?action=vthread&topic=16498&forum=7&page=-1. Netuším ale, zda ještě v nových verzích Opery tento hack funguje.

Pokud ještě ano, je to fajn, nicméně je dost pravděpodobné, že jednou fungovat přestane.
Bubák
Profil
Zdá se, že chceš vytloukat klín klínem a zaplevelit si stylopis hackama. Zřejmě bude lepší, když dáš odkaz na problémovou stránku (živá ukázka).
radim24
Profil *
Zatím mohu poskytnout jen tento html kód:


Nyní testuji na Opeře Verze 9.27 a to samé:

Div který vidíš vlevo:

#top-logo {
padding-top:29px;
display:inline;
text-align:center;
width:140px;
height:120px;
background: #D3ECFA;
}

Očekává se výška 120 px ... je však 149 px (120+29).
Doma jsem to dočasně řešil vložením 1x29px dlouhého gifu, to ale nemohu aplikovat všude.
radim24
Profil *
<html>
<head>
<title>Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<style type="text/css">

body {
font-size: 75%;
}

html>body {
font-size: 10px; 
}

body {
background-color: #EDF9FF;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { 
font-family: Arial, Helvetica, sans-serif;
margin:0; 
padding:0; 
} 

blockquote {
text-indent: 27px;
font-size:1.18em;
}

H1,H2 {padding:12;}
H3 {padding:6;}

div {
float:left;
-moz-box-sizing: border-box; */pro Firefox */
-webkit-box-sizing: border-box; */pro Safari a Chrome */
box-sizing: border-box; */pro Operu */
}

div.clear {
float:none;
clear:left;
}

.HEAD, .CONTENT, .FOOT {
width: 1124;
float:none;
border-style:solid;
border-size:1;
}


#top-logo {
  padding-top:29px;
  display:inline;
  text-align:center;
	width:140px;
	height:120px;
	background: #D3ECFA;
}

/* DIV BLOK TOP CENTER */

#top-sq-1 {
	width:140px;
	height:85px;
	background: #ABD9F3;
}

#top-sq-2 {
	width:140px;
	height:85px;
	background: #B8DFF5;
}

#top-sq-3 {
	width:140px;
	height:85px;
	background: #C6E6F8;
}

#top_stred_10 {
  width:346px;
	height:35px;
	background: #red;
}

#top-spojka {
	width:74px;
	height:35px;
	background: #C6E6F8;
}

/* KONEC DIV BLOKU TOP CENTER */

#top-sq-4 {
	width:140px;
	height:120px;
	background: #D7EEFB;
}

#top-sq-5 {
	width:55px;
	height:120px;
	background: #EDF9FF;
}


</style>

<body>

<DIV class=HEAD>
   			<div id="top-logo"><img src="images/top_logo.gif" alt=""></div>

      	<DIV>
      			<div id="top-sq-1"></div> <div id="top-sq-2"></div> <div id="top-sq-3"></div>
      			
						<DIV class=clear></DIV>
      			 
						<div id="top_stred_10">
						  <img src="images/top_stred_10.gif" width="346" height="35" alt="">
      			</div>
      			<div id="top-spojka"></div>
      	</DIV>

      	<div id="top-sq-4"></div>
      		
       <DIV class=clear></DIV>
      

      

</DIV>


</body>
</html>
Bubák
Profil
radim24
Opravdu je tak těžké zaregistrovat se na nějakém freewebu a dát sem odkaz?
radim24
Profil *
Opravdu je to tak těžké vložit kód do html-kitu? :-) Stačí to jen přecvaknout. Bohužel nepracuji na svém počítači, takže to tak lehké není.
Nox
Profil
radim24
http://www.net2ftp.com/ ?
radim24
Profil *
Co je těžší zkopírovat html text a uložit to jako soubor nebo zakládat ftp účet?
radim24
Profil *
Odkaz - některé věci jsem už zkoušel, ale nezabraly:

http://www.doxdesk.com/personal/posts/css/20020212-bmh.html
Bubák
Profil
Co je těžší zkopírovat html text a uložit to jako soubor nebo zakládat ftp účet?
Zapoměl jsi na to, že si případní řešielé budou muset namalovat obrázky top_logo.gif (rozměry?) a top_stred_10.gif a uložit je do složky images. Řešitelé jsou líní, dějají to zadarmo, taj jim holt musíš svůj problém strčit na zlatém podnose až pod nos.

Bohužel nepracuji na svém počítači, takže to tak lehké není.
Není tam Průzkumník Windows? Stiskneš Win+E, napíšeš adresu FTP serveru, vyplníš přihlašovací údaje a jedeš.
radim24
Profil *
Ale ty obrázky nejsou třeba. Já si to prohlížím bez obrázků, pouze html stránku. Ale teď už je to jedno. Za chvíly končím, takže se tu stavím zas až v pondělí. Fakt nepotřebujete víc než to html. Je to tak prosté. já jsem to měl tady otevřené v Opeře za 15 sekund.
Radim24
Profil *
budiž
http://pravatvar.wz.cz/test.htm
radim24
Profil *
opakuji, jde o ten box uplne vlevo
Bubák
Profil
Máš tam chybně CSS komentáře:
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=93935#17

Jiná možnost je použít DTD pro (téměř) standardní režim a upravit rozměry v CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Nebo použít DTD pro standardní režim a spokojit se s ořezanou verzí HTML:
<!doctype html public "-//W3C//DTD HTML 4.01//EN">

Pokud sem vkládáš kód, dávej ho tlačítkem do [рrе][/рrе].
Radim24
Profil *
Bubák:
Vůbec ti nerozumím. Nevím co je to DTD.

Nekompatibilitu prohlížečů pokud jde o nastavení padding, jsem vyřešil vnořením samostatné DIVU s paddingem, zatímco parametr s rozměrem je v nadřazeném DIVU.
Chamurappi
Profil
Reaguji na Radima24:
div {
float:left;
-moz-box-sizing: border-box; */pro Firefox */
-webkit-box-sizing: border-box; */pro Safari a Chrome */
box-sizing: border-box; */pro Operu */
}
Zapisuješ špatně komentáře. Když jsem obalil tvůj kód do [pre], je to díky zdejšímu zvýrazňování syntaxe krásně viditelné.
Bubák
Profil
Vůbec ti nerozumím. Nevím co je to DTD.
www.jakpsatweb.cz/doctype.html asi nejlepší článek v češtině, přesto s chybami

Nekompatibilitu prohlížečů pokud jde o nastavení padding, jsem vyřešil vnořením samostatné DIVU s paddingem, zatímco parametr s rozměrem je v nadřazeném DIVU.
Matrjoška, pravděpodobně nejčastější řešení tohoto problému, více třeba http://ie-brouci.dero.name/box-model.html
Radim24
Profil *
To Bubák.
Ten první odkaz mi nepřijde moc aktuální.
K tomu druhému odkazu. Už jsem se těma hackama zabýval a připadá mi nejspolehlivější a nejpřehlednější řešit to tím vnořeným DIVem. Verze prohlížečů se pořád mění a co funguje dnes, zítra fungovat nemusí (v jiné verzi prohlížeče), proto mi vnořený DIV připadá jistý.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: