Prosta tabelka w CSS

**Amfidiusz** · 26 Marca 2011

Hej,

Z CSSem sobie kompletnie nie radzę. Czy mógłby mi ktoś rozpisać kod stworzenia prostej 3-4 kolumnowej tabelki, którą mógłbym wrzucić do siebie do stopki?

Mniej więcej w ten sposób: http://awesomescreenshot.com/01da2shae lub http://awesomescreenshot.com/092a2snff

Będę wdzięczny za każda pomoc

**Amfidiusz** · 26 Marca 2011

Nevermind, zbudowałem to na zwykłej tabeli html

Macsch15 · 26 Marca 2011

Napisałem więc dodam, może komuś sie przyda

<style type="text/css">
body{ margin: 0; } 

.ize table { 
border: 0;
margin: 0;
} 

.ize td{ 
border-left: 1px #ccc solid;
padding: 5px 30px 5px 30px; /* gora, prawy, dol, lewy */
background: url('http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_state_grey_right.png') left center no-repeat;
}

.ize td a:link,	.ize td a:active{
color: #000;
text-decoration: none;
}

.ize td a:hover{
text-decoration: underline; /* podkreslenie po najechaniu */
}


</style>



<table class="ize">
<tr>
<td class="ize"><a href="#">Link</a></td>	<td class="ize"><a href="#">Link</a></td>
<td class="ize"><a href="#">Link</a></td>	<td class="ize"><a href="#">Link</a></td>
</tr>
<tr>
<td class="ize"><a href="#">Link</a></td>	<td class="ize"><a href="#">Link</a></td>
<td class="ize"><a href="#">Link</a></td>	<td class="ize"><a href="#">Link</a></td>
</tr>
</table>

Też na zwykłej tabeli, to chyba najprostszy sposób, c'nie?

26 Marca 2011

Zarzuć Amfi tabelkę, komuś może się przyda

**Amfidiusz** · 26 Marca 2011

Super, upiększę dzięki temu moją tabelkę

Powiedz mi jeszcze, proszę, dlaczego hover nie chce mi działać? Mam obecnie taki kod:

ipb_styles:

.FooterLink
{

   font-size      : 10px;
   color          : #b6cce3;
   text-decoration: none;
}

.FooterLink a:hover {
   color: #fff;
   text-decoration: none;
}

globalTemplate:

<tr>
                                                           <td><a id="Forum" class="FooterLink" href="#">Forum</a></td>
                                                       </tr>

Kolor linków jest taki, jaki chcę, jednak po najechaniu na dowolny z nich, wczytuje się hover standardowej klasy, czyli ciemnoniebieski z podkreśleniem :/

**OmegaOne** · 26 Marca 2011

Tu wersja na listach.

<style type="text/css">

/************************************************************************/
/* RESET (Thanks to YUI) */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } 
table {	border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%;	font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
hr { display: none; }
address{ display: inline; }

/************************************************************************/

.utility-links {
background: #333; 
color: #ccc; 
padding: 10px; 
overflow: hidden; 
font-family: Verdana, Arial, sans-serif; 
font-size: 11px; 

border: 1px solid blue; 
}

.utility-links h3 {
padding: 0 0 10px 0; 
clear: both;
font-size: 14px; 
font-weight: bold; 

border: 1px solid yellow;
}

/* linki */
.utility-links a {
color: #ccc;
padding:2px 10px;
display: block;
text-decoration: none;
}

.utility-links a.rss {
background: url('http://s1.cdn.imgwykop.pl/img/feed_icon.gif') no-repeat 10px 3px; /* ikonka rss wykopowa | zmienic na wlasna */
padding-left: 27px;

border: 1px solid white;
}

.utility-links a:hover {
color: #fff;
background-color: #444;
}

.utility-links ul {
float: left;
margin: 0 10px 0 0;

border: 1px solid red;
}

.utility-links ul.last {
margin: 0;
border: 1px solid green;
}

.utility-links li {
}

</style>
</head>

<body>

<div class="utility-links">
<h3>Przydatne linki...</h3>
<ul>
	<li><a href="#" title="">Idea Wykopu</a></li>
	<li><a href="#" title="">Regulamin</a></li>
	<li><a href="#" title="">Reklama</a></li>
	<li><a href="#" title="">Blog</a></li>
	<li><a href="#" title="">Polityka prywatności</a></li>
	<li><a href="#" title="">Pomoc</a></li>
	<li><a href="#" title="">Kontakt</a></li>
</ul>
<ul>
	<li><a href="#" title="">Katalog grup</a></li>
	<li><a href="#" title="">Dodatki</a></li>
	<li><a href="#" title="">Wykopywarka</a></li>
	<li><a href="#" title="">Widget Wykopu</a></li>
	<li><a href="#" title="">Widget Netvibes</a></li>
	<li><a href="#" title="">Widget iGoogle</a></li>
</ul>
<ul class="last">
	<li><a href="#" title="">Ranking użytkowników</a></li>
	<li><a href="#" title="">Zamów koszulkę</a></li>
	<li><a class="rss" href="#" title="">wykopane</a></li>
	<li><a class="rss" href="#" title="">wykopalisko</a></li>
	<li><a class="rss" href="#" title="">komentarze</a></li>
</ul>
</div>

</body>
</html>

Kolorowe ramki dla jasności gdzie co się zmienia.

a u siebie daj .FooterLink:hover zamiast .FooterLink a:hover

Edytowane 26 Marca 2011 przez OmegaOne

**Amfidiusz** · 26 Marca 2011

Dzięki, koledzy! Teraz wygląda to o wiele bardziej seksownie!

DawPi · 26 Marca 2011

Co tak adresa forum zasłaniasz?

**Amfidiusz** · 26 Marca 2011

A bo jeszcze nie gotowe. Jak będzie, to wrzucę do prezentacji

Zaloguj się

Prosta tabelka w CSS

Rekomendowane odpowiedzi

Amfidiusz

Amfidiusz

Macsch15

Gość DnL

Amfidiusz

OmegaOne

Amfidiusz

DawPi

Amfidiusz

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie