Diskuze: špatné zobrazeni stranky

wolfsharp666

Člen

wolfsharp666:15.2.2016 11:47

Zdravím nevíte proč se mi stránka roztahuje do strany, viz. obrázek

Odpovědět

15.2.2016 11:47

Tomáš Maňhal

Člen

Tomáš Maňhal:15.2.2016 11:49

Co takhle odkaz na ní? Abychom se podívali na kód. Nejsme kouzelníci.

Nahoru Odpovědět

15.2.2016 11:49

wolfsharp666

Člen

wolfsharp666:15.2.2016 12:02

tady je zdroják, online stránka zatím není

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta charset=utf-8">
  <link rel="stylesheet" href="styl.css" type="text/css" />
  <title>HIER SIND WIR</title>
<link type="text/css" rel="Stylesheet" href="bjqs.css" />

       <script type="text/javascript">
      <!-->
      var image1 = new Image()
      image1.src="slideshow/logo.jpg"
      var image2 = new Image()
      image2.src="slideshow/bmw.jpg"
      var image3 = new Image()
      image3.src="slideshow/IMG_1523.jpg"
      //-->
    </script>

  </head>
  <body>
  <header>
  <div id="logo"></div>
  <nav>
      <ul>

            <li><a href="index.html">Domů</a></li>
            <li><a href="pracuj.html">CZ</a></li>
            <li class="aktivni"><a href="pracuj.html">DE</a></li>
            <li><a href="pracuj.html">EN</a></li>

      </ul>
  </nav>
  </header>

        <div class="prezent">

       <h3>Devils Custom Cars s.r.o</h3>
       <p class="prepop">Make a deal with the Devil</p>

     <div class="prespoz">  <img src="logo.jpg" name="slide" width="430px" height="200px">
  <script type="text/javascript">
  <!--
      var step=1
      function slideit(){
      document.images.slide.src=eval("image"+step+".src")
      if(step<3)
      step++
      else
      step=1
      setTimeout("slideit()",3000)
      }
      slideit()
  //-->
  </script></div>


                   </div>




        <article>

  <menu>
   <ul>
  <li><a class="aktivni1"  href="#">Hier sind wir</a></li>
  <li><a href="#">Aktuelles </a></li>
  <li><a href="#">Auto teile </a></li>
  <li><a href="#">DCC-Shop </a></li>
  <li><a href="#">Partner </a></li>
  <li><a href="#">Sponsoring </a></li>
  <li><a href="#">Kontakt </a> </li>
  </ul>
  </menu>

  <div class="kontakt">
  <h1>Kontakt</h1>
    <h4>Shop/Service:</h4>
    <p class="kontakt">Konečná 184/9(Horní Lomany) <br /> CZ 350 01 Františkovy Lázně</p>
    <h4>Postadresse:</h4>
    <p class ="kontakt">Lipová 356 <br /> CZ 351 34 Skalná</p>
     <h4>TEL/FAX/EMAIL</h4>
     <p class="kontakt">TEL CZ/DE:&nbsp&nbsp&nbsp&nbsp+420 603 283 802 <br /> TEL DE/EN:&nbsp&nbsp&nbsp&nbsp+420 721 190 798 <br /> FAX:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp+420 355 335 126 <br /> E-Mail: <a class="mail" href="mailto:[email protected]"> [email protected] </a> </p>

  </div>


        <div id="centrovac">
          <header><h1>DIE DEVILS HALLE IST GEÖFFNET</h1></header>

        <section class="clanek">

        <p>Die Eröffnungsfeier am 30.01.2016 war ein voller Erfolg. Dank der Unterstützung unserer Partner könnten wir unsern zahlreichen Gästen aus ganz Europa eine Vielzahl an Artikeln vor Ort präsentieren. <br />

Ab sofort ist unser Showroom und der Service täglich von 09:00 - 18:00 Uhr geöffnet. Unser Webshop wird im Laufe des Februar auch Online gehen! <br />

Wir freuen uns euch auch zukünftig viele News präsentieren zu können. Besucht uns hier, auf Facebook oder in unserem Showroom</p>


        <p><img width=100% height=60% src="obraz/venek.jpg" class="stred"/> </p>
        </section>
        <div class="fb">

        </div>
        </div>
        <div class="cistic"></div>
</article>
       <footer>
       <a href="index.html" class="footodkaz">HOME</a>
       <a href="index.html" class="footodkaz1">CONTACT</a>
       <a href="index.html" class="footodkaz1">IMPRESSUM</a>
       <p class="copyright">&copy 2015 DEVILS CUSTOM CARS s.r.o </p>
        </footer>
  </body>
</html>

Nahoru Odpovědět

15.2.2016 12:02

Vít Pleskot

Člen

Vít Pleskot:15.2.2016 13:20

Ahoj, zdrojak sice dobry, ale bez tech css, ve kterych se nejspise bude nachazet ten zakopanej pes, nam to nic nerekne Nahod to cele, pak se na to urcite nekdo koukne.

Editováno 15.2.2016 13:21

Nahoru Odpovědět

15.2.2016 13:20

Jan Lupčík

Tvůrce

Jan Lupčík:15.2.2016 13:38

Chybí ti uvozovky na tomhle řádku:

<meta charset=utf-8">

Nahoru Odpovědět

15.2.2016 13:38

TruckersMP vývojář

wolfsharp666

Člen

wolfsharp666:15.2.2016 14:22

Tady je CSS,jestli je tu lepší způsob jak postovat zdrojaky tak o něm nevím sorry za ten spam

article{
  background-color: white;
}
h2, h3, h5, h6 {
        text-align: center;
        color: #0a294b;
        font-family: Arial;
        text-shadow: 3px 3px 7px #666666;
}
h4{
  color: #FF0000;
  font-size: 15px;
  font-weight:bold;
}
h3{
  font-size: 2em;
  color: white;
  text-align: left;
  margin-left:20%;
  font-family: Arial;

}

h2 {
        font-size: 1.7em;
}

h1 {
        font-size: 2em;
        font-weight: normal;
        color: black;
        text-align: left;
  font-weight: bold;
        //text-shadow: 2px 2px 1px #0a294b;
}

 article header {
  width: 70% ;
  float: top;
  //background-color: white;
  position: relative;
  top: 300px;
 }
 article section{
    width: 100%;
    float: top;
    background-color: white;
    margin-top: 350px;
 }
 article section.clanek{
    width: 85%;
    float: top;
    background-color: white;
    margin-top: 350px;
 }
 /*footer{
  float: right;
 } */
 body{
  background: url("obraz/ZenBG.png") #A60800;
  margin: 73px 0px 0px 0px;
        font: 14px Verdana;
        min-width: 960px;

 }
 header {
        height: 73px;
        position: fixed;
        top: 0px;
        background: white;
        width: 100%;

}
 .stred{
  float: center;
 }
 .cistic{
  clear: both;
 }
 #logo {
        background: url('obraz/logo.jpg') no-repeat;
        width: 100px;
        height: 60px;
        float: left;
        margin: 7px 0px 0px 20%;
}
nav ul {
        margin: 0px;
        list-style-type: none;
}
nav ul li {
        float: left;
        padding: 0px 5px;
        margin: 0 5px;
        margin-top: 10px;
        font-size: 17px;
        height: 60px;
        line-height: 4.3em;
}
nav a {
        color: black;
        text-decoration: none;
        font-weight: bold;
}
nav ul li:hover, .aktivni {
        background: #A60800;
        box-shadow: 0px 0px 5px black;

}
footer {
        width:100%;
        height: 40px;
        color: white;
    margin: 20px 0 0 30px;
    margin-right: 60px;
}
#centrovac {
        margin: 0px auto;
        width: 960px;
}
.logocz{
  background: url("obraz/cz.gif");
}
.logode{
    background: url("obraz/de.gif");
}
.logoen{
background: url("obraz/en.gif");
}
div.nadpis{
  float:left;
  margin-right: 10px;
}
div.prezent{
    position:absolute;
    top:80px;
    width:100%;
    height: 250px;
    background: url("obraz/ZenBG.png")#A60800;
    float: top;

}
div.prespoz{
    position: relative;
    left: 55%;
    bottom: 35%;
}
p.prepop{
margin-left: 20%;
color: white;
font-family: Arial;

}
a.footodkaz{
  color: white;
  margin-left:20%;
  float: left;
  text-decoration: none;
  font-size: large;
}
a.footodkaz1{
  color: white;
  margin-left: 2%;
  float: left;
  text-decoration: none;
  font-size: large;
}
p.copyright{
  margin-left: 75%;

}

