ďťż

Kod stylu kod stylu CSS

Strona początkowa
 
JavaScript
 
Max dla RAM
 
Quick Time
 
phpBB skins

Podstrony

telcocafe

Jak powinien wyglądać kod css i html, aby strona wyglądała tak jak TU. Chciełbym aby były takie tabele, a skrupt był zgodny z xhtml.


Rany, przecież był już taki temat... Sam go założyłeś. Nie mogłeś tam napisać??

@down: Ups ;] Nie zauważyłem. Zaraz Ci napisze ten kod. Aha, jeszcze jedno: jaka tam ma być czcionka??
Użytkownik szyma2 edytował ten post 31 styczeń 2006, 14:55

Rany, przecież był już taki temat... Sam go założyłeś. Nie mogłeś tam napisać??

index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <title>Tytuł</title> <style type='text/css'>    <!--    @import url('style.css');    --> </style> </head> <body> <table class='table'> <tr> <td class='logo'>tutaj logo</td> </tr> </table> <table class='table'> <tr> <td class='menu' valign='top'> <a href="#">Link 1</a><br  /> <a href="#">Link 2</a><br  /> <a href="#">Link 3</a><br  /> <a href="#">Link 4</a><br  /> <a href="#">Link 5</a><br  /> </td> <td class='glowna' valign='top'>Witaj na naszej stronie!</td> </tr> </table> <table class='table'> <tr> <td class='stopka'>Copyright by simo_n</td> </tr> </table> </body> </html>
style.css:
.table { width: 100%; } .logo { border: 1px solid #000000; height: 50px; width: 100%; } .menu { border: 1px solid #000000; height: 300px; width: 20%; font-family: Arial; font-size: 12px; } .glowna { border: 1px solid #000000; height: 300px; width: 80%; font-family: Verdana; font-size: 10px; margin-left: 5px; } .stopka { border: 1px solid #000000; height: 20px; width: 100%; }

Napisałem Ci podstawy, dalej kombinuj sam. Jakby coś nie szło - pytaj.

PS: Przecież nie będe Ci całej strony pisał... To tylko kod, jak zacząć.

//edit
Efekt? Proszę bardzo: http://gorlice.net.p...ma2/index2.html
Przykro mi, że są odstępy, ale żeby zrobić stronę zgodną z XHTML 1.1, musiałem zrobić 3 tabelki, bo nie wolno używać 'colspan' :unsure:
Użytkownik szyma2 edytował ten post 31 styczeń 2006, 15:15

http://bedkowski.pl/css/divLayout/

Mam jeszcze jedno pytanie. Jak mam zoptymilizować te kody
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <title>Tytuł</title> <style type='text/css'>   <!--   @import url('style2.css');   --> </style> </head> <body> <table class='table'> <tr> <td class='logo'>tutaj logo</td> </tr> </table> <table class='table'> <tr> <td class='menu' valign='top'> <a href="#">Link 1</a><br  /> <a href="#">Link 2</a><br  /> <a href="#">Link 3</a><br  /> <a href="#">Link 4</a><br  /> <a href="#">Link 5</a><br  /> </td> <td class='glowna' valign='top'>Witaj na naszej stronie!</td> </tr> </table> <table class='table'> <tr> <td class='menuprawe' valign='top'> <a href="#">Link 1</a><br  /> <a href="#">Link 2</a><br  /> <a href="#">Link 3</a><br  /> <a href="#">Link 4</a><br  /> <a href="#">Link 5</a><br  /> </td> <table class='table'> <tr> <td class='stopka'>Copyright by simo_n</td> </tr> </table> </body> </html>
i ten
.body { margin: auto; } .table { width: 850px; margin: auto; background-color: #FFCC00; font-family:VERDANA; } .logo { border: 1px solid #000000; height: 70px; width: 730px; } .menu { border: 1px solid #000000; height: 448px; width: 110px; font-family: Arial; font-size: 12px; } .glowna { border: 1px solid #000000; height: 448px; width: 630px; font-family:verdana; font-size: 15px; margin-left: 5px; text-align: center; } .menuprawe { border: 1px solid #000000; height: 448px; width: 110px; font-family: Arial; font-size: 12px; } .stopka { border: 1px solid #000000; height: 20px; width: 700px; font-family:Monotype Corsiva; }
aby to "menuprawe" było na prawo od głownej tabelki??

Czy ktoś mi pomoże
Błagam pomóżcie mi.
Użytkownik simo_n edytował ten post 16 luty 2006, 16:05
sa dwa sposoby:

1) mozesz zrobic strone na bazie tabelek a poszczegolne klasy css beda okreslac styl odpowiednich komorek

2) ja bym to zrobil zupelnie inaczej, tzn dopisalbym w kazdej klasie kilka linijek okreslajacych polozenie obiektu wzgledem gornej krawedzi oraz prawej krawedzi.
daje to duze mozliwosci jesli chodzi o bezwzgledne polozenie obiektow bo mozemy ukladac pewne elemendy nie tylko obok siebie, lecz takze jeden na drogim i jest to duzo leppsze (wg mnie oczywiscie)

PS. jakos wieczorkiem wrzuce Ci kody do tego na razie tylko teoria... B)

sorry ze post pod postem ale juz napisalem te kody

1) metoda z tabelkami

kod strony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <title>Tytuł</title> <style type='text/css'>  <!--  @import url('style2.css');  --> </style> </head> <body> <!-- logo --/> <table class='table'> <tr> <td class='logo'>tutaj logo</td> </tr> </table> <table class='table'> <tr> <!-- menu --/> <td class='menu' valign='top'> <a href="#">Link 1</a><br  /> <a href="#">Link 2</a><br  /> <a href="#">Link 3</a><br  /> <a href="#">Link 4</a><br  /> <a href="#">Link 5</a><br  /> </td> <!-- zawartosc strony --/> <td class='glowna' valign='top'>Witaj na naszej stronie!</td> <!-- menu prawe --/> <td class='menuprawe' valign='top'> <a href="#">Linkprawy 1</a><br  /> <a href="#">Linkprawy 2</a><br  /> <a href="#">Linkprawy 3</a><br  /> <a href="#">Linkprawy 4</a><br  /> <a href="#">Linkprawy 5</a><br  /> </td> </tr> </table> <!-- stopka --/> <table class='table'> <tr> <td class='stopka'>Copyright by simo_n</td> </tr> </table> </body> </html>

kod stylu
.body { margin: auto; } .table { width: 850px; margin: auto; background-color: #FFCC00; font-family:VERDANA; } .logo { border: 1px solid #000000; height: 70px; width: 730px; } .menu { border: 1px solid #000000; height: 448px; width: 110px; font-family: Arial; font-size: 12px; } .glowna { border: 1px solid #000000; height: 448px; width: 630px; font-family:verdana; font-size: 15px; margin-left: 5px; text-align: center; } .menuprawe { border: 1px solid #000000; height: 448px; width: 110px; font-family: Arial; font-size: 12px; } .stopka { border: 1px solid #000000; height: 20px; width: 700px; text-align: center; font-family:Monotype Corsiva; }
Użytkownik korek1 edytował ten post 17 luty 2006, 11:00
Dzieki. pobawie sie tymi kodami i przerobie na taki, ktory mnie zadowoli.

drugi sposob:

kod strony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <title>Tytuł</title> <style type='text/css'>  <!--  @import url('style2.css');  --> </style> </head> <body> <P class="tekst"> tutaj jest zawartosc strony </P> <P class="menu"> <A href="index.html">link1</A><BR> <A href="index.html">link2</A><BR> <A href="index.html">link3</A><BR> <A href="index.html">link4</A><BR> <A href="index.html">link5</A> </P> </body> </html>

kod stylu
.tekst { width: 300px; height: 200px; border-color: black; border-style: solid; border-width: 2px; background: silver; top: 100px; left: 225px; position: absolute; } .menu { width: 100px; height: 200px; border-color: black; border-style: solid; border-width: 2px; background: silver; top: 100px; left: 120px; position: absolute; }

jak widac w kazdej klasie (sa az dwie) wystepuja 3 linijki:

linijka
top: 100px;
mowi o odstepie elementu strony okreslonego ta klasa od gornej czesci ekranu

linijka
left: 225px;
mowi o odstepie od lewej czesci ekranu

oczywiscie zamiast "top" mozemy uzyc:
left-lewy
right-prawy
top-gora
bottom-dol

jest jeszcze linijka
position: absolute;
mozemy uzyc:
static
relative
absolute
fixe

jak wspominalem mozemy tez stawiac element na elemencie
zeby to zrobic dodajemy linijke:
z-index: liczba;
w ten sposob okreslamy ktory element jest pierwszy ktory drugi itd.

a tak apropo to ten odnośnik nie działa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <title>NIEOFICJALNA STRONA I GIMNAZJUM IM. JANA DŁUGOSZA W NOWYM SˇCZU</title> <style type='text/css'>   <!--   @import url('style.css');   --> </style> </head> <body> <table class='table'> <tr> <td class='logo'><img src="button.gif" width="550" height="70" alt="Rozmiar: 39008 bajtów" /></td> </tr> </table> <table class='table'> <tr> <td class='menu' valign='top'> <b>jeste&para;</b><br  /><script language="Javascript" src="http://count.mystat.pl/counter.js"></script> <script language="Javascript"> <!--   par="?s=szymonnosal&p=index&t=s&c=g211&fg=000000&bg=FFFF00&d=0";   if (window.writeCounter) writeCounter(); //--> </script> <noscript><a href="http://www.mystat.pl" target="_top" title="Liczniki"><img src="http://www.mystat.pl/servlet/counter.gif?s=szymonnosal&p=index&t=s&c=g211& fg=000000&bg=FFFF00&d=0" alt="Liczniki"></a></noscript> <!-- prosze nie usuwac tego komentarza --> <!-- Kod licznika MyStat - koniec --><br  /> <b>go&para;ciem na stronie</b><br  /> <table border="1"> <tr> <td><a href="index.html">STRONA GŁÓWNA</a><br /></td> </tr> <tr> <td><a href="aktualne.html">AKTUALNO&brvbar;CI</a></td> </tr> <tr> <td><a href="klasy.html">KLASY</a><br /></td> </tr> <tr> <td><a href="nauczyciele.html">NAUCZYCIELE</a><br /></td> </tr> <tr> <td><a href="kontakt.html">KONTAKT</a><br /></td> </tr> <tr> <td><a href="historia.html">HISTORIA</a><br /></td> </tr> <tr> <td><a href="rekrutacja.html">REKRUTACJA</a><br  /></td> </tr> <tr> <td><a href="chat.html">CHAT</a><br /></td> </tr> <tr> <td><!-- poczatek kodu www.ksiegi-gosci.info -->  <A HREF="http://www.ksiegi-gosci.info/ksiega.php?simo_n">Zobacz wpisy</A></td> </tr> <tr> <td><A HREF="http://www.ksiegi-gosci.info/dodaj.php?simo_n">Dodaj wpis</A> <!-- koniec kodu www.ksiegi-gosci.info --></td> </tr> </table><br  /> <a href="http://gimy.toplista.pl/?we=simo_n" ><SPAN style="width:120px;height:40px;overflow:hidden;background:#EE8800;border:2px; border-color:#FFAA22;border-style:outset;padding:5px;font:bold 11px verdana;color:white;text-decoration:none;text-align:center;cursor:pointer">TOPLISTA< /SPAN></a> <br  /> <a href="http://www.members.lycos.co.uk/nsgim1"><img src="forum1.jpg" width="110" height="70"  alt="Rozmiar: 21323 bajtów" /></a>  <p>    <a href="http://validator.w3.org/check?uri=referer"><img        src="http://www.w3.org/Icons/valid-xhtml11"        alt="Valid XHTML 1.1" height="20" width="50" /></a>  </p> <script language="Javascript" src="http://count.mystat.pl/count.js"></script> <script language="Javascript"> <!--   par="?s=szymonnosal&p=index&c=logo10";   if (window.writeMyStat) writeMyStat(); //--> </script> <noscript><a href="http://www.mystat.pl" target="_top" title="Statystyki serwisu szymonnosal"><img src="http://www.mystat.pl/servlet/count.gif?s=szymonnosal&p=index&c=logo1" alt="Statystyki serwisu szymonnosal"></a></noscript> <!-- prosze nie usuwac tego komentarza --> <!-- Kod statystyk MyStat - koniec --> <a href="http://www.hosting.osemka.pl">Hosting</a>   </td> <td class='glowna' > <b>Witaj na mojej stronie.<br  /> NIEOFICJALNEJ</b>(jak na razie)<b>STRONIE I GIMNAZJUM IM. JANA DŁUGOSZA W NOWYM SˇCZU.</b> </td> </tr> </table> <table class='table'> <tr> <td class='menuprawe' valign='right'> <table border="1"> <tr> <td><a href="index.html">STRONA GŁÓWNA</a><br /></td> </tr> <tr> <td><a href="aktualne.html">AKTUALNO&brvbar;CI</a></td> </tr> <tr> <td><a href="klasy.html">KLASY</a><br /></td> </tr> <tr> <td><a href="nauczyciele.html">NAUCZYCIELE</a><br /></td> </tr> <tr> <td><a href="kontakt.html">KONTAKT</a><br /></td> </tr> <tr> <td><a href="historia.html">HISTORIA</a><br /></td> </tr> <tr> <td><a href="rekrutacja.html">REKRUTACJA</a><br  /></td> </tr> <tr> <td><a href="chat.html">CHAT</a><br /></td> </tr> <tr> <td><!-- poczatek kodu www.ksiegi-gosci.info -->  <A HREF="http://www.ksiegi-gosci.info/ksiega.php?simo_n">Zobacz wpisy</A></td> </tr> <tr> <td><A HREF="http://www.ksiegi-gosci.info/dodaj.php?simo_n">Dodaj wpis</A> <!-- koniec kodu www.ksiegi-gosci.info --></td> </tr> </table><br  /> </td> <table class='table'> <tr> <td class='stopka'>&copy; 2006 simo_n. Wszelkie prawa zastrzeżone. </td> </tr> </table> <p><font color="#FFFFFF">reklama<p>reklama</p></font> </body> </html>
} .table { width: 850px; margin: auto; background-color: #FFCC00; font-family:VERDANA; } .logo { border: 1px solid #000000; height: 70px; width: 730px; } .menu { border: 1px solid #000000; height: 448px; width: 110px; font-family: Arial; font-size: 12px; } .glowna { border: 1px solid #000000; height: 448px; width: 590px; font-family:verdana; font-size: 15px; margin-left: 5px; text-align: center; } .menuprawe { border: 1px solid #000000; height: 448px; width: 110px; font-family: Arial; font-size: 12px; } .stopka { border: 1px solid #000000; height: 20px; width: 700px; font-family:Monotype Corsiva; }

Jak mam przerobić ten kod, aby wyglądał tak jak TUTAJ. Próbowałem sam przerobić, ale mi nychodzi to menu prawe pod spodem.
Użytkownik simo_n edytował ten post 18 luty 2006, 19:56
to bedzie tak samo jak pokazywalem. potem dam ci caly kod... B)

Robiłem tak jak ty mi napisałeś, ale gdy tylko połączyłem go z moim wyskuje "potworek", tzn. to prawe menu jest pod spodem.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl
    		•
    Sitedesign by AltusUmbrae.