[HTML][CSS] Tabelka Opcje

[Maxik]

Robię stronę na tabelkach i mam dość spory problem z ustawieniem tego wszystkiego w Operze. W wersji 9.52 dzieją się jakieś cuda niewidy: jak dodam doctype to czyta css, jak wywalę to przestaje czytać styl odpowiedzialny za wielkość czcionki, męczę się z tym już kilka dni, może Wy coś poradzicie: http://maxik.netmark.pl/pyton/maxi2/layout.html

[trucksweb]

a co to za cuda ?

[HTML] pobierz, plaintext 
<Td class="maincell" valign="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a leo. Nunc feugiat tortor ut erat. Nam augue lacus, cursus in, ultricies feugiat, lacinia vitae, mauris. Nunc et odio. Suspendisse nibh ipsum, hendrerit a, laoreet id, viverra vitae, mi. In tellus justo, lobortis nec, elementum non, posuere sed, lorem. Fusce gravida pellentesque purus. Maecenas accumsan erat eget tellus. Vestibulum est. Nullam hendrerit posuere arcu. Pellentesque porttitor ante quis est.
</td>
 
</tr>
<tr>
<Td>
[HTML] pobierz, plaintext 

z jakiej racji uzyawsz TD ? a nie td (IMG:http://forum.php.pl/style_emoticons/default/dry.gif)

[Maxik]

A jaki związek ma rozjechanie się tabelki z wielką literą tagu?

[JoShiMa]

Robię stronę na tabelkach i mam dość spory problem z ustawieniem tego wszystkiego w Operze

Rzuć w diabły te tabelki i zrób porządnie na divach a nie nie dość, że rzeźba tabelkowa (zupełnie niezgodna ze standardami) to jeszcze niewiadomo po co aż trzy tabelki i tuźne tagi między tabelkami:

[HTML] pobierz, plaintext 
</table>
              </td>
              </tr>
<tr>
<td>
<table width="1" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
[HTML] pobierz, plaintext 

Weź skasuj ten syf i zrób to porządnie.

[Maxik]

No i w tym problem, bo ja raczej stara szkoła i na divach to średnio (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[JoShiMa]

No i w tym problem, bo ja raczej stara szkoła i na divach to średnio (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

O jakiej Ty szkole piszesz, jak nawet tabelki nie potrafisz sklecić? Zacznij się uczyć (jest mnóstwo dobrych tutoriali) zamiast wykonywać takie wygibasy.

[Maxik]

Akurat do tego wygibasa się nie przyznaję.

Ten post edytował Maxik 21.07.2008, 23:43:04

[JoShiMa]

Akurat do tego wygibasa się nie przyznaję.

Co nie zmienia faktu, że nie potrafiłeś go przeczytać... Wywaliłeś te pętające się znaczniki chociaż?

[Maxik]

Zdecydowałem się na divy, może się uda, w razie problemów napiszę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[JoShiMa]

Gratuluję. Jak by coś to służę pomocą.

[Heweliusz]

Zerknij sobie tutaj.
Masz tam wszystko opisane, i w razie czego jest też szablon.

[Maxik]

Może nie dokładnie, ale przeczytałem to co podrzucił Heweliusz i interesuje mnie tylko jedno, w moim przypadku menu musi przybierać wysokość głównej komórki z treścią, czyli mam dół wrzucić do oddzielnego diva i jemu ustawić np. height: 100%?

Zaczęły się problemy, menu ma swoją wysokość, main ma swoją, a powinny mieć tą samą, bardziej w sensie bordera. Dodatkowo jak to wszystko wyśrodkować. Link: http://maxik.netmark.pl/pyton/div/index.html .Ogólnie powiem, że divy to jest zbawienie i żałuję, że wcześniej robiłem na tabelkach (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[JoShiMa]

Może nie dokładnie, ale przeczytałem to co podrzucił Heweliusz i interesuje mnie tylko jedno, w moim przypadku menu musi przybierać wysokość głównej komórki z treścią, czyli mam dół wrzucić do oddzielnego diva i jemu ustawić np. height: 100%?

Tak się nie da. Na ustawianie jednakowej wysokości menu i treści są specjalne tricki. Jak sobie przypomnę gdzie są tutoriale to dam znać.

Dodatkowo jak to wszystko wyśrodkować.

To akurat jest proste.
Dajesz głównego diva a w nim div z nagłówkiem, div z menu div z trescia i div ze stopką (4 pudełka lub więcej jeśli potrzebujesz w jednym głównym)
To główne pudełko niech ma jakieś id powiedzmy id="main"

fragment stylów:

[HTML] pobierz, plaintext 
* {
	margin: 0;
	padding: 0;
}
 
body {
	font-family: Verdana, Arial, Comic Sans Ms;
	font-size: 12px;
	text-align: center;
}
 
div#main {
	width: 1000px;
	margin: 20px auto 0 auto;
}
[HTML] pobierz, plaintext 

Pierwsza sekcja zeruje marginesy i padding dla wszystkich elementów, potem jak potrzebujesz ustawiasz je indywidualnie.
Druga sekcja ustawia czcionkę (krój i rozmiar dla całego dokumentu), oraz centrowanie elementów , które znajdą się w body, czyli naszego głównego diva. Potem jak będziesz potrzebował to krój i rozmiar czcionki możesz zmieniać dla wybranych elementów.
Żeby div main chciał się ładnie wyśrodkować potrzebuje mieć lewy i prawy margines ustawiony na auto, tak jak w sekcji trzeciej. Góra dół i szerokość według uznania. Resztę stylów dopisujesz sobie wedle uznania.

Ogólnie powiem, że divy to jest zbawienie i żałuję, że wcześniej robiłem na tabelkach (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Cieszę się, że dałeś się przekonać. Jeszcze się naucz jak menu się robi na listach.


A tu masz szkielet strony na divach z równymi kolumnami:
http://www.code-sucks.com/css%20layouts/fi...ts/fw-13-2-col/

Ten post edytował JoShiMa 23.07.2008, 09:09:38

[Maxik]

Jedyne na co wpadłem to prawy border dla dolnego diva, i byłoby dobrze gdyby zakończenie nie wskakiwało na doł, ale chyba wpadłęm na pewien pomysł, link który dałaś to "fixed width" czyli mam rozumieć szerokość, mi natomiast chodzi o wysokość (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Spróbuję zrobić tak jak wymyśliłem a potem się zobaczy.

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  <meta name="Description" content="">
  <meta name="Author" content="Maxik [maxik@wr-pl.com]">
  <meta name="Keywords" content="">
  <meta name="Generator" content="CoreEditor">
  <title>WarRock Premium by PyToN™</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
  <script type="text/javascript" src="js/mintAjax.js"></script>
</head>
<body>
<div id="content">
	  <div id="gora">
	  		 <div id="logo"><img src="images/layout_03.jpg" alt="WarRock Premium by PyToN™"></div>
	  		 <div id="minicennik">
			 		<div id="goraminicennik"><img src="images/layout_04.jpg" alt=""></div>
			 		<div id="trescminicennik"></div>
			 </div>
	  </div>
	  <div id="dol">
	  		 <div id="main">Lorem ipsum dolor sit amet enim. Etiam ullamcorper.<br>
				Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.<br>
				Curabitur et ligula. Ut molestie a, ultricies porta urna.<br>
				Vestibulum commodo volutpat a, convallis ac, laoreet enim.<br>
				Phasellus fermentum in, dolor. Pellentesque facilisis.<br>
				Nulla imperdiet sit amet magna.<br>
				Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.<br>
				Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus.<br>
				Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing.<br>
				Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam.<br>
				Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus.<br>
				Sed vel lectus.<br>
				Ut sagittis, ipsum dolor quam.</div>
	  		 <div id="menu">Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
Curabitur et ligula. Ut molestie a, ultricies porta urna.</div>
	  </div>
	  <div id="zakonczenie">
 			 <div id="koniecmain"><img src="images/layout_10.jpg" alt=""></div>
 			 <div id="koniecmenu"><img src="images/layout_11.jpg" alt=""></div>
     </div>
	  <div id="stopka"><img src="images/stopka.png" alt="Design&amp;Code by Maxik"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext 

Tak wygląda kod strony, wymyśliłem prawy border dla diva o id dol, ale nie wiem czemu tego bordera nie ma.

Kod

html, body {
        background-color: #000000;
        margin: auto;
        padding: 0;
        font-family: Tahoma, Verdana;
        color: white;
        font-size: 11px;
  }
  
  #content {
      width: 900px;  
      margin: 20px auto 0 auto;
  }
  
  #logo {
        height: 210px;
        width: 580px;
        float: left;
  }
  
  #minicennik {
      float:left;
  }
  
  #trescminicennik {
      border-right: 3px solid #92888A;
      border-bottom: 3px solid #92888A;
      width: 299px;
      height: 194px;
  }
  
  #dol {
      clear: both;
      height: 100%;
      border-right: 3px solid #92888A;
  }
  
  #main {
      float: left;
      width: 570px;
      border-right: 3px solid #92888A;
      border-left: 3px solid #92888A;
      padding: 5px 2px 0px 2px;
  }
  
  #menu {
      float: left;
      padding: 5px 2px 0px 2px;
      width: 295px;
      height: 100%;
  }
  
  #zakonczenie {
      clear: both;
  }
  
  #koniecmain {
      float: left;
      width: 580px;
  }
  
  #koniecmenu {
      float: left;
      width: 302px;
  }
  
  #stopka {
      clear: both;
  }

Tak wygląda styles.css

Napewno to jakiś mały błąd którego ja nie widzę, proszę o pomoc.

Ten post edytował Maxik 23.07.2008, 12:10:09

[JoShiMa]

Tu jeszcze sa opisane techniki budowy takich layoutów:
http://blog.mwojcik.pl/2008/06/22/techniki...umnowych-wstep/