Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Rozjazd grafik

Rozpoczął Marcel Barski, gru 29 2015 13:56

Najlepsza odpowiedź zonic, 29 grudnia 2015 - 21:27

Wygląda to tak: http://iv.pl/images/...88762960996.png a chcę http://iv.pl/images/42981868761963291482.png , nie wiem jak dodać do tego tekst bo te boxy obok obniżają się po jego dodaniu.

To zobacz link, który Ci wysłałem wcześniej. Powiększ sobie okienko z wynikiem.

Przejdź do postu


8 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Marcel Barski
-2
Neutralna

Napisano 29 grudnia 2015 - 13:56

#1

Mam problem, gdy dodaje coś obok jakiś element to natychmiast rozjeżdża się 2, gdy dodaje tekst div'y obok idą w dół jak to naprawić?

/*
CSS file created with:Instantblueprint - Create a web project framework in seconds.
http://instantblueprint.com
Project: projekt
File: css/style.css
Last edited: December 28, 2015, 1:05 am
*/

/* Main */
body {
background:url(../images/background.png);
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#wrapper {
margin:0 auto;
width:1280px;
}

#menu {
width:1348px;
height:111px;
background:url(../images/menu.png)center;
}
#menu ul{
font-size:18px;
color:#000;
list-style:none;
text-shadow:1px 1px 1px #000;
    margin-top:0px;
    margin-left:700px;
}
#menu ul li{
text-align:center;
    width:170px;
        float:left;
            line-height:17px;
    display:block;
            }
            #menu ul li a{
    width:170px;
    height:20px;
    display:block;
    text-decoration:none;
    color:#000;
    padding-bottom:25px;
    text-align:center;
}
#slogan{
margin-left:150px;
}
#cien {
background:url(../images/cien.png) center;
margin-left:130px;
width:947px;
height:15px;
}

#slider {
width:1348px;
height:349px;
background:url(../images/slider.png) center;


}
#box {
width:312px;
height:213px;
background:url(../images/box.png);
margin-top:15px;
margin-left:145px;
    display:block;

}
#box1 {
width:312px;
height:213px;
background:url(../images/box.png);
margin-top:15px;
margin-left:323px;
    display:block;
}
#box2 {
width:312px;
height:213px;
background:url(../images/box.png);
margin-top:15px;
margin-left:323px;
    display:block;
}
#duzy {
width:632px;
height:213px;
background:url(../images/duzy.png);

margin-left:145px;
}
#newsletter{
width:312px;
height:213px;
background:url(../images/box.png);

margin-left:650px;
    display:block;
}
#akcja{
width:962px;
height:137px;
background:url(../images/akcja.png);
margin-top:15px;
margin-left:145px;
}
/* stopka */
#footerm{
background:url(../images/menu-stopka.png);
width:1348px;
height:266px;
margin-top:15px;
}
#stopka{
background:url(../images/stopka.png);
width:1348px;
height:47px;
}
/* ikonki */
#strzalka{
background:url(../images/up.png);
width:32px;
height:32px;
margin-left:30px;

}
#strzalka:hover{
background:url(../images/up_1.png);
width:32px;
height:32px;
margin-left:30px;}
#glowna1{
background:url(../images/grid.png);
width:64px;
height:64px;
float:right;
margin-right:531px;
margin-top:-45px;
}
#glowna1:hover{
background:url(../images/grid_1.png);

}
#nowosci{
background:url(../images/news.png);
width:64px;
height:64px;
float:right;
margin-right:-234px;
margin-top:-45px;
}
#nowosci:hover{
background:url(../images/news_1.png);

}
#kontakt{
background:url(../images/mail.png);
width:64px;
height:64px;
float:right;
margin-right:-405px;
margin-top:-45px;
}
#kontakt:hover{
background:url(../images/mail_1.png);

}

#menu ul li a:hover{
    color:#cf4e23;
.post {
}

.postmeta {
}


<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>projekt</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>


<div id="menu"><div id="slogan">
</br>
<font size="6">Logo strony</font></br>
<font size="3">Slogan reklamowy</font>
</div>
<div id="glowna1"></div>
<div id="nowosci"></div>
<div id="kontakt"></div>


<ul>
<li class="glowna"><a href='#'>Strona główna</a></li>
<li class="nowosci"><a href='#'>Nowości</a></li>
<li class="kontakt"><a href='#'>Kontakt</a></li>
</ul>
</div>


<div id="slider">
</div>
<div id="box">

<div id="box1">
<div id="box2">
</div>
</div>
</div>
<div id="cien"></div>
<div id="duzy">
<div id="newsletter">
</div>
</div>
<div id="akcja">
</div>
<div id="footerm">

</div>
<div id="stopka">
<div id="strzalka">
</div>
</div>

</div><!-- End: wrapper -->
</body>
</html>

 

  • -1
krzysiek_web

    Użytkownik

  • 63 postów
    • Czas spędzony online: 3d 19h 56m 32s
6
Neutralna

Napisano 29 grudnia 2015 - 14:25

#2

Wstaw całość online i podaj link.


  • 1

webKS - Wdrożenia stron i sklepów Internetowych.
Usługi Informatyczne 'webKS'.

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 29 grudnia 2015 - 15:44

#3

albo wrzuć do jakiegoś jsfiddle'a


  • 1

webDeveloper

Marcel Barski
-2
Neutralna

Napisano 29 grudnia 2015 - 17:48

#4

http://pastebin.com/mAyrcPLV

http://pastebin.com/gpR2WpKx 


Wygląda to tak ( nie wiem jak edytować post to robię nowy) : http://iv.pl/images/18179824909269064456.png


  • 0
zonic

    WT Elite

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

Napisano 29 grudnia 2015 - 19:48

#5

http://pastebin.com/mAyrcPLV
http://pastebin.com/gpR2WpKx 

Wygląda to tak ( nie wiem jak edytować post to robię nowy) : http://iv.pl/images/...09269064456.png

Na przyszłość tak jak pisał unbreak, polecamy jssfiddle do wklejania kodu. Tam oprócz kodu mamy Live demo.

Nie wiem jaki do końca efekt chciałeś osiągnąć, niemniej wydaje mi się, że masz bałagan z tagami i masz źle pozamykane

Zobacz to co ja zrobiłem na szybko z Twoim kodem: https://jsfiddle.net/Zonicpl/k330etqm/
  • 1

Papierowe wizytówki NFC

Marcel Barski
-2
Neutralna

Napisano 29 grudnia 2015 - 21:18

#6

Wygląda to tak: http://iv.pl/images/47284237588762960996.png a chcę http://iv.pl/images/42981868761963291482.png , nie wiem jak dodać do tego tekst bo te boxy obok obniżają się po jego dodaniu.


  • 0
zonic

    WT Elite

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

Napisano 29 grudnia 2015 - 21:27   Najlepsza odpowiedź

#7

Wygląda to tak: http://iv.pl/images/...88762960996.png a chcę http://iv.pl/images/42981868761963291482.png , nie wiem jak dodać do tego tekst bo te boxy obok obniżają się po jego dodaniu.

To zobacz link, który Ci wysłałem wcześniej. Powiększ sobie okienko z wynikiem.


  • 2

Papierowe wizytówki NFC

Marcel Barski
-2
Neutralna

Napisano 30 grudnia 2015 - 13:00

#8

A mam jeszcze 1 pytanie jak przesunąć tekst o 65px w prawo margines taki zrobić, gdyż zawsze jak to robię to obniża mi się ? 


  • 0
zonic

    WT Elite

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

Napisano 30 grudnia 2015 - 13:03

#9

A mam jeszcze 1 pytanie jak przesunąć tekst o 65px w prawo margines taki zrobić, gdyż zawsze jak to robię to obniża mi się ? 

Tekst wewbątrz boxa? Dodaj dla boxa padding-left: 65px na przyklad.


  • 0

Papierowe wizytówki NFC

Wróć do HTML i CSS



Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

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

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