Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Jak zrobić i umieścić box na banery
Forum PHP.pl > Forum > Przedszkole
danuta47
2.12.2008, 15:36:05
Witam Wiem że to banalne ale jak próbuję sama coś zrobić to cała strona mi się rozwala albo mam jedno na drugim sad.gif .
Zależy mi żeby zrobić 2 jednakowe boxy z lewej i prawej strony . Dokładnie to o co mi chodzi przedstawiłam poniżej :



Z góry dziękuję za pomoc
erix
2.12.2008, 16:38:52
Bez kodu, to możemy sobie powróżyć. winksmiley.jpg

IMHO kontener na szerokość 60%, dwie kolumny na bok po 15%, ale więcej nie powiem, bo szklana kula na nartach. ;P
danuta47
2.12.2008, 19:01:42
Ok smile.gif tak myślałam że będzie potrzebny , już podaję cały kod :
[HTML] pobierz, plaintext 
  1. <? include("db_connect.php");
  2. include("function.php");
  3. include("ust.php");
  4. include("adm/namen.php");
  5. ?>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8. <head><meta name="verify-v1" content="z48UTJoksu6eUnr+j0DECPlhQb8fRBCdlBKDM+x87bg=" /><!-- TradeDoubler site verification 1582835 --> 
  9. <title><? if($_GET['q']!=""){echo mplus($_GET['q']).' - ';} echo $ust['title'];?></title>
  10. <meta name="Description" content="<? echo $ust['desc']; ?>" />
  11. <meta name="Keywords" content="<? echo $ust['key']; ?>" />
  12. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  13. <link rel="stylesheet" href="images/style.css" type="text/css" />
  14. </head>
  15. <body>
  16. <script language="JavaScript" type="text/javascript">
  17.  
  18. function spr(aform){
  19.  
  20. if(aform.q.value==""){
  21. alert("Podaj tytul piosenki");
  22. return false;
  23. }
  24.  
  25. }
  26. </script>
  27. <div class="content">
  28.   <div class="header_top"></div>
  29.   <div class="header">
  30. 	<div class="sf_right">
  31. 	  <div id="nav">
  32. 		<ul>
  33. 		  <li><a href="index.html">Home</a></li>
  34. 		  <? if($ust['onas']!=""){ ?><li><a href="onas.html">O Nas</a></li><?}?>
  35. 		  <? if($ust['regulamin']!=""){ ?><li><a href="regulamin.html">Regulamin</a></li><?}?>
  36. 		  <? if($ust['kontakt']!=""){ ?><li><a href="kontakt.html">Kontakt</a></li><?}?>
  37.  
  38. 		</ul>
  39. 	  </div>
  40. 	  <div class="sf_search">
  41. 		<form method="GET" action="do.php" onSubmit="return spr(this)">
  42. 		  <p><b>Szukaj:</b>
  43. 			<input type="text" name="q" class="search" />
  44. 			<input type="submit" value="Go" class="submit" />
  45. </p>
  46. 		</form>
  47. 	  </div>
  48. 	</div>
  49. 	<div class="sf_left">
  50. 	  <h1><a href="">MP3RADIO <a href="http://www.alefirmy.pl"><img src="http://www.liczniki.wabi.pl/licznik.php?user=mp3radio" alt="Liczniki" border="0"></a></a></h1>
  51. 	</div>
  52.   </div>
  53.   <div class="header_bottom"></div>
  54.   <div class="subheader">
  55.  
  56.  
  57. <center>
  58. <center>
  59. <script type="text/javascript"><!--
  60. google_ad_client = "pub-2740713983958791";
  61. /* 728x90, utworzono 08-11-12 */
  62. google_ad_slot = "9765793333";
  63. google_ad_width = 728;
  64. google_ad_height = 90;
  65. //-->
  66. </script>
  67. <script type="text/javascript"
  68. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  69. </script>
  70. </center>
  71. 	<p></p>
  72.   </div>
  73.   <div class="header_top"></div>
  74.   <div class="left">
  75. 	<div class="left_side">
  76. 	  <div class="box_top">
  77. 		<h2><a href="popularne.html">Popularne</a></h2>
  78. 	  </div>
  79. 	  <div class="box">
  80. 		<p><? include("public/naj.php"); ?></p>
  81. 	  </div>
  82. 	  <div class="box_bottom"></div>
  83. 	</div>
  84. 	<div class="right_side">
  85. <? if($_GET['action']=="szukaj")
  86. {
  87. echo'
  88. 	  <div class="article">
  89. 		<h2>Znaleziono:</h2>
  90. 		<h3></h3>
  91. <p>
  92. ';
  93. include("public/search.php");
  94. echo'
  95. 	   </p>
  96. 	  </div>
  97. ';
  98. }
  99. else if($_GET['action']=="kontakt")
  100. {
  101. echo'
  102. 	  <div class="article">
  103. 		<h2>Kontakt</h2>
  104. 		<h3></h3>
  105. <p>
  106. '.nl2br($ust['kontakt']).'
  107. 	   </p>
  108. 	  </div>
  109. ';
  110. }
  111. else if($_GET['action']=="onas")
  112. {
  113. echo'
  114. 	  <div class="article">
  115. 		<h2>O Nas</h2>
  116. 		<h3></h3>
  117. <p>
  118. '.nl2br($ust['onas']).'
  119. 	   </p>
  120. 	  </div>
  121. ';
  122. }
  123. else if($_GET['action']=="regulamin")
  124. {
  125. echo'
  126. 	  <div class="article">
  127. 		<h2>Regulamin</h2>
  128. 		<h3></h3>
  129. <p>
  130. '.nl2br($ust['regulamin']).'
  131. 	   </p>
  132. 	  </div>
  133. ';
  134. }
  135. else if($_GET['action']=="index" or $_GET['action']=="")
  136. {
  137. if($ust['index']!="")
  138. {
  139. echo'
  140. 	  <div class="article">
  141. 		<h2></h2>
  142. 		<h3></h3>
[HTML] pobierz, plaintext


Przepraszam za post pod postem ale caly kod sie nie mieścil sad.gif

[HTML] pobierz, plaintext 
  1. <p>
  2.  '.nl2br($ust['index']).'
  3. 		</p>
  4. 	   </div>
  5.  ';
  6.  }
  7.  $link="news,page,";
  8.  
  9.  $zapytanie = "SELECT * FROM news ORDER by id DESC";
  10.  
  11.  if(!$strona){
  12.  $nr=$_GET["strona"];
  13.  if($nr==0)
  14.  {
  15.  $nr=1;
  16.  }
  17.  
  18.  $strona=$nr;
  19.  }
  20.  
  21.  
  22.  $ile=$ust['ilen'];
  23.  
  24.  $start=($strona-1)*$ile;	 
  25.  
  26.  $wykonaj = mysql_query($zapytanie) or Die("Nie działa zapytanie". $zapytanie);
  27.  $ile_rek = mysql_num_rows($wykonaj);
  28.  
  29.  $podstron = ceil($ile_rek/$ile);
  30.  
  31.  $zapytanie.= " LIMIT $start,$ile";	
  32.  
  33.  $final = mysql_query($zapytanie) or Die ("Nie działa zapytanie końcowe");
  34.  $i=0;
  35.  
  36.  while($row=mysql_fetch_array($final))
  37.  {
  38.  echo'
  39. 	   <div class="article">
  40. 		 <h2><a href="news,'.$row['id'].','.namen($row['tytul']).'.html">'.$row['tytul'].'</a></h2>
  41. 		 <h3></h3>
  42.  <p>
  43.  
  44. 		</p>
  45. 	   </div>
  46.  ';
  47.  }
  48.  if($ile_rek>$ile)
  49.  {
  50.  include("podzial.php");
  51.  }
  52.  }
  53.  else if($_GET['action']=="news")
  54.  {
  55.  $Query='SELECT * FROM news WHERE id="'.mysql_real_escape_string($_GET['id']).'"'; 
  56.  $result = mysql_query($Query) or die(mysql_error());
  57.  while ($row = mysql_fetch_array($result)) 
  58.  {
  59.  echo'
  60. 	   <div class="article">
  61. 		 <h2><a href="news,'.$row['id'].','.namen($row['tytul']).'.html">'.$row['tytul'].'</a></h2>
  62. 		 <h3></h3>
  63.  <p>
  64.  '.nl2br($row['tresc']).'
  65. 		</p>
  66. 	   </div>
  67.  ';
  68.  }
  69.  }
  70.  else if($_GET['action']=="ostatnio-szukane")
  71.  {
  72.  echo'
  73. 	   <div class="article">
  74. 		 <h2>Ostatnio szukane</h2>
  75. 		 <h3></h3>
  76.  <p>';
  77.  
  78.  $Query='SELECT * FROM search ORDER by datal DESC'; 
  79.  $result = mysql_query($Query) or die(mysql_error());
  80.  while($row=mysql_fetch_array($result))
  81.  {
  82.  echo'<a href="do,'.$row['txt'].'.html">'.mplus($row['txt']).'</a><br>';
  83.  }
  84.  
  85.  echo'	   </p>
  86. 	   </div>
  87.  ';
  88.  }
  89.  else if($_GET['action']=="popularne")
  90.  {
  91.  echo'
  92. 	   <div class="article">
  93. 		 <h2>Popularne</h2>
  94. 		 <h3></h3>
  95.  <p>';
  96.  
  97.  $Query='SELECT * FROM search ORDER by ile DESC'; 
  98.  $result = mysql_query($Query) or die(mysql_error());
  99.  while($row=mysql_fetch_array($result))
  100.  {
  101.  echo'<a href="do,'.$row['txt'].'.html">'.mplus($row['txt']).'</a><br>';
  102.  }
  103.  
  104.  echo'	   </p>
  105. 	   </div>
  106.  ';
  107.  }
  108.  
  109.  ?>
  110.  
  111.  
  112.  
  113.  
  114. 	 </div>
  115.    </div>
  116.    <div class="right">
  117. 	 <div class="box_top">
  118. 	   <h2><a href="ostatnio-szukane.html">Ostatnio szukane</a></h2>
  119. 	 </div>
  120. 	 <div class="box">
  121. 	   <p><? include("public/ost.php"); ?></p>
  122. 	 </div>
  123.  
  124. 	 <div class="box_bottom"></div>
  125.    </div>
  126.    <div class="header_bottom"></div>
  127.    <div class="footer">
  128. 	 <p><center>Copyright Š 2008 .<a href="http://www.tsi-g.info">TSI-G</a>
  129.    </div>
  130.  </div>
  131.  <? echo $ust['stat'];?>
  132. 	<!---
  133. 	TSI-G mp3 Serach 1.0 by piotrek-d1
  134. 	email: piotrek-d1@o2.pl
  135. 	www.tsi-g.info
  136. 	--->
  137.  </body>
  138.  </html>
[HTML] pobierz, plaintext


Z góry dziękuję za pomoc i Pozdrawiam[/code]
erix
2.12.2008, 19:53:02
A CSS? Co do layoutu, to spróbuj tego: http://www.alistapart.com/articles/holygrail
danuta47
2.12.2008, 22:19:44
Oto i plik CSS , jeszcze mam prośbę jak zmienić całe te szare tło na około np na czarny lub inny .

Kod
body { padding: 0; margin: 0; font: 0.7em Arial, sans-serif; line-height: 1.5em; background: #F0F0F0; color: #454545; }
a { color: #0E4D8B; background: inherit; }
a:hover { color: #000; background: inherit;}
a.title { color: #B41A1A; background: #FFF; }

h1 { font: bold 2em Arial, Sans-Serif; letter-spacing: -1px; padding: 16px 0 0 8px; margin: 0; }
h2 { margin: 0; padding: 0; font: normal 1.6em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a { color: #FFF; background: inherit; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #BFE1ED; background: inherit; }
h3 { font: 90% Arial, Sans-Serif; margin: 0 0 10px 0; padding: 0; color: #5f5f5f; background: #FFF; }
p {    margin: 0 0 0px 0; line-height: 1.5em; }
form { margin: 0; }
input.search { width: 199px; border: none; background: #FFF url(input.gif); padding: 4px; color: #808080; }
input.submit { height: 24px; font-weight: bold; width: 53px; border: none; background: #D96855 url(button.gif); padding: 3px; color: #FFF; }

/* layout
   ------ */

.content {
    margin: 10px auto;
    width: 768px;
    background: #FFF url(big_middle.gif) repeat-y;
    color: #454545;
    
}

.logo {    padding: 18px 0 0 3px; }

/* header */
.header_top { background: #FEFEFE url(big_top.gif) no-repeat; color: #FFF; height: 15px; }
.header { padding: 0px 10px 0 10px; }
.header_bottom { clear: both; background: #FEFEFE url(big_bottom.gif) no-repeat; color: #FFF; height: 15px; }
    
/* navigation */
#nav { width:100%; float:left; }
#nav ul { margin:0; list-style:none; padding: 0; }
#nav a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 7px 20px 4px 10px; background: #C43219 url(nav.gif) no-repeat 100% 0px; text-decoration:none; font-weight: bold; }
#nav a { float:none; }
#nav li { float:left; color: #FFF; background: #C43219 url(nav.gif) no-repeat 0px 0px; margin:0; padding:0 0 0 9px; }
#nav #current { background: #1995C2 url(nav.gif) no-repeat 0 -41px; color: #FFF; }
#nav #current a { background: #1995C2 url(nav.gif) no-repeat 100% -41px; padding:7px 20px 4px 11px; color:#FFF; }
#nav a:hover { color:#BFE1ED; background: #C43219 url(nav.gif) no-repeat 100% 0px; }  


.sf_left {
    float: left;
    width: 203px;
    height: 77px;
    background: #5BB2D1 url(logobg.gif) repeat-x;
    color: #FFF;
    border-top: 1px solid #137DA2;
    border-bottom: 1px solid #000;
    padding: 10px 0 0px 7px;
}

.sf_right {
    width: 537px;
    float: right;
}

.sf_search {
    clear: both;
    background: #CA090D url(searchbg.gif) repeat-x bottom left;
    color: #FFE4E0;
    border-top: 1px solid #AA1717;
    border-bottom: 1px solid #000;
    padding: 18px 0 17px 15px;
    margin-top: -2px;
}
    
.subheader {
    padding: 8px;
    background: #f0f0f0;
    color: #808080;
}

/* left side
   --------- */

.left {
    float: left;
    width: 595px;
    margin: 0 0 10px 0;
}

    .box_top {
        background: #F0F0F0 url(leftbox_top.gif) no-repeat;
        color: #808080;
        height: 40px;
        width: 159px;
    }
    
    .box_top h2 {
        color: #808080;
        background: inherit;
        padding: 7px 0 0 5px;
        margin: 0;
    }
    
    .box {
        border-left: 2px solid #F0F0F0;
        border-right: 2px solid #F0F0F0;
        padding: 0 4px 0 7px;
        margin: 0;
        width: 144px;
        color: #595959;
        background: #FFF;
    }
    
    .box_bottom {
        background: #FFF url(leftbox_bottom.gif) no-repeat;
        color: #000;
        height: 13px;
        width: 160px;
        margin: 0 0 7px 0;
    }
    
        /* left and central column */
        .left_side { float: left; width: 159px; padding: 0px 5px 8px 8px; }
        .right_side { float: right; width: 405px; margin: 0 5px 0 0; }
        
        .article { padding: 0 5px 0 0px; margin-bottom: 20px; }
        
    .grey_top { clear: both; width: 382px; background: #EDEDED url(grey_top.gif) no-repeat; color: #000; height: 5px; padding: 0; margin: 0px 0 0 6px; }
    .grey { width: 362px; margin: 0 0 0 6px; padding: 10px; background: #EDEDED url(grey_bottom.gif) no-repeat bottom left; color: #808080;    }
        
    .grey a {
        color: #C83C3C;
        background: inherit;
        font-weight: bold;
    }
    
    .grey a:hover {
        color: #000;
        background: #EDEDED;
    }
    
    .highlight {
        padding: 5px 3px 5px 3px;
        margin: 0 0 3px 0;
        border-bottom: 1px solid #ccc;
    }
    
        
/* right side
   ---------- */
        
.right { float: right; width: 170px; margin: 0 0 10px 0;}
        
img { float: left; margin: 0 9px 3px 0; }

/* footer
   ------ */

.footer {
    clear: both;
    text-align: center;
    color: #808080;
    background: #f0f0f0;
    padding: 10px 0 5px 0;
    border-top: 1px solid #eee;
}
.footer p {    line-height: 2em; }
.footer a {    color: #4F4F4F; background: #f0f0f0; border-bottom: 1px dotted #808080; text-decoration: none; }
qdesigner
3.12.2008, 09:22:15
Szary kolor u Ciebie to zapewne #F0F0F0. Pozmieniaj go na czrny podmieniając kod z #F0F0F0 na #000000.

Zmieniaj tylko w miejscach "background: #F0F0F0 ...;" na "background: #000000 ....;"

Zmieniaj po kolei i sprawdzaj.
W taki sposób się nauczysz w jaki sposób w dowolnym miejscu zmienić kolor.
danuta47
3.12.2008, 15:23:40
Dziekuję bardzo za pomoc smile.gif Prosiła bym jeszcze o pomoc w dodaniu tych 2 boxów na banery . Dziękuję i Pozdrawiam danuta47
erix
3.12.2008, 17:14:02
Podałem Ci linka do rozwiązania.

Wybacz, ale Ty na tym będziesz najprawdopodobniej zarabiać, my nie, więc to uszanuj.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.