Új hozzászólás Aktív témák

• #8182 trisztan94 őstag

  Új Válasz 2013-05-17 16:19:12 #8182

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  trisztan94

  őstag

  Szervusztok!
  Hogy kell kiküszöbölni azt, hogy az abszolút pozicionált elemek minden felbontásnál ugyan ott legyenek? Elastic design-ot próbálok csinálni, tehát minden értéket em-ben adok meg.

  Egy példa:

  <header>
  <div id="shineWrap">
  <img src="img/shine.png" id="logoShine" />
  <img src="img/shine.png" id="phoneShine" />
  </div>
  <img src="img/logo.png" id="logo" alt="Shin Bet Kft."/>
  <img src="img/phone.png" id="phoneLogo" alt="Telefonszám: "/><h2>36-30/773-0407</h2>
  </header>

  A két shine.png egy gradient effektus amit css-sel nem tudtam megcsinálni, egyik a logó, másik a telefonszám alá megy, tök jól jelenik meg a felbontásomon.

  Így néz ki a css-e:
  html{
  font-size:100%;
  }
  body{
  margin:0;
  padding: 0;
  text-align:center;
  font-size: 1em;
  color:#efefef;
  background-image: url(../img/Elegant4.png);
  font-family: 'Gentium Book Basic', serif;
  }
  #logo, header h2, #phoneLogo{
  display:inline-block;
  }
  #phoneLogo
  {
  position:relative;
  top:1em;
  left:19em;
  }
  #logoShine{
  position:absolute;
  left:6em;
  }
  #phoneShine{
  
  position:absolute;
  left:62em;
  }
  #shineWrap{
  position:relative;
  }
  #logo{
  position:relative;
  left: -20em;
  top: 1.125em;
  }
  header h2{
  position:relative;
  left:13em;
  font-size: 1.5em;
  }
  header{
  background-color: #010101;
  }

  Így néz ki:
  

  Viszont ha lekicsinítem az oldalt elcsúszik az egész:
  

  A többi elem viszont tökéletesen a helyén marad:

  Például ez a dobozoknak a kódja, hátha észrevesztek valami eltérést:

  html:
  <div id="content">
  <div id="featured1" class="box">
  <h3 class="smallcaps">Követelés Kezelés</h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <span class="dupl">
  <hr class="alsoarany"/>
  <hr class="alsoarany2"/>
  </span>
  <div id="featured2" class="box">
  <h3 class="smallcaps">Személyes Felkeresés</h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="featured3" class="box">
  <h3 class="smallcaps">Sablon Szöveg</h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>

  Ugye itt a dupl classzú elem a lényeg az csúszik el.

  CSS:
  .box{
  background: #434343; /* Old browsers */
  background: -moz-linear-gradient(top, #434343 0%, #010101 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#434343), color-stop(100%,#010101)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #434343 0%,#010101 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #434343 0%,#010101 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #434343 0%,#010101 100%); /* IE10+ */
  background: linear-gradient(to bottom, #434343 0%,#010101 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#010101',GradientType=0 ); /* IE6-9 */
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
  }
  #featured1, #featured2, #featured3{
  width: 20em;
  text-align: justify;
  border:0.0625em solid black;
  display:inline-block;
  margin-top:2.5em;
  padding:0.3125em 1% 0.625em;
  min-height:20em;
  -pie-box-shadow: 0px 6px 8px #7F7F7F;
  -moz-box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 6px 8px -1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5);
  }
  #featured2, #featured3{
  margin-left: 4em;
  }
  #featured1{
  position:relative;
  left: 0em;
  }
  #featured2{
  min-height: 26em;
  
  }

  Nem értem
  Utálom a css-t

  Bocsi a nagy posztért, minél több infót akartam adni!

  Szerk: ha nagyítom a dolgot, akkor viszont minden összeesik, a boxok és a menü is
  

  [ Szerkesztve ]

  https://heureka-kreativ.hu

Új hozzászólás Aktív témák