IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Pavel Gondek
Člen
Avatar
Pavel Gondek:28.3.2023 12:39

Ahoj, prosím o radu, nejsem it expert, ale dokážu si hodně přečíst a nastavit v css... Bohužel se mi nedaří upravit obrázek pod menu.

Zkusil jsem: Zkoušel jsem si přečíst jak se dělají pozice apod, ale stále mi to nejde. Věřím že to pro někoho bude chvilková záležitost, proto se obracím o pomoc na tohle fórum.

Chci docílit: }

/* Hero image */
#hero {
background: url('<!--/ logo_url /-->');
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
max-height: 200px;
position: relative;
z-index: 2;
display: block;
padding-center: 0px;
}
Kód pro obrázek pod menu. Stránky : www.herbsforhorse.com, Nyní obrázek překrývá horní menu, a pod obrázkem (na počítači) se hned napojuje text, což je v pořádku. Bohužel v telefonu se obrázek upraví na šířku telefonu a menu ho zcela překrývá, a vzniká ještě prázdné místo. Až po prázdném místě se napojuje text. Potřebuji opravit css aby se obrázek případně zobrazoval až pod menu těsně napojený na něj, a v telefonu aby to také fungovalo. Děkuji předem za pomoct.

 
Odpovědět
28.3.2023 12:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.3.2023 15:08

1. jakpsatweb.cz/css - soupis css vlastnosti je v pravo a ty navody vleve casti a nahore v menu jsou tez pouzitelne.
Na html a css programator byt nemusis. To jsem zvladal na stredni skole.
2. pozn: Zkus to prepsat do bootstrap css.

3. Na to css bych se vykaslal a dal tam normalni obrazek. Nastavil pevnou sirku stranky. A odstupnoval bych to pres ten bootstrap pro ruzna rozliseni. Neco takoveho

<div class="row">
  <div class="col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2 s_left">
    <div class="s_nav_left" id="nav_left"><a href="../index_nav.htm" class="noscript" accesskey="1">Menu stránky</a></div>
  </div><!-- /s_left -->
  <div class="col-12 col-sm-8 col-md-9 col-lg-10 col-xl-10 s_content">

4. Ty to mas nejak hrozne nestandartne udelane, ze staci malo a cele se to sype :) Treba, validator hlasi nejake drobne problemy s html (https://validator.w3.org/nu/#…) Ale, nic z toho, co tam ctu, nema vliv na divne chovani. To spis vypada na zplacane css.

/* Hero image */
#hero {
    border:1px solid #f00; /* kdyz pridas ramecek, tak to cele vyteka nekam dolu, proc? */
    width: 100%;
    max-height:200px;

    background: url('/img/ulogo.11.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
 /*background-attachment: fixed; s tim fixed tam vznika bily prouzek */
    background-size: 100% 100%;

    /*position: relative;*/
    z-index: 2;
    /*display: block;*/
    /*padding-center: 0px;*/
}
    /* IE10+ CSS style */
    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        #hero {
            height: 600px; /*tohle je divne*/
        }
    }

5. Statistiky za mesic opravdu nikoho nezajimaji. To muzes schovat do paticku pod odkaz O strance nebo neco tak.

Kdyby se ti chtelo to prepisovat, tak tuhle kostru BT pouzivam ja.

<!doctype html>
<html lang="cs">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="bbb">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css"><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/style.css" type="text/css"><!-- peter CSS -->
    <link rel="icon"       href="../favicon.ico" type="image/x-icon">
    <title>Hobby :: Peter Mlích</title>
  </head>
  <body id="body" data-bs-theme="light" class="style0">

<div class="container s_around0"><div class="container s_around1">


  <div class="s_header">
    <div class="row">
      <div class="col p-0 s_nav_setting" id="nav_setting"></div>
    </div>
    <div class="row">
      <div class="col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2 s_header_left">
        <div class="s_counter" id="counter"></div>
      </div><!-- /s_header_left -->
      <div class="col-12 col-sm-8 col-md-9 col-lg-10 col-xl-10 s_header_right">
        <div class="s_title"><span class="fs-3"><a href="../index.html" accesskey="0">Peter Mlích</a></span> <span class="fs-6">Programovaní a tvorba webů</span></div>
      </div><!-- /s_header_right -->
    </div><!-- /row -->
  </div><!-- /s_header -->

  <div class="row">
    <div class="col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2 s_left">
      <div class="s_nav_left" id="nav_left"><a href="../index_nav.htm" class="noscript" accesskey="1">Menu stránky</a></div>
    </div><!-- /s_left -->
    <div class="col-12 col-sm-8 col-md-9 col-lg-10 col-xl-10 s_content">



      <h1>Hello, world!</h1>



    </div><!-- /s_content -->
  </div><!-- /row -->

</div></div><!-- /s_around1 /s_around0 -->

    <script type="text/javascript">var home = '../';</script>
    <script src="../js/script.js" type="text/javascript"></script>
  </body>
</html>

Mivam tam zamerne ./ nebo ../ , abych vedel, kde vsude tu cestu mam menit v podslozkach.
Samozrejme si to uprav pro tvuj layout. Ale, pridat tam dalsi col, row asi nebude problem.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
28.3.2023 15:08
Avatar
Pavel Gondek
Člen
Avatar
Odpovídá na Peter Mlich
Pavel Gondek:29.3.2023 15:50

Ahoj, děkuji za tipy. No na to je to pro mě ještě pořád španělská vesnice. Ale dnes jsem si k tomu sednul a přes kontrolu jsem zkoušel různě vypínat a zapínat jednotlivé funkce a tak nějak se mi to podařilo dát do kupy, že se to již na tlf zobrazuje přijatelně a na počítači taky.

 
Nahoru Odpovědět
29.3.2023 15:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.