ugrás a tartalomhoz

Van-e erre css formázás?

aeternum · 2011. Jan. 20. (Cs), 07.19
A helyzet az, hogy nagyon szépen ki van találva egy kinézet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="font-size:9px; padding:0; margin:0; background:#6DEFEC;" marginheight="0px" marginwidth="0px" topmargin="0px"rightmargin="0px" bottommargin="0px" leftmargin="0px" >


<div style="width:240px; height:320px; background:#00CCFF;">

  <div style="height:50px;  ">
    <div style=" float:left; width:80px;  ">
	   <div style="background:#CC0000; height:30px; width:inherit;">logo</div>  
      <div style="background:#00FFFF; height:20px; width:inherit;">input azakasz</div>  
	 </div>  

    <div style=" float:right; width:160px;  ">
	   <div style="height:30px; width:160px; background:#FF9900;  ">cím</div>  
      <div style="height:20px; width:160px; background:#FF66CC;  ">kijelzés1 szakasz sor</div>  
	 </div>  
    <div style="clear:both"></div>  
   </div>
   
	<div style="height:20px; width:inherit; background:#FFFF00;  ">dátum sor</div>
   
	<div>  
     <div style="float:left; width: 80px;  background:#00CCFF; height:250px;">navigálás</div>  
     <div style="float: right; width:160px; height:250px;  ">
	    <div style="height:75px; width:inherit; background:#00FFFF;  "> űrlap helye         </div>
		 <div style="height:75px; width:inherit; background:#CC3300;  "> lekérdezés eredménye</div> 
		 <div style="height:100px;widtt:inherit; background:#FF33FF;  "> grafikon helye      </div>
       <div style="clear: both"></div>  
	  </div>  
      
   </div>
</div>  

<div style="clear: both"></div> 

</body>
</html>
És sima böngészőben úgy is néz ki, ahogy ki van találva.
Ám de!

Az Opera 9.6 kisnézet menüjével minden réteg új sorba kerül és ettől én is sírba! Mert, ugye, az arra való, hogy lássam, telefonon hogy néz ki a tartalom, vagy hogy nézne.

Van-e erre gyógyír a css-ben? Vagy más megoldás esetleg?
A táblázat jó is, meg nem is. Abban a pillanatban, hogy a táblázat túlcsordul az Opera szerinti szélességhatáron, abban a pillanatban ismét minden, ami a túlcsorduló entitáshoz tartozik, egymás alá rendeződik.

aet
‹ Miért nem működik a z-index? Menü ›
 ■
1

Ezt így ne..

ironwill · 2011. Jan. 20. (Cs), 11.15
Kezd azzal, hogy css class-okba ki teszed a formázásokat.. erre találták ki..
Mert ez így nagyon rontja a kód átláthatóságát..
marginheight="0px" marginwidth="0px" topmargin="0px"rightmargin="0px" bottommargin="0px" leftmargin="0px"
Ez valami mobil verziós beállítás? Különben nincs rá szükség, mert már beállítottad a margin: 0-t css-ben..

A clear-es div-et a közvetlenül a float-olt elem után kell tenni.. mindig. Egy próbát megér, hogy javít-e, vagy máshol kell a hibát keresni.
2

mobil?

aeternum · 2011. Jan. 20. (Cs), 13.14
Annak kéne lennie..
:)

Átírtam. Talán így jobban áttekinthető, de!

