Czy mógłby mi ktoś pomóc w rozwiązaniu mojego problemu?
A mianowicie chciałabym uzyskać taki efekt jak na wp.pl, gdzie są przyciski z podpisami koło siebie, tak jak jest tam: Poczta, Czat, Blogi, DoCelu, WPMobi, Aukcje, WPtv?
Próbowałam tak u mnie zrobić ale nie wyszło mi:(
A mój kod wygląda tak:
Kod: Zaznacz cały
TABLE.tabela4 {
width: 100%;
text-align: center;
border: 1px solid black;
}
.td18 {
width: 40px;
height: 40px;
border: 1px solid black;
background-color: snow;
}
.podpis {
height: 40px;
background-color: silver;
border: 1px solid black;
font-weight: bold;
font-style: italic;
color: blue;
}
.input5 {
height: 40px;
width: 40px;
background: snow;
}
.date_hour {
width: 160px;
height: 30px;
border: 1px solid black;
}
.refresh {
width: 30px;
height: 30px;
border: 1px solid black;
}
.cofnij {
width: 55px;
height: 30px;
background-color: snow;
border: 1px solid black;
}
.strona_glowna {
width: 120px;
height: 30px;
background-color: snow;
border: 1px solid black;
}
.dalej {
width: 50px;
height: 30px;
background-color: snow;
border: 1px solid black;
}
.search {
width: 200px;
height: 30px;
border: 1px solid black;
}
.search1 {
width: 30px;
height: 30px;
border: 1px solid black;
}
.insert_table_row {
width: 30px;
height: 30px;
border: 1px solid black;
}
.delete {
width: 30px;
height: 30px;
border: 1px solid black;
}
.edit {
width: 30px;
height: 30px;
border: 1px solid black;
}
.save {
width: 40px;
height: 40px;
border: 1px solid black;
}
.logout {
width: 30px;
height: 30px;
border: 1px solid black;
}
.actualisation {
height: 10px;
border: 1px solid black;
}
.digits {
color: blue;
background-color: snow;
}
.insert_button {
height: 40px;
width: 40px;
background-color: snow;
}
#search_text {
color: blue;
background-color: yellow;
}
.search_button {
height: 30px;
width: 30px;
background-color: snow;
}
.delete_button {
height: 40px;
width: 40px;
background-color: snow;
}
.edit_button {
height: 30px;
width: 30px;
background-color: snow;
}
.save_button {
height: 40px;
width: 40px;
background-color: snow;
}
.logout_button {
height: 30px;
width: 30px;
background-color: snow;
}
.button_print {
height: 30px;
width: 30px;
background-color: snow;
}
.button_cofnij {
height: 30px;
width: 55px;
font-weight: bold;
text-align: center;
background-color: snow;
}
.button_strona_glowna {
height: 30px;
width: 130px;
font-weight: bold;
text-align: center;
background-color: snow;
}
.button_dalej{
height: 30px;
width: 55px;
font-weight: bold;
text-align: center;
background-color: snow;
}
Kod: Zaznacz cały
<table class="tabela4">
<tr>
<td class="td18">
<button name="submit" class="button_print" onClick="javascript:doit()"/><img src="print.png"></button>
</td>
<td class="podpis" colspan=7>KSWM Copyright 2008 by Marcin Pyć</td>
<td class="refresh">
<button name="submit" class="input5" onClick=""/><img src="refresh.gif"></button>
</td>
<td class="date_hour">
<form name="datetime">
<input type="text" name="digits" size=21 maxlength=25 value="Ładowanie" class="digits">
</form>
</td>
</tr>
<tr>
<td class="cofnij"><button name="submit" class="button_cofnij" onClick="parent.location.href='wybor_maszyn.html'">Cofnij</button></td>
<td class="strona_glowna"><button name="submit" class="button_strona_glowna" onClick="parent.location.href='index.html'">Strona główna</button></td>
<td class="dalej"><button name="submit" class="button_dalej" onClick="parent.location.href='proc_mon_sg_142.html'">Dalej</button></td>
<td class="search"><input id="search_text" size="40"/></td>
<td class="search1"><button="submit" onclick="szukaj('tabela3',document.getElementById('search_text').value, false)"/><img src="search.png" class="search_button"></button></td>
<td class="insert_table_row"><button name="submit" onClick="javascript:addRow('tabela3')"/><img src="insert_table_row.png" class="insert_button"></button></td>
<td class="delete"><button="submit" onClick="javascript:callDeleteLast()"/><img src="delete.png" class="delete_button"></button></td>
<td class="edit"><button="submit" onClick="javascript:callEditLast()"/><img src="edit.png" class="edit_button"></button></td>
<td class="save"><button="submit" onClick="javascript:callSaveLast()"/><img src="save.png" class="save_button"></button></td>
<td class="logout"><button="submit" onclick="javascript:callLogoutLast()"/><img src="logout.png" class="logout_button"></button></td>
</tr>
<tr>
<td class="actualisation" colspan=10>
<!--Pokazuje aktualną datę i czas AKTUALIZACJI-->
<script language="JavaScript">
function initArray()
{
this.length = initArray.arguments.length
for (var i=0;i<this.length;i++)
this[i+1] = initArray.arguments[i]
} // end initArray.
var DOWArray = new initArray("niedziela", "poniedziałek", "wtorek", "środa", "czwartek", "piątek", "sobota");
var MOYArray = new initArray("stycznia", "lutego", "marca", "kwietnia", "maja", "czerwca", "lipca", "sierpnia","września", "października", "listopada", "grudnia");
var LastModDate = new Date(document.lastModified);
document.write("Ostatnia aktualizacja strony:<br>");
document.write(DOWArray[(LastModDate.getDay()+1)],", ");
document.write(LastModDate.getDate()," ");
document.write(MOYArray[(LastModDate.getMonth()+1)]," ");
document.write((LastModDate.getYear()+1900),",");
document.write(" ","g.");
document.write(" ");
document.write((LastModDate.getHours()),":");
document.write((LastModDate.getMinutes()));
document.write(".");
</script>
</td>
</tr>
</table>U mnie to wygląda tak, że mimo że są ustalone szerokości i wysokości dla komórek to różnie to wygląda:
http://odsiebie.com/pokaz/1348240---1cbc.html
Jak widać:
- przycisk Print, nie jest na całej komórce,
- przycisk Odświerz też nie jest na cała komórkę,
- przyciski Cofnij, Strona główna i Dalej również nie są dopasowane do komórek, w których są,
- przycisk szukaj jest za mały i nie jest aktywny,
- komórka w przycisku wyloguj znaczaco sie rozszerzyła, mimo ustawienia parametrów w stylach,
- mimo, że skrypt z datą i godziną jest prawidłowo umieszczony, to na jednej stronie działa a na innej nie,
- pole z godziną i datą aktualizacji, mimo, że ma ustalone width na 20, to i tak dzieli komunikat na dwa wiersze:(
- pozostałe przyciski albo są za małe, albo mają słabą rozdzielczość albo mają zaokrąglone rogi i każdy jest inny, a powinny być o szerokosci 50px i wysokosci 50px i z podpisami pod przyciskami tak jak w przykładzie z www.wp.pl.
Czy mógłby mi ktoś pomóc rozwiązać te problemy?
justynasankiel
