Skocz do zawartości

Zdjęcie
- - - - -

Grafika zmienia położenie - rozdzielczość

Rozpoczął ^Krzysiek, kwi 06 2015 18:00

Najlepsza odpowiedź Yeoman, 06 kwietnia 2015 - 18:46

Generalnie powinneś troche uporządkowac kod.

<!DOCTYPE HTML>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>strona</title>
    <link rel="stylesheet" href="css/style.css">
   </head>
 
   <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
      <div id="wrappaer"></div>
      <div class="body"></div>
      <div class="top"></div>
      <div class="flag1"></div>
      <div class="flag2"></div>
      <div class="flag3"></div>
      <div class="butt"></div>
      <div class="line"></div>
      <footer></footer>
   </body>
</html>

Następnie sugerowałbym dodać elementy flag oraz button do jakiegoś diva w którym będą się znajdować, zamiast dodawać to jeden pod drugim. Przykładowo:

<!DOCTYPE HTML>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>strona</title>
    <link rel="stylesheet" href="css/style.css">
   </head>
 
   <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
      <div id="wrappaer"></div>
      <div class="body"></div>
      <div class="top">
         <div class="flag1"></div>
         <div class="flag2"></div>
         <div class="flag3"></div>
         <div class="butt"></div>
      </div>
      <div class="line"></div>
      <footer></footer>
   </body>
</html>

I z tego poziomu nadać dla klasy top pozycję relatywną, a dla jego elementów pozycję absolutną i je pozycjonować. Wtedy zawsze będą miały ograniczenie jakim jest szerokość elementu o klasie top.

.top{
    width: 804px;
    height:143px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/1.png);
    position: relative;
}
 

.top .flag1 {
    width: 24px;
    height: 24px;
    position: abosulte;
    right: 0;
    top: 0;
    background-image: url(../images/4.png);
}
 
.top .flag2 {
    width: 24px;
    height: 24px;
    float: left;
    absolute;
    right: 24px;
    top: 0;
    background-image: url(../images/5.png);
}
.top .flag3 {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 48px;
    top: 0;
    background-image: url(../images/6.png);
}
 
.top .butt {
    width: 95px;
    height: 26px;
    position: absolute;
    right: 72px;
    top: 0;
    background-image: url(../images/7.png);
}

Pozycjonuj wedle uznania za pomocą top i right

Przejdź do postu


4 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
^Krzysiek
2
Neutralna

Napisano 06 kwietnia 2015 - 18:00

#1
Witam. Opiszę pokrótce z czym mam problem.
 
Otóż stworzyłem stronę dla mojej firmy. Opiera się ona na 3 plikach graficznych - górze, środku i stopce. Są one wyśrodkowane, tak aby na każdym monitorze znajdowały się na środku.
 
Problem natomiast mam z 4 grafikami, które w przyszłości mają być przyciskami. Na grafice poniżej zobrazowałem co i jak. Chcę, żeby znajdowały się one cały czas w pozycji oznaczonej numerem 1. niezależnie od rozdzielczości monitora. Na mniejszych rozdzielczościach są przesunięte na prawo, natomiast na większych w lewo.
 
Niestety nie potrafię tego zrobić poprawnie, domyślam się że to przez parametry pozycji np. dla pierwszej flagi left: 821px; bottom: 90px; tylko w jaki inny sposób mam je ustawić w odpowiednim miejscu.
 
Grafika:
UYeFB5v.jpg
 
Kod HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>strona</title>
<link rel="stylesheet" href="css/style.css">
</head>
 
<body>
<div id="wrappaer"></div>
<div class="body"></div>
<div class="top"></div>
<div class="flag1"></div>
<div class="flag2"></div>
<div class="flag3"></div>
<div class="butt"></div>
<div class="line"></div>
<footer></footer>
<body oncontextmenu="return false">
<body onselectstart="return false" onselect="return false" oncopy="return false">
<body ondragstart="return false" ondrag="return false">
<body onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
</body>
</html>
 
Kod CSS:

@charset "utf-8";
/* CSS Document */
 
#wrapper{width: auto; height: auto;}
 
 
body {
    background-image: url(../images/bg.png)
}
 
.top{
    width: 804px;
    height:143px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/1.png);
}
 
.line{
    width: 804px;
    height: 286px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/2.png);
}
 
.flag1{
    width: 24px;
    height: 24px;
    float: left;
    position: relative;
    left: 821px;
    bottom: 90px;
    background-image: url(../images/4.png);
}
 
.flag2{
    width: 24px;
    height: 24px;
    float: left;
    position:relative;
    left: 826px;
    bottom: 90px;
    background-image: url(../images/5.png);
}
.flag3{
    width: 24px;
    height: 24px;
    float: left;
    position:relative;
    left: 831px;
    bottom: 90px;
    background-image: url(../images/6.png);
}
 
.butt{
    width: 95px;
    height: 26px;
    float: left;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    left: 836px;
    bottom: 90px;
    background-image: url(../images/7.png);
}
 
footer{
    width: 804px;
    height: 280px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/3.png);
}
 
Pozdrawiam, liczę na pomoc.

  • 0
Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 06 kwietnia 2015 - 18:46   Najlepsza odpowiedź

#2

Generalnie powinneś troche uporządkowac kod.

<!DOCTYPE HTML>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>strona</title>
    <link rel="stylesheet" href="css/style.css">
   </head>
 
   <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
      <div id="wrappaer"></div>
      <div class="body"></div>
      <div class="top"></div>
      <div class="flag1"></div>
      <div class="flag2"></div>
      <div class="flag3"></div>
      <div class="butt"></div>
      <div class="line"></div>
      <footer></footer>
   </body>
</html>

Następnie sugerowałbym dodać elementy flag oraz button do jakiegoś diva w którym będą się znajdować, zamiast dodawać to jeden pod drugim. Przykładowo:

<!DOCTYPE HTML>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>strona</title>
    <link rel="stylesheet" href="css/style.css">
   </head>
 
   <body oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'">
      <div id="wrappaer"></div>
      <div class="body"></div>
      <div class="top">
         <div class="flag1"></div>
         <div class="flag2"></div>
         <div class="flag3"></div>
         <div class="butt"></div>
      </div>
      <div class="line"></div>
      <footer></footer>
   </body>
</html>

I z tego poziomu nadać dla klasy top pozycję relatywną, a dla jego elementów pozycję absolutną i je pozycjonować. Wtedy zawsze będą miały ograniczenie jakim jest szerokość elementu o klasie top.

.top{
    width: 804px;
    height:143px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/1.png);
    position: relative;
}
 

.top .flag1 {
    width: 24px;
    height: 24px;
    position: abosulte;
    right: 0;
    top: 0;
    background-image: url(../images/4.png);
}
 
.top .flag2 {
    width: 24px;
    height: 24px;
    float: left;
    absolute;
    right: 24px;
    top: 0;
    background-image: url(../images/5.png);
}
.top .flag3 {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 48px;
    top: 0;
    background-image: url(../images/6.png);
}
 
.top .butt {
    width: 95px;
    height: 26px;
    position: absolute;
    right: 72px;
    top: 0;
    background-image: url(../images/7.png);
}

Pozycjonuj wedle uznania za pomocą top i right


  • 3

2ed58r7.png

^Krzysiek
2
Neutralna

Napisano 06 kwietnia 2015 - 19:32

#3

Dziękuję za szybką odpowiedź. Wkradło Ci się kilka literówek, np. abosulte zamiast absolute. Pozmieniałem to ale mimo wszystko flaga 1 i 2 nie chcą zmienić pozycji. Trzecia i button są w dobrych miejscach. Jakiś pomysł?


Użytkownik ^Krzysiek edytował ten post 06 kwietnia 2015 - 19:33

  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 06 kwietnia 2015 - 19:33

#4

Dziękuję za szybką odpowiedź. Poprawki wprowadzone, flagi i przycisk wyświetlają się teraz w dobrych miejscach. Wkradło Ci się kilka literówek, np. abosulte zamiast absolute, ale generalnie efekt osiągnęliśmy zamierzany. Dziękuję ;)

Podziękuj też łapką w górę obok posta :) 


  • 0

Papierowe wizytówki NFC

^Krzysiek
2
Neutralna

Napisano 06 kwietnia 2015 - 19:37

#5

Podziękuj też łapką w górę obok posta :)

Podziękuję podziękuję :D ale edytowałem poprzedniego posta bo jednak coś poszło nie tak.

 

EDIT: Działa! Teraz wina była z powodu mojej literówki. Przepraszam za zamęt ;) Podziękowanie leci.

 

Pozdrawiam.


Użytkownik ^Krzysiek edytował ten post 06 kwietnia 2015 - 19:45

  • 1
Wróć do HTML i CSS



Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 1

0 użytkowników, 1 gości, 0 anonimowych