div.kontakt{
  position:absolute;
    top: 70%;
  left: 70%;
}
p.kontakt{
  font-size: 12px;
  font-weight: bold;
  color: black;
}
a.mail{
  font-size: 12px;
  font-weight: bold;
  color: #FF0000;
  text-decoration: none;
}
menu ul {
        position:absolute;
        top: 44%;
        left:69%;
        margin: 0px;
        list-style-type: circle;
}
menu ul li {
       // float: right;

        margin-top: 10px;
        font-size: 15px;
}
menu a {
        color: #FF0000;
        text-decoration: none;
        font-weight: bold;
}
menu ul li:hover, .aktivni1 {
        color: black;

}
div.fb{
  position:absolute;
  top: 110%;
  left: 70%;
  background:blue;
  width:100px;
  height: 100px;
}
menu ul li.odsaz {
       // float: right;

        margin-top: 10px;
        margin-left: 20px;
        font-size: 15px;
}
div.kontakt1{
  position:absolute;
  margin-top:7%;
  top: 70%;
  left: 70%;
}
div.fb1{
  position:absolute;
  top: 110%;
  left: 70%;
  background:blue;
  width:100px;
  height: 100px;
  margin-top: 8%;
}

Nahoru Odpovědět

15.2.2016 14:22

wolfsharp666

Člen

wolfsharp666:15.2.2016 14:28

přidal jsem uvozovku a kodování přestalo fungovat nechám to jak to je

Nahoru Odpovědět

15.2.2016 14:28

Tomáš123

Člen

Tomáš123:15.2.2016 14:45

Prosím ťa, čo robí float: top?

Ten kód je taký otrasný, že príčin nejasne popísaného problému (zrejme si myslel, prečo nie je vycentrovaná) je strašne veľa.

Skús tam pridať body {width: 800px; margin: 0 auto;}

Ale celkom určite sa to rozpadne. Všetko centruješ iba odsadením zľava.

Pozri si: http://qu.wz.cz/…-stranky.htm

Nahoru Odpovědět

15.2.2016 14:45

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

wolfsharp666

Člen

wolfsharp666:15.2.2016 15:23

float: top nedělá nic stránka se krásně rozpadne po přidání body, stránka v odkazu je hezky popsaná ale stejně z toho nejsem schopen vydedukovat svůj problém.

Nahoru Odpovědět

15.2.2016 15:23

wolfsharp666

Člen

wolfsharp666:15.2.2016 15:34

Děkuji všem za rady už jsem to vyřešil, měl jsem u jednoho divu relativní pozici která se mi pak nejspíš roztahovala do šířky nebo co kdyby vás to hodně zajímalo tak u

div.prespoz{
    position: relative;
    left: 55%;
    bottom: 35%;
}

jsem změnil na **
div.prespoz{
position: absolute;
left: 55%;
bottom: 10%;
}
**
a funguje to omlouvám se všem kterým jsem svým kodem způsobil srdeční příhodu do příště se to pokusím zlepšit

Nahoru Odpovědět

15.2.2016 15:34

Tomáš123

Člen

Tomáš123:15.2.2016 15:46

To nie je riešenie, ale záplata. Keď tam znovu niečo pridáš, zrejme sa to znovu rozpadne.

Nahoru Odpovědět

15.2.2016 15:46

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

wolfsharp666

Člen

wolfsharp666:15.2.2016 16:07

do téhle vrstvy už nic přidávat nebudu je to vrstva s prezentací fotek která už takhle zůstane takže se budu modlit aby to fungovalo jak má

Nahoru Odpovědět

15.2.2016 16:07

Honza Bittner

Tvůrce

Honza Bittner:22.2.2016 22:09

Leč tvůj kód funguje, minimálně tak trochu shodně graficky, tak správným řešením tvého problému je vytvořit element (nějaký kontejner), který bude centrovat obsah.

Ten se vytváří pomocí nastavení šířky a automatického marginu zleva a zprava.

Přidám příklad s šířkou 960px a při užší obrazovce pro 80% šířky.

.kontejner {
  width: 80%; /* šířka bude 80px */
  max-width: 960px; /* ale maximálně 960px */
  margin: 0 auto; /* zleva a zprava to dopočítej -> vycentruj */
}

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

22.2.2016 22:09

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.