PC-HELP.CZ

Zdravim, dělám teď na svém projektu zvaném Mass Gaming a chtěl bych poradit, mám stránky v HTML, ale jak dát pod logo text ukáži vám obrázek jak to myslím.
A ještě výpis mého indexu:
<body background="bg.jpg" bgcolor="black">
<br><br><br>
<table align="center" cellpadding="0" cellspacing="0" height="1500" width="1500">
<tbody><tr>
<td valign="top"><table align="center" background="logo.png" cellpadding="0" cellspacing="0" height="150" width="800">
<tbody><tr>
<td valign="top"><table cellpadding="0" cellspacing="0" height="150" width="800">
<tbody><tr>
<td width="68"> </td>
<td valign="bottom" width="1500"><div class="style1" align="center"><br>
<font color="grey" face="Arial"><br>Vítejte na nových stránkách pořadu Mass Gaming! Připravujeme pro vás spousta zajímavého obsahu jako herní streamy, pořady, soutěže a spousta dalších aktivit. Doufáme, že se vám bude náš projekt a celkové snažení líbit a že ho i oceníte<font><div>
</td>
<td width="45"> </td>
</tr>
</tbody></table>

V čem si tohle stvořil? To je hrozná konina - bez urážky ...

Musí to být striktně jen HTML? CO použít i CSS? ... a žádný šílený tabulky

Upravil jsem to, css mam taky ale nevím jestli to sem mělo smysl dávat dám sem svůj nový index + to styles.css
index
<body background="bg.jpg" bgcolor="black">
<tbody><tr>
<td valign="top"><table align="center" background="logo.png" cellpadding="0" cellspacing="0" height="150" width="800">
<tbody><tr>
<td valign="top"><table cellpadding="0" cellspacing="0" height="150" width="800">
<tbody><tr>
<td width="68"> </td>
<td valign="bottom" width="750">

<font color="grey" face="Arial"><br>Vítejte na nových stránkách pořadu Mass Gaming! Připravujeme pro vás spousta zajímavého obsahu jako herní streamy, pořady, soutěže a spousta dalších aktivit. Doufáme, že se vám bude náš projekt a celkové snažení líbit a že ho i oceníte<font><div class="style1" align="center">
<img src='social.png" usemap="#Map2" border="0"
</tbody></table></td>
</tr>
</tbody></table>
<map name="Map2" id="Map2"><area shape="rect" coords="1,29,60,89" href="www.facebook.com" target="_blank">
<area shape="rect" coords="80,29,139,89" href="http://twitter.com/MassGaming" target="_blank">
<area shape="rect" coords="157,29,218,90" href="http://google.com" target="_blank">
</map>

</body></html>

styles.css
body {background: url('bg.jpg') no-repeat top center;
background-color: #f0f0f0;
background-repeat: no-repeat;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 50px;}

body,td,th
{font-family: Verdana;
font-size: 12px;
color: #999999;}

a:link {color: #6b6762;
text-decoration: none;}

a:visited
{text-decoration: none;
color: #6b6762;}

a:hover
{text-decoration: underline;
color: #a0bc1c;}

a:active
{text-decoration: none;
color: #a0bc1c;}

.style1 {line-height: 250%;}

.style2 {color: #71863b}
.style3 {color: #505050}

--- Doplnění předchozího příspěvku (18 Led 2014 18:25) ---

Zkoušel jsem upravit .style1 na line-height 250%, ale to nepomohlo dával jsem tam místo procent i pt, jako pixely, ale to taky nic

zapomeň na tabulky nebo obrázkovou mapu - takhle se to nedělá

co třeba takhle?

Kód: Vybrat vše

<!DOCTYPE HTML>

<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
  <!--
  body {
    background: #000000 url(bg.png);
    font: 12pt Tahoma, Geneva, sans-serif;
    color: #999999;
  }

  #page {
    width: 800px;
    margin: 0 auto; /* vycentrování na střed */
    text-align: center;
  }

  #header {
    background: url(logo.png) no-repeat center;
    height: 150px;
    margin-top: 50px;
  }

  #main {
    margin: 50px 0;
  }
  -->
  </style>
</head>

<body>

<div id="page">

<div id="header"></div>

<div id="main">
  <p>Vítejte na nových stránkách pořadu Mass Gaming! Připravujeme pro vás spousta zajímavého obsahu jako herní streamy, pořady, soutěže a spousta dalších aktivit. Doufáme, že se vám bude náš projekt a celkové snažení líbit a že ho i oceníte.</p>
</div>

<div id="footer">
 <img src="facebook.png" width="32" height="32" alt="Facebook">
 <img src="twitter.png" width="32" height="32" alt="Twitter">
 <img src="googleplus.png" width="32" height="32" alt="Gooogle+">
</div>
</div>


</body>

</html>

Doporučuji prostudovat web jakpsatweb.cz, jistě se ti to bude hodit. Předpokládám, že nezůstaneš jen u jedné stránky a bude jich víc...

Asi znám starou dobu, ta mderní doba....

Děkuju moc, jen tu mapu mam proto, že já mám jeden obrázek a v tom mam Fb, tweet a g+ tak proto jsem dělal mapu :) Ale ve photoshopu to oříznu na 3 různé obrázky :))

Rodělovat to nemusíš... Použij CSS sprite viz http://jecas.cz/css-sprite

LuCaCZ: a jak potom udělá 3 různý odkazy pomocí <a> a ne přes debilní mapu?
btw funguje ta mapa na mobilech?

Zeptám se na jednu otázku proč místo čárek a háčků v tom textu mám otazníky?
A ty ikony jsem rozdělil na 3 kousky ve photoshopu a ta mapa funguje na mobilech tu mam odzkoušenou :)
A ještě normálně aby mi ten obrázek někam odkazoval tak to musím dát do <a href="www.yotube.com/********"><img src="facebook.png" alt="Facebook"></a> ??

Asi máš špatný kódování stránky - musíš mít stejný kódování dokumentu i souboru.

CZechBoY píše:LuCaCZ: a jak potom udělá 3 různý odkazy pomocí <a> a ne přes debilní mapu? ...

► Zobrazit spoiler

Fir3stPlays píše:...
A ještě normálně aby mi ten obrázek někam odkazoval tak to musím dát do <a href="www.yotube.com/********"><img src="facebook.png" alt="Facebook"></a> ??

přesně tak

Jotakhle, přes css sprite, já myslel že chceš nechat mapu a do ní nějak dát odkazy.
Takhle to je asi nejlepší :-)

Děkuju moc, ještě jedna otázka jak vymezit ty modro-fialové barvy když je mezi nimi mezera?

: dialova.PNG (47.91 KiB) Zobrazeno 457 x

PC-HELP.CZ

Přendání textu

Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu

Re: Přendání textu