Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

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

 
Odpovědět 15. února 11:47
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na wolfsharp666
tomasmanhal:

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

Nahoru Odpovědět  +1 15. února 11:49
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

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:sales@devilscustomcar.com"> sales@devilscustomcar.com </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. února 12:02
Avatar
Vít Pleskot
Člen
Avatar
Odpovídá na wolfsharp666
Vít Pleskot:

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. února 13:21
 
Nahoru Odpovědět 15. února 13:20
Avatar
IT Man
Redaktor
Avatar
Odpovídá na wolfsharp666
IT Man:

Chybí ti uvozovky na tomhle řádku:

<meta charset=utf-8">
Nahoru Odpovědět  ±0 15. února 13:38
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

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. února 14:22
Avatar
wolfsharp666
Člen
Avatar
Odpovídá na IT Man
wolfsharp666:

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

 
Nahoru Odpovědět 15. února 14:28
Avatar
Tomáš123
Člen
Avatar
Odpovídá na wolfsharp666
Tomáš123:

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. února 14:45
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
wolfsharp666
Člen
Avatar
Odpovídá na Tomáš123
wolfsharp666:

float: top nedělá nic :D 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. února 15:23
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

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 :D 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 :D 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. února 15:34
Avatar
Tomáš123
Člen
Avatar
Odpovídá na wolfsharp666
Tomáš123:

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

Nahoru Odpovědět 15. února 15:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
wolfsharp666
Člen
Avatar
Odpovídá na Tomáš123
wolfsharp666:

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. února 16:07
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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í
Řešení problému
Nahoru Odpovědět 22. února 22:09
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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 13 zpráv z 13.