Dobrý den chtěl bych se zeptat jak
se správně centruje pomocí .css
a pak to obalit
divem
zkoušel jsem to ale pokaždé se to dá na nový řádek
tady je to na živo :
http://extrazone.eu
na hoře mam panel pomocí
fixed-position
takhle vypadá normálně :
http://www.extrazone.eu/subdom/img/upload/images/B9HG.png
a když tam přidám např. mp3 player pokažde se to dá na nový řadek :
http://www.extrazone.eu/subdom/img/upload/images/BLZA.png
a chtěl bych na něj dát více věci ale nwm jak na to
muže mě tedy někdo prosím poradit ?
Omlouvám se za pravopisné chyby ale píši rychle...
Dobré ráno,
pokud chcete mít více objektů v jednom řádku, je nejlepší je "nafloutovat".
Tedy mít nějaký obsahový div, který udává šířku hlavičky, druhým divem si napozicovat jeden objekt a druhý dalším divem nafloutovat a případně marginem odsadit, je-li nutné.
Tedy názorně/smyšleně/ilustrativně dle vašich screenu:
Dobrý den ted to zkouším ale pořád se mě nedaří :(
pořad to je pod tím :(
když použiji
#mp3{<br /> top: 0px;<br /> width: 100%;<br /> position: absolute; left: 0px; top: 0px;<br /> text-align: right;</p> <p>}tak mě pak nefunguje dobře tlačítko to první (myslím display u toho první obrázku na tom panelu :(
position: absolute;
Pokud je mé grafické znázornění na screenu (dole) správné, upravte si zdroják do této podoby a bude to OK.
Source
<br /> <div id="fixedMenu"><br /> <div class="pruhledne"><br /> <div class="teaser"><br /> <img src="http://extrazone.eu/GamePortal/horni-panel/images/ikona1.png" class="otevrit" onclick="zobrazSkryj('oddil5')"><br /> <div class="rounded"><br /> <div id="oddil5" class="skryty" style="display: block;"><span style=" color: white"><br /> <img src="http://extrazone.eu/GamePortal/images/obrazky/ExtraZone_88x33.png"><br /> <br></p> <p></span> </div><br /> </div><br /> </div><br /> </div><br /> <div class="player"><embed player=""....></div><br /> </div><br />CSS
<br /> #fixedMenu {<br /> position: absolute;<br /> right: 0;<br /> top: auto;<br /> width: 100%;<br /> }</p> <p>.pruhledne {<br /> float: left;<br /> opacity: 0.6;<br /> }</p> <p>.player {<br /> float:right;<br /> margin-right: 10px<br /> }Nwm proč ale pořád mě to nejde :(
asi to vzdávám :(
A co vám konkrétně nejde? Hoďte na stránky ten váš přehrávač, ať to mohu zkusit přímo s ním, abych tedy viděl, co nám stále hapruje.
Začínám mít asi tušení, že chcete fixovat napevno pozici jak toho obrázku, tak i toho přehrávače s pohybem návštěvníka, že?!
To není nic složitého - bude to chtít zřejmě ještě jeden DIV. Rozhodně to nevzdávejte, dáme to dohromady. Jen musím vědět, co pořád hapruje.
No ukážu podle screenu:
takhle vypadá ten panel :
http://img.extrazone.eu/subdom/img/?di=1QGN (jestli ho vidíte jinak mám určitě někde chybu)
http://img.extrazone.eu/subdom/img/?di=NNJH (a takhle to chci v budoucnu, ale jestli nevyřeším jak něco přidat na stejný řádek můžu se s tím rozloučit :( )
takhle mam panel.css
#fixedMenu {width: 100%; position: fixed; top: auto; left: 0px; float: left;} </p> <p>.popsany {<br /> height: 35px;</p> <p>}<br /> .pruhledne {<br /> opacity: 0.6;<br /> filter: alpha(opacity=50);<br /> -moz-opacity: 0.5;<br /> -khtml-opacity: 0.5;<br /> }</p> <p>.teaser {<br /> background:#1A1A1A top no-repeat;<br /> border:5px solid #1A1A1A;<br /> font-size:16px;<br /> position:relative;<br /> padding: none;<br /> color:#1A1A1A;<br /> margin-bottom:15px;<br /> display: block;<br /> -webkit-border-top-left-radius: 10px;<br /> -webkit-border-top-right-radius: 10px;<br /> -webkit-border-bottom-left-radius: 10px;<br /> -webkit-border-bottom-right-radius: 10px;</p> <p>-khtml-border-radius-topleft: 10px;<br /> -khtml-border-radius-topright: 10px;<br /> -khtml-border-radius-bottomleft: 10px;<br /> -khtml-border-radius-bottomright: 10px;</p> <p>-moz-border-radius-topleft: 10px;<br /> -moz-border-radius-topright: 10px;<br /> -moz-border-radius-bottomleft: 10px;<br /> -moz-border-radius-bottomright: 10px;</p> <p>border-top-left-radius: 10px;<br /> border-top-right-radius: 10px;<br /> border-bottom-right-radius: 10px;<br /> border-bottom-left-radius: 10px;<br /> }</p> <p>html { background: black }<br /> a { color: white; text-decoration: underline }<br /> a:hover { color: white; text-decoration: none }<br /> .otevrit {cursor: pointer; cursor: hand; text-decoration: underline; display: block; }<br /> .otevrit:hover {cursor: pointer; cursor: hand; text-decoration: none; color: white}<br /> .skryty {display: none; color:white; border:1px solid #808080; width:300px; background:#1A1A1A; font-size:12px; position:absolute; left:0px; top:20px;<br /> top:28px; padding:10px; z-index:100; font-weight:normal; text-decoration:none;<br /> -webkit-border-top-left-radius: 10px;<br /> -webkit-border-top-right-radius: 10px;<br /> -webkit-border-bottom-left-radius: 10px;<br /> -webkit-border-bottom-right-radius: 10px;</p> <p>-khtml-border-radius-topleft: 10px;<br /> -khtml-border-radius-topright: 10px;<br /> -khtml-border-radius-bottomleft: 10px;<br /> -khtml-border-radius-bottomright: 10px;</p> <p>-moz-border-radius-topleft: 10px;<br /> -moz-border-radius-topright: 10px;<br /> -moz-border-radius-bottomleft: 10px;<br /> -moz-border-radius-bottomright: 10px;</p> <p>border-top-left-radius: 10px;<br /> border-top-right-radius: 10px;<br /> border-bottom-right-radius: 10px;<br /> border-bottom-left-radius: 10px; }<br /> #ZK { background: url(http://extrazone.eu/GamePortal/horni-panel/images/ikona1.png); display: block;}<br /> #ZK h2 { text-align: center; display: Block; line-height: 349px;; color: red;}</p> <p>(musí tam zůstat správně #fixedMenu nebo se ten panel nebude posouvat ze stránkou )a tahle to mám vložený na webu :
http://img.extrazone.eu/subdom/img/?di=VDNN
Takže jde vlastně o to, co jsem napsal v předchozím příspěvku.
Udělal jsem si to pomocí Firebugu ve Firefoxu a funguje to ok.
Takže header takto:
<div id="fixedMenu"><br /> <div class="pruhledne"><br /> <div class="teaser"><br /> <img onclick="zobrazSkryj('oddil5')" class="otevrit" src="http://extrazone.eu/GamePortal/horni-panel/images/ikona1.png"><br /> <div class="rounded"><br /> <div class="skryty" id="oddil5"><span style=" color: white"><br /> <img src="http://extrazone.eu/GamePortal/images/obrazky/ExtraZone_88x33.png"><br /> </span></div><br /> </div><br /> </div><br /> </div><br /> <div class="player"><br /> <iframe width="239" scrolling="no" height="20" frameborder="0" style="center" marginwidth="0" marginheight="0" src="http://www.test.extrazone.eu/player/dewplayer-rect.swf"></iframe></div><br /> </div>A CSSko takto:
#fixedMenu {<br /> left: 0;<br /> position: fixed;<br /> top: auto;<br /> width: 100%;<br /> }</p> <p>.pruhledne {<br /> float: left;<br /> opacity: 0.6;<br /> }</p> <p>.player {<br /> float: right;<br /> margin-right: 10px;<br /> }Výsledek viz screen - je to ono? :cool:
vložil jsem to tam přesně jak jste to poslal vy
a teď to vidím takto :
http://upload.extrazone.eu/files/ted-takto.png
já už nevím :(
ne jde to ale chvilku trvalo než se to uložilo na server :)
Děkuji moc za pomoct nedá se to nějak zarovnat přesně na střed ?
(nemyslím úplně na střed ale aby ten player nebyl tak nahoře
Vida, super... Doporučuji na to vertikální srovnání použít taky margin - konkrétně: margin-top: 3px ve třídě obsah. Blbý je jen, že ji máte použitou i na ty hodiny, takže bych pro hodiny udělal vlastní třídu a zarovnal ji dle potřeby. :)
A jelikož měníte převážně CSS vlastnosti, každou změnu musíte refreshovat "keš" ve vašem prohlížeči, aby se vám vůbec zobrazila (CTRL+F5). :)
No musím ještě na to mrknout
pro každou věc co chci panelu bude mít svoji třídu jen kapku nwm jak na to :)
ale snad na to dojdu
zatím děkuji moc za pomoct...
Paráda - pokud budete ještě potřebovat poradit, nechám toto vlákno týden otevřené. Po týdnu jej uzavřu jako vyřešené - v případě dalších dotazů si založíte téma nové, což určitě nebude problém. :)
Ale pokud by se něco v nejbližší době ohledně toho ještě objevilo, můžete to napsat samozřejmě sem. :???: