Autor Zpráva
Seb_
Profil *
Ahoj,
chtěl bych Vás požádat o pomoc...
Chci udělat aby web vypadal cca takto:


Zkoušel jsem to dělat v css, ale narazil jsem na tyto problemy:
- Patika nedorazi uplne k okrajum ok na IE
- Kdyz chci umistit hlavni na pozici 20% z prava a 75px odspodu, hodi to hlavni nekam uplne jinam
- - muzete poradit jak seznam napozicuju vodorovne, taky aby z nej mohlo byt menu? Nebo to mam delat klasicky:
<div class="polozkamenu"> Menu1 </div><div class="polozkamenu"> Menu2 </div><div class="polozkamenu"> Menu3 </div> ??

Web mam v NB, takze jeste doplnim presny zapis css.
S pozdravem a předem děkuji za radu nebo i za vas cas.

Seb
Manq
Profil
K tomuhle nemusíš využívat žádné position. Stačí float.
Seb_
Profil *
K tomuhle nemusíš využívat žádné position. Stačí float.
float? Promin, ale nechapu jak vyuziju obtekani?
Manq
Profil
http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
Seb_
Profil *
tak uz jsem pochopil, jak vyuziju obtekani, ale taky je mi jasne, ze ne vsechny prvky budou mit nastaveno float, muzes/muzete mi prosim poradit, ktere prvky by meli byt s hodnotou float a ktere nechat jak jsou ?
Manq
Profil
Tak .hlavni a .patika mít nebudou. Zkoušej to.

<div class="polozkamenu"> Menu1 </div><div class="polozkamenu"> Menu2 </div><div class="polozkamenu"> Menu3 </div> ??
Takhle určitě ne, nýbrž takhle ul li {float:left;}
Joker
Profil
Jak bych asi postupoval já (jen analýza a netvrdím, že je to správně :) )
- Flash bude mít float: left.
- Hlavní kontejner a menu možná budou potřebovat matrjošku (aneb "nedáš-li tam matrjošku, nabije si JESPR držku" :) )
- Celá stránka bez patičky bude v jednom kontejneru, který se přes margin napozicuje tak, jak to je na obrázku.
- Patička bude zvlášť.
- Pokud má patička být na spodním okraji okna i když stránka je kratší, tak bude celá stránka včetně patičky potřebovat ještě jeden kontejner (aneb vychytávka s kontejnerem s position:relative a min-height: 100% a patička pozicovaná na jeho spodek... k vidění třeba na mém webu, je to popsané i někde tady na fóru).

edit:
- jo a menu, tlačítka vedle sebe... buď prostě display: inline, nebo přes float
xlx21
Profil
Zkoušel jsem to dělat v css, ale narazil jsem na tyto problemy:
- Patika nedorazi uplne k okrajum ok na IE
- Kdyz chci umistit hlavni na pozici 20% z prava a 75px odspodu, hodi to hlavni nekam uplne jinam
- - muzete poradit jak seznam napozicuju vodorovne, taky aby z nej mohlo byt menu?



Tak

1, na to abi to vsetko dorailo tak ako ma sa pouziva margin="0px"; cim definujes pre vsetky strany 0;
2.zoznam sa pozicuje vodorovne s selektorom float="left" a odstranic pocitanie display="inline" v IE
3. Ak chces spravim ti to a poslem.
xlx21
Profil
Ahoj,
chtěl bych Vás požádat o pomoc...
Chci udělat aby web vypadal cca takto:


Tak stacilo trosku pismenkovania kodu a mame vysledok.

Ukazka:



Zdrojak:

<!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>

<style type="text/css">

body {


}

#flash {
   position:absolute;
   top:30px;
   left:95px;
   width:200px;
   height:400px;
   border:1px solid #000000;
 }

#content {
   position:absolute;
   top:30px;
   left:296px;
   width:599px;
   height:400px;
   border:1px solid #000000;
}

#foot {
position:absolute;
   top:431px;
   left:95px;
   width:800px;
   height:150px;
   border:1px solid #000000;
}

.menu {
	position:absolute;
	left:-1px;
	width:599px;
	height:30px;
	border:1px solid #000000;
	top: -1px;
 }
 
.menu ul {
    position:absolute;
	margin-top:0px;
    width:250px;
    left:310px;
	height:30px;

 }
 
 .menu ul li {
    margin-top:0;
    display:inline;
	display:block;
	float:left;
	padding:5px 20px 0px 20px;
 }

.menu ul li a {
    text-decoration:none;
}

</style>
</head>

<body>

<div id="flash">

</div>

<div id="content">

<div class="menu">

<ul>

<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>


</ul>
   



</div>


</div>

<div id="foot">

</div>


</body>
</html>
habendorf
Profil
xlx21

Tak tohle je extrémní prasečina.
xlx21
Profil
Tak tohle je extrémní prasečina.


tohle je to co chcel.
Měsíček
Profil
xlx21

někdy i taková věta pomůže.
xlx21
Profil
někdy i taková věta pomůže.

Tak skus ti psat to co mas a nie jenom tak cmarat jo?
Měsíček
Profil
promiň, ale tuhle větu jsem nepochopil :)
xlx21
Profil
promiň, ale tuhle větu jsem nepochopil :)


chcel poradit a ja som mu poradil
Měsíček
Profil
Aha tak to se omlouvám já tam pořád viděl jako kdyby otazník :-))) a ono to bylo konstatování tak to ještě jednou promiň :)
habendorf
Profil
tohle je to co chcel.

Fakt? Myslíš že chtěl, aby mu text vytékal ven z boxů, například? Inu možné to je, pravděpodobné nikoliv.
Manq
Profil
chcel poradit a ja som mu poradil
To sice ano. Ale každá rada je lepší (dokonce i žádná), než ta tvá.
Seb_
Profil *
Tak tady je moje pracicka, nektere veci jsem prevzal z kodu od xlx21, za což mu děkuju.
(Ty převzane nemaji mezi vlastnosti a hodnotou mezeru, pisu s mezerama ;) )
Prosim o zhodnoceni zapisu, popř., pokud tam je nejaka nelogicnost, zbytecnost, bo podobně, tak me na ni upozornete.
Testoval jsem to pod FF 2.0.0.11, tam to jede dobre, ale pod IE 7.0 to dela problemy, bohuzel nedokazu posoudit, ktery zapis ... :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">;
  <title> Wanted czweb (project Alise) </title>
  </head>
  <body>
  <style type="text/css">
  .hlavni
  {
    border-width: 1px;
    border-color: black;
    border-style: solid;
    width: 500px;
    height: 600px;
    position: absolute;
    right: 15%;
    bottom: 95px;
  }
  
  .flash
  {
    border-width: 1px;
    border-color: flash;
    border-style: solid;
    width: 400px;
    height: 600px;
    position: absolute;
    float: left;
    top: -1px;
    left: -402px;
    margin: 0px;
    padding: 0px;
  }

  .menu {
    background-image: url('');
    background-repeat: repeat;
    background-color: red;
  	position:absolute;
  	left:-1px;
  	width:500px;
  	height:30px;
  	border:1px solid #000000;
  	top: -1px;
  }

  .menu ul {
    position:absolute;
    width:100%;
    height:30px;
    left:0px;
  	margin-top:0px;
  }

 .menu ul li {
    margin-top:0py;
    display:inline;
    display:block;
    float:left;
    padding:5px 20px 0px 20px;
  }

  .menu ul li a {
    text-decoration:none;
  }
  
  .paticka
  {
    width: 100%;
    height: 95px;
    border-width: 1px;
    border-color: black;
    border-style: none;
    background-image: url('pozadi.jpg');
    background-repeat: repeat;
    background-color: black;
    margin: 0px;
    position: absolute;
    right: 0px;
    bottom: 0px;
  }
  
  .prejdi
  {
    border-width: 1px;
    border-color: #323234;
    border-style: solid;
    background-color: #F0F1E9;
    padding: 1px;
    width: 120px;
    font-family: Arial CE;
    font-variant: small-caps;
    font-size: 8pt;
    text-align: right;
    color: #A7A4A1; 
  }

  .btnprejdi
  {
    border-width: 1px;
    border-color: #323234;
    border-style: solid;
    background-color: #484649;
    margin: 0px;
    padding: 1px;
    width: 20px;
    font-family: Arial CE;
    text-align: center;
    color: #A7A4A1;
  }
  </style>
  
  <div class="hlavni">
  <div class="flash">
  </div>
    <div class="menu">
    <form>
      <input type="text" name="hledej">
      <input type="submit" value="Go">
    </form>
      <div class="menu">
        <ul>
          <li> Menu1 </li>
          <li> Menu2 </li>
          <li> Menu3 </li>
        </ul>
      </div>
      <div id="submenu"> </div>
    </div>
    Text.
  </div>
  <div class="paticka">
    <form>
      <input type="text" name="prejdi" value="seznam.cz" class="prejdi" onClick="if (this.value!='') this.value='';">
      <input type="submit" value=">>" class="btnprejdi">
    </form>
  </div>
  </body>
</html>
Seb_
Profil *
A ještě bych měl asi doplnit jake chyby jsou na strance:
(pod IE)
- menu neni zarovnane doleva
- jeden cerveny prozek pod menu navic
- mezera (2px) mezi .flash a .hlavni

a ve FF
- menu neni zarovnane doleva
xlx21
Profil
A ještě bych měl asi doplnit jake chyby jsou na strance:
(pod IE)
- menu neni zarovnane doleva
- jeden cerveny prozek pod menu navic
- mezera (2px) mezi .flash a .hlavni

a ve FF
- menu neni zarovnane doleva



chce to pouzit margin s nulovou hodnotou a doladit. ...
posli screenshot ako mam ja nech vidim co sa tam deje aj v IE aj vo FF.
Zatim sa maj.
Seb_
Profil *
Ve FF (relativne dobre, ale menu neni zarovnane doleva...)
http://img245.imageshack.us/img245/5397/web1uq0.jpg

V IE7 (skoro vse blbe...)
http://img151.imageshack.us/img151/4779/web2ae3.jpg
xlx21
Profil
Ve FF (relativne dobre, ale menu neni zarovnane doleva...)


Mujscreenshot si videl co chces tam jeste zmenit.

P.S. Skontroluj verzi IE FF ve IE 6 nefunguje spousta veci.
Seb_
Profil *
xlx21: chce to pouzit margin s nulovou hodnotou a doladit. ...
vůbec nechpu, k čemu to bylo... popiš na co jsi to myslel...

Mujscreenshot si videl co chces tam jeste zmenit.
opět nechapu, co tim chces rict... :/

P.S. Skontroluj verzi IE FF ve IE 6 nefunguje spousta veci.
je nepsal nic o IE6, popravde ani ji nemam v pc....

btw: chtel jsem vedet, co zpusovuje to spatne chovani...
Manq
Profil
Ve FF (relativne dobre, ale menu neni zarovnane doleva...)
http://img245.imageshack.us/img245/5397/web1uq0.jpg

V IE7 (skoro vse blbe...)
]http://img151.imageshack.us/img151/4779/web2ae3.jpg
[/i]


Z obrázků nelze jednoduše a přesně poznat, co je příčinou tvých problémů. Kód uvedený výše je ten problémový? Když jsem ho zkusil v FF, tak se mi objevily pouze dva sloupce a patička. Menu nikde. Proto nás odkaž na tvou stránku, ať můžem s jistotou říci, co způsobuje tvé problémy.
Manq
Profil
btw: chtel jsem vedet, co zpusovuje to spatne chovani...
Tipoval bych to na absolutní pozicování. Zkus to pomocí float.
Seb_
Profil *
Na stránku se dostanete po kliknutí

Ale funguje relativne dobre jen pod FF 2.0.0.11 (nejspis jde o problem s divem, proto ma .menu nastaveno top: -16px; a to vyvolava zase problem u IE, kde je menu jen pulkou, ak kkde ma byt...)
Musim jeste hodne studovat.... :(
xlx21
Profil
Na stránku se dostanete po kliknutí

Ale funguje relativne dobre jen pod FF 2.0.0.11 (nejspis jde o problem s divem, proto ma .menu nastaveno top: -16px; a to vyvolava zase problem u IE, kde je menu jen pulkou, ak kkde ma byt...)
Musim jeste hodne studovat.... :(




Tento moj kod vid vyse ti musi fungovat presne podla mojho obr ed mas tam aj screenshot. A musis nekde mat xybicku ty, alebo posli link kde mas tu stranku upnutu a kukneme sa na to.
Seb_
Profil *
xlx21:
Zdravičko, neříkám, že ne nefunguje, to určitě ne, ale tahle stranka je vec na ktere bych se chtel podilet sam, neni to kvuli penezum nebo tak, jen proste se to chci naucit a vedet jak to mam delat....
Mozna jen jedna vec na tom tvem zapisu, ktera se mi moc nelibi: vsechny prvky rovnas od leveho horniho rohu, takze je to moc "nacpane" nalevo, tento web chci spis na stred. (ale ostatne ani ten muj zapis se tomu neblizi....:( )
A ten link je v minulem prispevku, staci jen kliknout na "... po kliknutí".
Tak pokud by jsi vedel, kde delam chybu

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: