Wyświetl nową zawartość

Wykryto wyłączony javascript

Aktualnie masz wyłączony javascript. Kilka funkcji może nie działać. Włącz ponownie javascript, aby korzystać z pełnej funkcjonalności.

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

Nowy użytkownik

8 postów

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:

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

Do góry

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

Do góry

^Krzysiek

Nowy użytkownik

8 postów

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

Do góry

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

Do góry

^Krzysiek

Nowy użytkownik

8 postów

2
Neutralna

Napisano 06 kwietnia 2015 - 19:37

#5

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

Podziękuję podziękuję 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

Do góry

Wróć do HTML i CSS

Podone tematy

Temat	Forum	Autor	Podsumowanie	Ostatni post
Stała zdalna praca dla Kodera HTML+CSS oraz Grafika Komputerowego	Po godzinach	Firmpas	0 odpowiedzi 9 998 Wyświetleń	09 kwietnia 2016 - 12:01 przez Firmpas
Domena kawa.pl zmienia właściciela :) Epic fail Tchibo?	Domeny	zonic	6 odpowiedzi 12 615 Wyświetleń	16 marca 2016 - 17:01 przez simon_says
Poszukujemy kodera i grafika	Inne	MoneyPolska	0 odpowiedzi 11 076 Wyświetleń	24 lutego 2016 - 21:02 przez MoneyPolska
Poszukujemy kodera oraz grafika komputerowego do współpracy stałej.	Inne	Agentor	0 odpowiedzi 11 748 Wyświetleń	06 stycznia 2016 - 16:30 przez Agentor
MOney Polska poszukuje grafika i kodera do współpracy	Po godzinach	MoneyPolska	9 odpowiedzi 7 027 Wyświetleń	02 listopada 2015 - 23:24 przez zonic

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

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

Projekt zonic Kodowanie MediaInfini

Community Forum Software by IP.Board 3.4.6
Właściciel: Web-talk.pl

Grafika zmienia położenie - rozdzielczość

Podone tematy

Stała zdalna praca dla Kodera HTML+CSS oraz Grafika Komputerowego

Domena kawa.pl zmienia właściciela :) Epic fail Tchibo?

Poszukujemy kodera i grafika

Poszukujemy kodera oraz grafika komputerowego do współpracy stałej.

MOney Polska poszukuje grafika i kodera do współpracy

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

Informacja

Zaloguj się