<style>
  body {
   margin:0px;
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding:0px;
   padding-bottom:0px;
   padding-left:0px;
   padding-right:0px;
   padding-top:0px;
   background:#6DEFEC;
   font-size:9px; 
 }

  .main_div {
    width:240px;
    height:320px;
    background:#00CCFF;
 } 

  .contFej {height:50px; }
    .contFej_sorCont1 {float:left; width:80px;}
      .contFej_sorCont1_sor1 {background:#CC0000; height:30px; width:inherit;}
      .contFej_sorCont1_sor2 {background:#00FFFF; height:20px; width:inherit;}

    .contFej_sorCont2 {float:right; width:160px;} 
      .contFej_sorCont2_sor1 {height:30px; width:160px; background:#FF9900;}
      .contFej_sorCont2_sor2 {height:20px; width:160px; background:#FF66CC;}

  .datum_sor {height:20px; width:inherit; background:#FFFF00;}

  .tartalom   {height: 250px;}
    .tartalom_bal      {float:left;  width: 80px; height:inherit; background:#00CCFF;  color:#000000;}
    .tartalom_jobb     {float:right; width:160px; height:inherit;}
      .tartalom_jobb_1 {height:75px; width:inherit; background:#00FFFF;}
      .tartalom_jobb_2 {height:75px; width:inherit; background:#CC3300;}
      .tartalom_jobb_3 {height:100px;width:inherit; background:#FF33FF;}

</style>


<body>
<div class="main_div">
  <div class="contFej">
    <div class="contFej_sorCont1"> 
      <div class="contFej_sorCont1_sor1" >logo</div>
      <div class="contFej_sorCont1_sor2" >input mezo</div>  
    </div> 
    <!-- Itt is volt a clear 50px-lel megtolta a jobb oldalt lefele -->

    <div class="contFej_sorCont2" > 
      <div class="contFej_sorCont2_sor1">cím</div>  
      <div class="contFej_sorCont2_sor2">kijelzés1 szakasz sor</div>  
    </div>
    <div style="clear:both"></div>
  </div> 


  <div class="datum_sor">dátum sor</div>
   
  <div class="tartalom">
    <div class="tartalom_bal">menu oszlop sor</div>
    <!-- Itt is volt a clear még 250px-t tolt lefele -->

    <div class="tartalom_jobb"> 
      <div class="tartalom_jobb_1"> űrlap helye         </div>
      <div class="tartalom_jobb_2"> lekérdezés eredménye</div> 
      <div class="tartalom_jobb_3"> grafikon helye      </div>
    </div>
    <div style="clear:both"></div>

  </div>
</div>  

</body>
De! Ha odarakom a clear-eket, közvetlenül a float-olt div-ek után, akkor széthullik még normál nézetben is.

Hogy a clear-ek hol vannak, az a mobilnézetet teljesen hidegen hagyja.
:(
3

Persze.. Bocs, ha félreérthető voltam.. :)

ironwill · 2011. Jan. 20. (Cs), 13.39
Úgy értettem, hogy az utolsó float-olt elem után közvetlenül:

<div>
    <div style="float: left">lorem</div>
    <div style="float: left">ipsum</div>
    <div style="float: left">dolor</div>
    <div style="clear:both"></div>
</div>
A float-olt elemek akkor szoktak egymás alá csúszni, ha az össz szélességük nagyobb, mint a böngésző ablak szélessége.
4

ráadásul :)

mortein79 · 2011. Jan. 20. (Cs), 14.02
Ráadásul a 0 dimenzió nélküli szám, vagyis nem kell kiírni a '0px'-t, elég az pl.: hogy 'margin: 0;' Ahogy látom, egyszer így van írva, egyszer úgy.

:) Gondolom amit onnan másoltak ahol ezt tudták ott ilyen, ahol meg nem ott olyan.
5

pikkel vagy nem pikkel

aeternum · 2011. Jan. 20. (Cs), 18.31
Igaz, off, de ha már meg lett említve..

A DREAMWEAVER jól csinálta, csak mivel én ölég tudatlan vagyok, ezért hallgattam tudós kollégám kritikájára, miszerint ki köll aztatat tönni! Így aztán ki is javítottam a JÓT Rosszra.
Lesz aki pikkel egy kis pixelért, lesz, aki nem!

DE!!! :)
A zeredeti bajom még mögvan, sattul, hogy ott van a px vagy nincs ott, a böngésző nem pikkel rám, csak nem csinálja meg, amit szeretnék.
S egyenlőre nem is némi pikkelésen múlik, úgy tűnik, mert akár ott van, akár nincs: mobilnézetben a div-ek teljes szélességűek és egymás alá rendezettek!
Kicsit mókoltam volna a színskálával, még a büszkeség színek is kijöttek volna!
:)

Szóval a kérdés példa nélkül: lehet befolyásolni valamilyen eszközzel a div szélességét?

Esetleg valamelyik JS keretrendszer használata segítene azzal, hogy a DOM-ot piszkálja?
6

Jobb eszköz

Poetro · 2011. Jan. 20. (Cs), 19.22
Mobilos használatra használj jobb eszközöket. Valamint elolvashatod, hogyan érdemes mobil böngészőkre fejleszteni, ha tényleg érdekel. Valamint a 9.6-os Opera nagyon régi használj inkább Opera Mobile-t illetve van minden okostelefonhoz emulátor.
7

Po apó! :)

aeternum · 2011. Jan. 21. (P), 15.42
Az én kis ecccerű, P3-asomat egy emulátor úgy megfekteti, mint a huzat!
:)))

Az Opera96 utáni kiadás(ok)ból eltűnt a kisnézet. Legalábbis az azt követőből biztosan, ezért léptem vissza. :)

Köszönöm a linket!!!!!
El vagyok ájulva! :))))))))))))))))))

OperaMobile
Régebben már néztem ezt, de valahogy nem tetszett, nem bírtam kezelni. Nekem nem jelemnt meg a laucher. DE EZ! Naon űűűber frankó! És még nem is kell gondolkodni sem, mert minden a helyén van!
:))))))

Ez tényleg emulálja a telefon nézetet?? Valóban azok szerint a szabványok szerint működik? Vagy csak utánozza? (kitalálja, hogy hogyan néz ki desktopon és azt besűríti adott kijelző méretre?)

Még egyszer HÁLÁM üldöz és ezt már sokadszorra mondtam Neked!
:))))))))))))
8

Megjelenés

Poetro · 2011. Jan. 21. (P), 16.06
Az Opera Mobile csak a mobiltelefonon elérhető Opera Mobile kinézetét és működését emulálja. Egyébként nem ez az egyetlen mobil eszközökön elérhető böngészője az Operának, létezik még a jóval kevesebbet tudó Opera Mini is. Rajtuk kívül pedig még több tucat böngésző versenyez a különböző okos, és kevésbé okos telefonokon a felhasználókért. iPhone-on a mobil Safari, Android alapokon a Webkit motor egy másik változata, elterjedt még például a NetFront, ami Sony Ericsson és Samsung telefonokon fordul elő többek között, valamint a Nokiának, BlackBerry-nek is van saját böngészője.

Ezek általában mind másként működnek, más hibákkal és szolgáltatásokkal rendelkeznek. Azaz nincs szinte semmilyen mód, amivel minden böngészőben ugyanúgy nézzen ki. A lényeg, hogy használható legyen.