|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
dwa problemy: obramowanie kolumny tabeli i obszar dokumentu
|
Liczba postów: 5
Liczba wątków: 1
Dołączył: 10-01-2011
Reputacja:
0
Witam, jestem początkującym w HTML i CSS, mam takie 2 zadania do rozwiązania:
1.Wykorzystując style CSS utwórz tabelę o trzech kolumnach, każda kolumna będzie miała osobne jednolite obramowanie.
2.Napisz kod strony, w której obszar dokumentu zawiera obramowanie i jest ograniczony do rozmiarów 200 na 100 pikseli.
Za pierwsze nie wiem jak się zabrać, natomiast drugie rozwiązałem w ten sposób:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=Windows-1250">
<title>Moja strona WWW</title>
<style type="text/css">
html, body {
width: 200px;
height: 100px;
margin: 10px auto;
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div>Obszar dokumentu</div>
</body>
Jak zrobić aby strona była wyśrodkowana również w IE, pod FF i Chrome działa i warstwa jest wyśrodkowana.
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
10-01-2011, 16:38
(Ten post był ostatnio modyfikowany: 10-01-2011, 16:41 przez Ancik.)
Witaj,
Ad.1) Powinieneś stworzyc tabele o 3 kolumnach, i każdej z tych kolumn nadaj za pomocą deklaracji CSS obramowanie. Wystaczy, że ustawisz obramowanie dla znacznika kolumny.
Ad.2) Po pierwsze, deklaracja body { height/width} nie jest potrzebna, wystarczy taka deklaracja dla diva. Jeżeli chcesz aby ten div znajdował się na środku strony to powinineś ponadto nadac divowi deklaracje { margin-left: auto; margin-right: auto;}.
PS. Nie środkuj body, tj. powyżej zrobiłeś. Jeżeli masz zamiar środkowac stronę, zawsze twórz konetener, który będzie ją zawierał i środkuj wlaśnie ten koneter. Chyba, że zrobiłeś to teraz tylko na potrzeby cwiczenia 
Pozdrawiam.
Liczba postów: 5
Liczba wątków: 1
Dołączył: 10-01-2011
Reputacja:
0
Ad.1) A jak ustawić obramowanie dla znacznika kolumny, bo z wierszem to by nie było problemu?
Ad.2) Ten fragment wyśrodkowuje dokument: margin: 10px auto;. Jak odpalisz ten dokument w Firefox lub Chrome to zobaczysz, że działa, natomiast pod IE nie. Próbowałem z twoją podpowiedzią, jednak nic to nie daje.
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
10-01-2011, 17:22
(Ten post był ostatnio modyfikowany: 10-01-2011, 17:47 przez Ancik.)
Co do problemu ze środkowaniem, to może powiedz jaką wersje IE masz? Ustawiłeś {margin: auto} dla diva, a nie dla body? Nigdy nie spotkałem się z sytuacją w której IE nie interpretowałoby prostego środkowania kontenera.
Pokusiłem się o sprawdzenie tego u siebie. Twój kod środkuje u mnie tego diva zarówno w IE, FF, OPERZE jak i GOOGLE CHROME. Uaktualnij wersje IE, może po prostu masz starszą, a tam lubią dziac sie różne cuda.
Co do tej tabeli, jest taka deklaracja jak "border-spacing", ktora jest odpowiedzią na twoje pytanie . U mnie wygląda to tak:
HTML
Kod: <body>
<div>Obszar dokumentu</div>
<table cellspacing="0" cellpadding="0" width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
CSS
Kod: <style type="text/css">
html, body {
width: 200px;
height: 100px;
margin: 10px auto;
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
td { padding-right: 10px;}
table {
border: 1px black solid;
border-spacing: 0.4em 0;
}
</style>
Wszystko jest jak należy
Pozdrawiam.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
<table>
<col class="pierwsza" />
<col class="druga" />
<col class="trzecia" />
<tr class="first"><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr class="last"><td></td><td></td><td></td></tr>
</table>
.pierwsza {border:2px solid red; border-top-width:0px; border-bottom-width:0px;}
.pierwsza {border-left:2px solid blue; border-top-width:0px; border-bottom-width:0px;}
.pierwsza {border-left:2px solid green; border-top-width:0px; border-bottom-width:0px;}
tr.first td {border-top-width:2px;}
tr.last td {border-bottom-width:2px;}
Powodzenia 
Liczba postów: 5
Liczba wątków: 1
Dołączył: 10-01-2011
Reputacja:
0
11-01-2011, 15:47
(Ten post był ostatnio modyfikowany: 11-01-2011, 15:53 przez pawmar.)
Podany przez ciebie Kartofelek kod, nie wyświetla obramowania, nawet jak się poprawi nazwy klas: .pierwsza, .druga, .trzecia Jeżeli chodzi o wyśrodkowanie elementów w IE, to rzeczywiście aktualizacja IE pomogła. Ancik, a nie wiesz czy da się tak zrobić aby a kolumnach nie było linii poziomych rozdzielających wiersze?
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
Wyświtla bez problemu, tyle tylko że to jest przepis i musisz resztę sam dorobić. Oczywista sprawa że pewnie trzeba by coś z obramowaniem tabeli zrobić
Ale tego czego brakuje nie zdradzę, byś sam trochę popracował nad tymi zadaniami.
Ps. podpowiedź -> google table col
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
11-01-2011, 16:20
(Ten post był ostatnio modyfikowany: 11-01-2011, 16:22 przez Ancik.)
Witaj,
Ciesze się, że mogłem pomóc. Poniżej zamieszam kod, który usuwa poziome linie rozdzielające wiersze. Problem polega na tym, że każda komórka ma osobne obramowanie i w momencie kiedy komórka łączy się z ta poniżej, obramowania nachodzą na siebie tworząc grubszą linie. Przy większej i bardziej skomplikowanej tabeli prawdopodobnie będziesz musiał uciec się do nieco innych środków (które lepiej, żebyś odkrył już sam ), jednak na chwilę obecną wystarczy Ci takie proste rozwiązanie.
XHTML
Kod: <body>
<div>Obszar dokumentu</div>
<table cellspacing="0" cellpadding="0" width="200" border="0">
<tr class="border">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
CSS
Kod: <style type="text/css">
html, body {
width: 200px;
height: 100px;
margin: 10px auto;
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
tr td { border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black;}
.border td { border-top: 1px solid black;}
table {
border: 1px black solid;
border-spacing: 0.4em 0;
}
</style>
Pozdrawiam.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
Patrz -> border-collapse:collapse
Liczba postów: 5
Liczba wątków: 1
Dołączył: 10-01-2011
Reputacja:
0
pozmieniałem css trochę, i teraz wygląda tak:
table {
width: 300px;
border-collapse: collapse;
}
.pierwsza {border:2px solid red; border-top-width:2px; border-bottom-width:2px;}
.druga {border:2px solid blue; border-top-width:2px; border-bottom-width:2px;}
.trzecia {border:2px solid green; border-top-width:2px; border-bottom-width:2px;}
tr.first td {border-top-width:2px;}
tr.last td {border-bottom-width:2px;}
w dobrym kierunku?
|
| Podobne wątki… |
| Wątek: |
Autor |
Odpowiedzi: |
Wyświetleń: |
Ostatni post |
|
Pomagamy rozwiązywać problemy. |
Kamis086 |
0 |
1,432 |
30-12-2018, 23:28
Ostatni post: Kamis086
|
| |
Problemy z rotatorem banerów |
marian65 |
1 |
1,870 |
24-10-2018, 20:05
Ostatni post: Marcin
|
| |
Importowanie wybranych danych z Excel do tabeli w html |
fabsik |
1 |
2,903 |
16-01-2014, 15:41
Ostatni post: fabsik
|
| |
Dodanie 1 wartości do kolumny |
Intelactive |
2 |
2,596 |
20-10-2012, 20:40
Ostatni post: Intelactive
|
| |
Strona w zagnieżdżonej tabeli |
exevan |
10 |
7,813 |
29-09-2012, 03:36
Ostatni post: hieroshima
|
Użytkownicy przeglądający ten wątek: 2 gości
|
|
|
Sponsorzy i przyjaciele
|
|
|
