Zaloguj się

paciuszka · 15-07-2009, 18:30

mam problem, udalo mi sie stworzyc tlo pod cala strona ale nie moge jej teraz wysrodkowac probowalam juz kilku sposob ale zaden nie dziala

link do strony:
http://www.rapid.com.pl/start/hotel/index.html

link do styli:
http://www.rapid.com.pl/start/hotel/main.css

czy ktos moze pomoc?

siomer · 15-07-2009, 18:42

w sekcji body w swoim pliku css dodaj nastepujący kod:

background-image: url(twoje tlo np images/tlo.png);
background-repeat: no-repeat; (zalezy czy chcesz zeby sie poruszalo albo powielalo albo pozostalo bez zmian jak na przykladzie)
background-position: top center; (tlo jest wycentrowane od topu strony)

wydaje mi sie ze teraz powinno tobie wszystko dzialac jak nalezy Wink

**Labsta.com** · (Ten post był ostatnio modyfikowany: 15-07-2009, 18:51 przez Labsta.com.)

Podmień to:

Kod:
#bgimg {

position: absolute; 

         width: 100%; 

         height: 100%; 

         z-index: -1; }

#tab {

 background-color: #ddcfb5;

 width:830px;

 margin:0 auto; 

 padding:25px;

 z-index: 2; 

}

Tło musi być pod tab (z-index: -1) a tab nie jest position:absolute.

P.S. Mam nadzieję, że zdajesz sobie sprawę z tego, że ta strona jest wykonana po "partyzancku" Wink

paciuszka · 15-07-2009, 19:01

jak zwykle pomocni, dziekuje bardzo wszystko dziala tak jak nalezy Smile

sienczek · (Ten post był ostatnio modyfikowany: 29-07-2009, 00:48 przez sienczek.)

**Labsta.com** · 29-07-2009, 01:19

Spróbuj dać dla body text-align: center; dodatkowo możesz też dodac width, height dla body 100% ,ale nic nie gwarantuje.

sienczek · 29-07-2009, 01:29

zrobiłem przed chwilą wg schematu:

Kod:
#szkielet

{

width:100%;

height:100%;

position: relative;

}

#box

{

position:absolute;

top:50%;

left:50%;

width: 800px;

height: 400px;

margin:-200px 0 0 -400px;

}

i pieknie działa Smile

Może komuś się na przyszłość przyda Smile

Tekilos · 25-08-2009, 21:15

Jestem świeżakiem na forum więc nie będę tworzył nowego tematu. Również mam problem z wyśrodkowaniem strony z tym że chyba podchodzę do całości nieco inaczej.W sieci znalazłem odnośnie centrowania: http://www.internetmaker.pl/artykul/...ces_css-a.html
to powinno wyśrodkować całość divów jak rozumiem na moejej stronie jednak centruje na niej tylko 1 z 2 divów. Strone robię w dreamweaverze - narysowalem layot table i 1 komórke by wstawić tło po czym chciałem na całości wmontować wszytko divami( tak było by najprościej tylko zmiana kolejnych obrazków od linków na dalsze obrazki z galeri) i po 2 przycisk w divie rollover(element javy)zwykly maly duperel do przelaczania nakolejne stronki z innymi 3 obrazkami.
Problem jest taki ze centruje diva z tabelka i obrazkami a nie centruje juz przycisku i on przesuwa się jak chce przy zmianie rozdzielczości- pomniejszaniu powiększaniu strony. Pytanie jest taki czy w taki prosty sposób to może być zrobione. Wiadomo chciałbym sobie wstawiać więcej divów z jakimś tekstem itd.

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" href="container.css" type="text/css" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

#apDiv1 {

    position:absolute;

    left:10px;

    top:25px;

    width:850px;

    height:232px;

    z-index:1;

}

#apDiv2 {

    position:absolute;

    margin: auto;

    left:905px;

    top:381px;

    width:48px;

    height:47px;

    z-index:1;

}

-->

</style>

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<body onload="MM_preloadImages('../przyciskpr2.png')">

<div id="container">

<div id="apDiv1">

  <table width="845" height="229" border="0">

    <tr>

      <td><img src="http://peb.pl/miniaturki/kreuk1.jpg" alt="kreuk1" width="258" height="193" /></td>

      <td><img src="http://peb.pl/miniaturki/Kreuk3.jpg" alt="kreuk3" width="258" height="193" /></td>

      <td><img src="http://peb.pl/miniaturki/Kreuk4.jpg" alt="kreuk4" width="258" height="193" /></td>

    </tr>

  </table>

</div>

<table width="850" border="0" cellpadding="0" cellspacing="0">

  <!--DWLayoutTable-->

  <tr>

    <td width="850" height="900" valign="top"><img src="wzor4prjp.jpg" alt="tlo" width="850" height="900" /></td>

  </tr>

</table>

</div>

<div id="apDiv2">

  <table width="43" height="43" border="0">

    <tr>

      <td><a href="kristin2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('but1','','../przyciskpr2.png',1)"><img src="http://peb.pl/przyciskpr1.png" alt="buton" name="but1" width="35" height="35" border="0" id="but1" /></a></td>

    </tr>

  </table>

  </div>

</div>

</div>

</body>

</html>

zewnętrzny css:

Kod:
@charset "utf-8";

/* CSS Document */

 div#container {

   position: relative;

   margin: 0 auto;

   width: 80%;

 }

Nie wiem czy ja źle do tego podchodzę czytalem już troche kursów i poradników.
I jeszcze raz to samo mam wstawione jpg w komórke i na nim chciałem w divach umieszczać obiekty. No nic jak się nauczę[/code] to na nie jednego posta tu zapewne odpisze Big Grin

**Labsta.com** · 27-08-2009, 00:33

Poprawiłem Ci to:

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" href="container.css" type="text/css" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

div#container {

   position: relative;

   margin: 0px auto;

   width: 850px;

}

#apDiv1 {

    position:absolute;

    left:10px;

    top:25px;

    width:850px;

    height:232px;

    z-index:1;

}

#apDiv2 {

        position:absolute;

    margin: 0px auto;

    top: 381px;

    z-index:2;

}

#apDiv2 table {

   margin: 0px auto;

}

-->

</style>

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<body onload="MM_preloadImages('../przyciskpr2.png')">

<div id="container">

<div id="apDiv1">

  <table width="845" height="229" border="0">

    <tr>

      <td><img src="http://peb.pl/miniaturki/kreuk1.jpg" alt="kreuk1" width="258" height="193" /></td>

      <td><img src="http://peb.pl/miniaturki/Kreuk3.jpg" alt="kreuk3" width="258" height="193" /></td>

      <td><img src="http://peb.pl/miniaturki/Kreuk4.jpg" alt="kreuk4" width="258" height="193" /></td>

    </tr>

  </table>

</div>

<table width="850" border="0" cellpadding="0" cellspacing="0">

  <!--DWLayoutTable-->

  <tr>

    <td width="850" height="900" valign="top"><img src="wzor4prjp.jpg" alt="tlo" width="850" height="900" /></td>

  </tr>

</table>

<div id="apDiv2">

  <table width="43" height="43" border="0">

    <tr>

      <td>2<a href="kristin2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('but1','','../przyciskpr2.png',1)"><img src="http://peb.pl/przyciskpr1.png" alt="buton" name="but1" width="35" height="35" border="0" id="but1" /></a></td>

    </tr>

  </table>

</div>

</div>

</body>

</html>

Ogólnie mam nadzieję, że wiesz jak jest zrobiony ten kod. Niestety jest to poplątanie z pomieszaniem, w ten sposób się tego nie robi. Używając takich programów niczego się nie nauczysz i zawsze będą problemy. Zacznij od podstaw xhtml i css, zrozum filozofię stron opartych na divach. Ogólnie zapomnij też o position:absolute; bo gdy treść zacznie się rozrastać zaczną się problemy. Oczwywiście o tabelkach również.

Zacznij tu: http://kurs.browsehappy.pl/

P.S. Nie ma co się bać - zakładaj swoje tematy. Będzie lepiej dla Ciebie i na forum będzie większy porządek.

Tekilos · (Ten post był ostatnio modyfikowany: 27-08-2009, 03:14 przez Tekilos.)

Dziękuje za odpowiedź i poprawienie kodu już biorę się za tą stronkę z kursem. Co do bania się hehe to tylko takie przyzwyczajeni z forów angielsko języcznych gdzie wszędzie jest walka ze spamem i oszczędza się topiki i pisze dużo w 1 temacie. A w kodzie 2 zmiany + 2 divy i ta dwójka na końcu w kodzie chyba omyłkowa skasowałem. Trzyma się to teraz jak należy ale ten przycisk deko dziwny bo jest niewidoczny(tekst zapasowy widać buton) dopiero przy najeździe pojawia się buton.No i przejechał na drugą stronę ale to pewnie kwestia ustawiania pozycji w liczbach .Myślę poczytam kurs dziś i jutro będę wiedział i umiał więcej.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie