Problém se stylopisem

2.8.2020 00:41 | Přečteno: 1813× | poslední úprava: 2.8.2020 00:53

Ahoj,

potřeboval bych poradit s obtékáním obrázku. Chtěl bych to mít takhle. Ale pořád mi vychází toto

Stylopis vypadá takto:

body{                                                                                                                         
    background-color:  black ;                                                                                                
    height:100%;                                                                                                              
}                                                                                                                             

                                                                                                                              
h1,h2,h3,h4{                                                                                                                  
    color: #f1c40f ;                                                                                                          
    margin-left: 3%;                                                                                                          
}                                                                                                                             

                                                                                                                              
p{                                                                                                                            
    color:  #58d68d;                                                                                                          
    margin-left: 3%;                                                                                                          
    margin-right:5%;                                                                                                          
    text-align:justify;                                                                                                       
}                                                                                                                             

                                                                                                                              
ul,li{                                                                                                                        
    color:#58d68d;                                                                                                            
    margin-left:1%;                                                                                                           
}                                                                                                                             

                                                                                                                              
a:link {color:#00FF40}                                                                                                        
a:visited {color:#00FF40}                                                                                                     
a:link, a:visited {text-decoration: none}                                                                                     
                                                                                                                              
}                                                                                                                             

                                                                                                                              
 img {                                                                                                                        
     float: rightt;                                                                                                           
                                                                                                                              
                                                                                                                              
 }           

Zkoušel jsem to mnohokrát. Nicméně, chybu se mi nepodařilo najít.

Rád bych se časem dopracoval k něčemu jako generátoru html stránek, ale abych to mohl vůbec zkoušet, musím to umět udělat ručně. Obsahu stránek si nevšímejte, je to jen výplň. Na funkčním textu se ladí o něco líp.

       

Komentáře

[Bherzet]

Jestli to bude stačit nevím, ale tady máš překlep:

img {
     float: rightt;
}

[Bherzet]

LOL. Na to formátování si dávej pozor. Na jednom řádku ti tam přebývá složená závorka, která tam nepatří, a ten img, který je za ní, to pak vůbec nezpracuje. Tohle funguje:

body {
    background-color:  black;
    height: 100%;
}

h1, h2, h3, h4 {
    color: #f1c40f;
    margin-left: 3%;    
}

p {
    color:  #58d68d;
    margin-left: 3%;
    margin-right: 5%;
    text-align: justify;
}

ul, li {
    color: #58d68d;
    margin-left: 1%;
}

a:link {
    color: #00FF40
}

a:visited {
    color: #00FF40
}

a:link, a:visited {
    text-decoration: none
}

img {
    float: left;
}

[Jendа]

Doporučil bych Validátor…

A totéž pro CSS.

[Jack Hokus]

Zdravím,

děkuju, bylo to v tom. Moc jste mi pomohl. Nevím, jestli bych to našel.

[Jack Hokus]

Ahoj,

bohužel nestačilo, ale děkuju

Petr

[🇨🇽]

vypadá to že už mu to jakoby funguje ;D

Jmenuji se Petr a vítám Vás na stránce zasvěcené jednomu z mých experimentů. Cílem tohoto experimentu je zjistit, jak by se pomocí programu Markdown daly co nejefektivněji vytvářet www stránky

nejdřiv se to html asi jako budeš muset naučit a až pak si snim dělat nějaký hokusy pokusy si myslim :D ;D

[Jack Hokus]

Ahoj,

jasně, že jo. Ale, napadlo mne to, tak jsem to zkusil. Většinou zkouším věci, které neumím.

[🇨🇽]

zase ti to nefunguje. když v tom css dáš vobrázku margin-right na 100% tak to ten text bude tlačit do pryč :O ;D

html validátor ti furt vrací chybky. zkus to upravit takle :O ;D

<!DOCTYPE html>
<html lang="cs">

<!-- tady si to měl všecko nějak divně pomíchaný :O ;D -->

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/petr.css">
    <title>Stránka částečně vytvořená v Markdownu</title>
    <link rel="stylesheet" type="text/css" href="petr.css">
</head>

<body>


  <h3>Slovo na úvod</h3>
  

    <p>
        <!-- v img tagu ti jakoby chyběl povinej attribut 'alt' -->
        <img src="Fotky/ja2.jpg" alt="bouchání dřevěným kladívkem do šroubováku">
        Jmenuji se Petr a vítám Vás na stránce zasvěcené jednomu z mých experimentů. 
        Cílem tohoto experimentu je zjistit, 
        jak by se pomocí programu Markdown daly co nejefektivněji vytvářet www stránky.
    </p>

  <p> Základ těchto stránek jsem nahodil v Markdownu. Hlavně části, které
   obsahují složitější konstrukce. Pokud jde o krátké věci, když je
   třeba dopsat jen odstavec, tak je hodím přímo do zdrojového
   kódu. Časem bych se rád dostal do stavu, kdy bude veškerá práce na
   webu probíhat pomocí Markdownu. Skákat z jednoho prostředí do
   druhého je nesprávná myšlenka.</p>
   

<p>K tomuto nápadu mne přivedl <a href="https://www.heronovo.cz/">Tomáš
   Crhonek</a>. Pokud inspiraci a nejen o ni, vděčím Tomášovi za
   mnohé. Zkoušel jsem   psát stránky v čistém html. Jde to, ale není
   to nic moc. hlavně psaní  dlouhých tagů jako třeba tak pro odkaz,
   je docela obtížné. Když je  takových tagů více, text je docela
   špatně čitelný. "Zdrojový text",  mohu-li to tak říct, psaný v
   Markdownu je   naproti tomu velmi dobře  čitelný. </p> 

   <p><a href="http://37.205.12.143/~petr/">Jít zpět</a></p>

 <hr>   

</body>
</html>

[🇨🇽]

joa todleto *.css hele tam neni na tom serveru takže asi jako mužeš škrtnout tendleten řádeček <link rel="stylesheet" type="text/css" href="css/petr.css">

[taktak]

Pokud inspiraci a nejen o ni, vděčím Tomášovi za mnohé.

... mozna by to chtelo zacit i v srozumitelne skladbe vety;)

[Josef Kufner]

Viz www.staticgen.com

[Jack Hokus]

Ahoj,

tak jsem to posunul trochu dopředu. Validací na html to zdá se prošlo. Na css zřejmě taky. Takže děkuju za předchozí rady a návrhy.

[Radovan]

"posuere eu"

lmao

[Jendа]

https://baconipsum.com/

[Radovan]

Ukaž to Stopkovi xD

[Jendа]

On je vegan? (zjistil jsem, že si tohle o lidech nedokážu zapamatovat -- je to ještě horší, než když jsem si byl furt nejistý, kterým vyučujícím na matfyzu se tyká a kterým ne!)

[Radovan]

Je - nebo alespoň byl, záhadně zmizel po zveřejnění pracovních dokumentů a třeba mu na Pankráci vegansky nevaří.

Btw naštěstí u veganů to poznáš, řeknou ti to.