Autor Zpráva
Roman-W
Profil
Zdravím registroval jsem se tady protože potřeboju vyřešit takovej problém s tabulkou.

ukázka:

<TABLE BORDER  ALIGN=CENTER CELLPADDING="2" CELLSPACING="4" >
    <TR><TH width="180" height="136"><img src="images/magnum.jpg"/><>        
    <TH width="708">
    <TR><TD height="135"><img src="images/magnum.jpg"/>       
    <TD>text
    <TR><TD height="136"><img src="images/magnum.jpg"/>       
    <TD>text
    <TR><TD height="136"><img src="images/magnum.jpg"/>       
    <TD>text
</TABLE>

Nevím jak mám ovlivnit text tabulky přitom celá stránka má atribut nastavený
<BODY BGCOLOR=BLACK LINK=LIME ALINK=RED VLINK=LIME>
Ale tabulka to pořád ignoruje...

Poslední věc je že chci mít v pravém sloupečku text zarovnaný nahoru do leva
Martin02
Profil
Roman-W:
Ahoj,
jak chceš ovlivnit obsah tabulky? Moc jsem to nepochopil, co vlastně chceš. Chceš, aby měl jinou barvu, velikost nebo co?
Roman-W
Profil
Martin02:
Pozadí stránky je černé proto musí bejt písmo bíle ale dělat to na každý řádek zvlášt :( to musí jít nějak hromadně, nebo né?

Jde o tabulku o dvou sloupcích a "X" řádků v levém sloupci budou obrázky v pravém zase text ale ten musí bejt zarovnán do levého horního rohu nikoliv do prostřed.
juriad
Profil
nikde v ukázce nenastavuješ barvu textu, jen barvu odkazů

přečti si něco o CSS na JPW

pro inspiraci:
<html>
<head>
<style>
    /* style muzes presunout do jineho souoru, at ho nepises na kazdou stranku */

    body {
        /* cela stranka */
        background-color: black;
        color: white;
    }

    a:visited, a:link {
        /* odkazy */
        color: lime;
    }

    a:active {
        /* odkazy */
        color: red;
    }

    td, th {
        /* kazda bunka tabulky, pokud neni receno jinak */
        padding: 2px;
        border-width: 1px;
        text-align: left;
        vertical-align: top;
        width: 708px;
    }

    td.levy, th.levy {
        /* pouze levy sloupec tabulky */
        /* jen ten bude dvojnasobne siroky oproti obrazku */
        width: 360px;
        /* a obrazek bude na stredu bunky */
        text-align: center;
    }

    table {
        /* cela tabulka */
        margin-left: auto;
        margin-right: auto;
    }

</style>
<title>Moje úžasná stránka</title>
</head>
<body>

<table cellspacing="4px">
    <tr>
        <th class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></th>
        <th>nadpis</th>
    </tr>
    <tr>
        <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
        <td>text</td>
    </tr>
    <tr>
        <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
        <td>text</td>
    </tr>
    <tr>
        <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
        <td>text</td>
    </tr>
</table>

</body>
</html>
Roman-W
Profil
juriad:
Výborně moc krát díky jediné co jsem změnil bylo

td.levy, th.levy {
               width: 180px;
(nevím proč by to mělo být: dvojnasobne siroky oproti obrazku)


Jinak se chci zeptat když si rozměr oken tabulky udělal ve style, není pak zbytečné psát rozmery na každý řádek 52/56/60/64 ?

Zkusil jsem soubor otevřít v Mozille a tabulka má neviditelný rámování :ˇ(
juriad
Profil
Velikosti jsou určeny pro obrázek, ne pro buňku, navíc se doporučuje je vždy uvádět: Obrázky v HTML
Těch 360px byla jen ukázka toho, že buňka může mít vlastnosti, které nevyplývají z jejího obsahu (tady je vidět, že velikost buňky se liší od velikosti obrázku)
Samozřejmě, pokud by se ti opravdu měl opakovat jen jeden obrázek, tak můžeš do style přidat něco jako a vynechat rozměry v tagu <img>:
img {
  width: 180px;
  height: 136px;
}
Roman-W
Profil
juriad:

Ve finále by to mělo být takto:
http://2i.cz/2i/i/4f8c5934/ff43661da5cdc6afe318f162ac0b1b5e/ea3de3c91a.f.jpg

Obrázky budou pevně stanoveny na 180x135 pujde vždy o nějaký obrázek co bude reprezentovat danou galerii

Pravý sloupeček bude obsahovat nějaké povídání a dole bude odkaz na galerii (šíře bude nejspíš 700)

Řádky budou postupem času přibejvat....

PS: proč nejsou vidět rámy jsi neodpověděl
juriad
Profil
odkaz vede na: >>ea3de3c91a.f.jpg: GIF image data, version 89a, 1 x 1<<, to asi nebyl záměr...

Vítej ve světě, kde si každý prohlížeč dělá, co chce!
vždy musíš uvést přesně, co chceš:
td, th {
border-width: 2px;
border-style: solid;
border-color: red;
/* nebo ekvivalentně */
border: 2px solid red;
}
 
Roman-W
Profil
juriad:
Fajn už to běhá jak má...díky moc
Roman-W
Profil
juriad

už jsem myslel že je všechno vyřešeno ale není. při zmenčení okna prohlížeče (horizontalne) dojde ke změně rozměru tabulky a text jednotlivé řádky
rozhodí mimo zadanou hodnotu :(

Jak tedy udělám aby např na monitoru 800/600 byl na stráce rolovací pruh ? tzn aby tabulka byla pevná neměná

Viz obrázek:
http://2i.cz/27a47a5083
alternativní odkaz:
http://2i.cz/2i/i/4f8ed3cd/b34bd30096df5ec57b9590c479315ec3/27a47a5083.p.jpg
juriad
Profil
Toto je naprosto správné zobrazení:
Buňka nemá uvedenou výšku, tedy se protáhne tak, aby se obsah vešel.
Mohlo by tě zajímat: Overflow
Roman-W
Profil
juriad:
článek sem prošel ale nepovedlo se mi aby moje strának na to reagovala......už fakt nevím kam to napsat


Nakopíroval sem celou stránku tak mi prosím řekni kde je třeba chyba a co bych měl změnit a hlavně kam napsat overflow :( :(



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Style-Type" content="text/css; charset=windows-1250">
<meta name="author" content="Roman-W 2012"> 
<meta name="generator" content="Dreamweaver 8">

<style>
    
    body {
        background-color: black;
        color: white;
    }
 
    a:visited, a:link {
        color: lime;
    }
 
    a:active {
        color: red;
    }
 
    td, th {
    border: 1px solid white;
        padding: 2px;
        text-align: left;
        vertical-align: top;
        width: 700px;
   }
 
    td.levy, th.levy {
        width: 180px;
        text-align: center;
    }
 
    table {
        margin-left: auto;
        margin-right: auto;
        

    }
 
</style>

<link rel='icon' href='ikona.gif'>

<TITLE>EL840</TITLE>


<!--WZ-REKLAMA-1.0-->
................................reklama webzdarma.......................................
<!--WZ-REKLAMA-1.0IK-->
 

        


    

<table cellspacing="4px">
    <tr>
        <th class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></th>
        <th width="718">Jako zdroj VN pro tento velký Jakubův žebřík jsem použil 4 MOTy (transformátory z mikrovlnek). Jsou zapojené primáry paralelně a sekundáry do série s "uzemněným" středem a podepřené sítí. Dva z MOTů (1. a 4.) bylo nutné odzemnit. Odzemnit nelze jakýkoliv MOT. Je nutné vybrat nějaký s dobrou izolací sekundáru. Nejlepší se zdá typ s plastovou kostrou (např. Moulinex). Původní napětí je 2100V na živém konci a 0V na studeném konci proti zemi. Odzemněné MOTy 1 a 4 vidí 4200V na živém konci a 2100V na studeném konci.</th>
    </tr>
    <tr>
        <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
        <td>text</td>
    </tr>
    <tr>
        <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
        <td>text</td>
    </tr>
    <tr>
        <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
        <td>text</td>
    </tr>
</table>




</BODY>
</HTML>
juriad
Profil
nutné změny jsou:
obalení textu do divu (třídu jsem mu přiřadil, protože někdy budeš třeba chtít neomezený div uvnitř tabulky)
nastavení výšky, která je shodná s levým sloupcem
další změny:
th je hlavičková buňka tabulky, má význam nadpisu pro sloupec, obyčejná buňka je td

31,36d30
<     td div.scroll {
<         overflow: scroll;
<         height: 136px;
<         font-size: 20px; /* jen aby to bylo videt, odstran */
<     } 
< 
68,69c62,63
<         <td class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></td>
<         <td width="718"><div class='scroll'>Jako zdroj VN pro tento velký Jakubův žebřík jsem použil 4 MOTy (transformátory z mikrovlnek). Jsou zapojené primáry paralelně a sekundáry do série s "uzemněným" středem a podepřené sítí. Dva z MOTů (1. a 4.) bylo nutné odzemnit. Odzemnit nelze jakýkoliv MOT. Je nutné vybrat nějaký s dobrou izolací sekundáru. Nejlepší se zdá typ s plastovou kostrou (např. Moulinex). Původní napětí je 2100V na živém konci a 0V na studeném konci proti zemi. Odzemněné MOTy 1 a 4 vidí 4200V na živém konci a 2100V na studeném konci.</div></td>
---
>         <th class="levy"><img src="images/magnum.jpg" width="180" height="136" alt="magnum"/></th>
>         <th width="718">Jako zdroj VN pro tento velký Jakubův žebřík jsem použil 4 MOTy (transformátory z mikrovlnek). Jsou zapojené primáry paralelně a sekundáry do série s "uzemněným" středem a podepřené sítí. Dva z MOTů (1. a 4.) bylo nutné odzemnit. Odzemnit nelze jakýkoliv MOT. Je nutné vybrat nějaký s dobrou izolací sekundáru. Nejlepší se zdá typ s plastovou kostrou (např. Moulinex). Původní napětí je 2100V na živém konci a 0V na studeném konci proti zemi. Odzemněné MOTy 1 a 4 vidí 4200V na živém konci a 2100V na studeném konci.</th>
Roman-W
Profil
Nějak se v tom vubec nevyznám :(
juriad
Profil
přidej do stylu:
td div.scroll {
  overflow: scroll;
  height: 136px;
  font-size: 20px; /* jen aby to bylo videt, odstran */
} 

a uprav tabulku:
th nahraď za td (th je buňka, která obsahuje nadpis sloupce) a obal obsah buňky <div class='scroll'>...</div>

je to výstup unixového programu diff; popisuje, které řádky přidat, upravit a odstranit
příště nekopíruj celý kód, dodej jen odkaz
Roman-W
Profil
juriad,

nahradi jsem hodnotu SCROLL za AUTO

Asi si mě nepochopil já chtěl celou stránku a né jen obsah bunky :(
Nastavit pro celou stránku např. pevný rozměr 1024/768 a když bude rozlišení menší objeví se horizontální rolovací pruh.
Jde o to aby obsah stránky byl vždy stejný a nijak se nezalamoval atp.
juriad
Profil
aha, nepochopil jsem, o co se snažíš.

tak udělej přesně to, co píšeš.
body {
  ...
  width: 1024px;
  /* misto toho muzes pouzit min-width, pokud je tvuj web trochu natahovaci */
  /* možná ještě overflow: auto */
}

mimochodem, 1024 není vhodná hodnota, viz bezpečná šířka webu, tedy použij raději něco jako 1003

pro ladění stylů doporučuji měnit je přímo v prohlížeči, dnes každý poskytuje nějaký vývojářský nástroj
Roman-W
Profil
juriad:

Paráda už to běhá :)))
Roman-W
Profil
CSS prakticky
Zkoušíte-li nové externí stylopisy tak, že je uložíte a občerstvíte linkovanou stránku, může se stát, že se neprojeví změna. Různě nastavené prohlížeče si totiž drží v cache paměti minulou verzi stylopisu, nebo něco zapomenete uložit. Proto doporučuji ladit napřed na nějaké stránce interní stylopis, a až když funguje, zkopírovat jej do externího.

Přesně na tohle sem doplatil že jsem si to nepřečetl jako první :( ted si mužu stylovat jak chci a mozille je to fuk
Roman-W
Profil
Roman-W:

Problém vyřešen widht vymazáno z BODY

a doplněno:


<div style="width: 1000px; margin-left: auto; margin-right: auto;">


...tabulka a obsah stránky


</div>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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