Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Pierwsza strona www - kilka pytań
Forum PHP.pl > Forum > Przedszkole
Mody23
6.05.2011, 14:34:40
Witam!

Staram się napisać jakąś pierwszą stronę www no i mam kilka problemów. Strona wygląda tak: KLIK i moje pytanie brzmi:
1. Czemu nad menu jest taka przerwa? Jak ją usunąć?
2. Prawa kolumna, w której jest Kontakt - jak zrobić by te dane były od góry wprowadzone, a nie w środku??
3. Jak dodać w nagłówku pod napisem "Michael2318" jakiś opis? Np. Michael2318 a pod spodem jako opis COSTAMCOSTAM ? Bo jak dodaje po tym:

[HTML] pobierz, plaintext 
  1. <h1><a href="index.htm">Michael2318</a></h1>
[HTML] pobierz, plaintext


np cos takiego:

[HTML] pobierz, plaintext 
  1. <a href="index.htm">COSTAMCOSTAM</a>
[HTML] pobierz, plaintext


To wyświetla się to gdzieś w środku treści dokumentu.

To na tyle. Jeśli macie jakieś propozycje co mógłbym dodać/usunąć to napiszcie!

Tutaj kod HTML strony index.htm:

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <title>Firebox Top Construction Kit</title>
  8. <link rel="stylesheet" href="style.css">
  9. </head>
  10. 	<body xml:lang="pl">
  11. 		<div id="top">
  12. 			<ul>
  13. 				<li><a href="index.htm">Home</a></li>
  14. 				<li><a href="#">Item 2</a></li>
  15. 				<li><a href="#">Item 3</a></li>
  16. 				<li><a href="#">Item 4</a></li>
  17. 				<li><a href="#">Item 5</a></li>
  18. 				<li><a href="#">Item 6</a></li>
  19. 				<li><a href="#">Item 7</a></li>
  20. 				<li><a href="#">Item 8</a></li>
  21. 				<li><a href="#">Item 9</a></li>
  22. 				<li><a href="#">Item 10</a></li>
  23. 			</ul>
  24.  
  25. 			<h1><a href="index.htm">Michael2318</a></h1>
  26. 		</div>
  27. 		<div id="kontener">
  28. 		<div id="tresc">
  29.  
  30. <table width="100%" cellspacing="1" cellpadding="1" border="0">
  31.     <tbody>
  32.         <tr>
  33.             <td width="75%"><h1>To jest pierwszy tytuł</h1>
  34. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br></p>
  35. <h1>To jest drugi tytuł</h1>
  36. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></td>
  37.             <td width="25%" class="prawaTabela"><b>Dane kontaktowe:</b><br><br>
  38. E-mail: Michael23318@gmail.com
  39. Gadu-Gadu: 8058347</td>
  40.         </tr>
  41.     </tbody>
  42. </table>
  43.  
  44. 		</div>
  45.  
  46. 		<div id="stopka">
  47. <p>Copyright by <b>Michael2318</b> - Wszelkie prawa zastrzeżone.</p>
  48. 		</div>
  49.  
  50. 		</div>
  51. 	</body>
  52. </html>
[HTML] pobierz, plaintext


a tutaj style.css:

Kod
body {
    background:#e8ecf1;
    margin:0px;
    padding:0px;
    font:12px helvetica
}

div#kontener{
width: 1000px;
margin: 0px auto;
text-align: justify;
}

div#tresc{
margin-top: 0px;
padding-top: 15px;
}

div#tresc *{
padding-left: 8px;
padding-right: 30px;
}

div#stopka{
height: 120px;
width: 100%;
}

div#stopka p{
width: 100%;
left: 0px;
bottom: 0px;
text-align: center;
}

div#tresc p{
margin-bottom: 0px;
padding-bottom: 15px;
}

#top {
    background:url('top.png');
    height:80px;
    margin-top:0px;
}

#top ul {
    position:absolute;
    list-style:none;
    padding:9px 4px;
    margin:0px 0px 0px 280px;
    background:#23446d;
    font-size:14px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}

#top ul li {
    float:left;
    display:inline-block;
    padding:0px 3px
}

#top ul li a {
    color:#fff;
    text-decoration:none;
    padding:3px 5px;
    text-shadow:1px 0.5px 0px #000
}

#top ul li a:hover {
    background:#1b3657;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}

#top h1 {
    padding:24px 15px
}

#top h1 a {
    padding:5px;
    color:#fff;
    text-decoration:none;
    text-shadow:1px 0.5px 0px #000
}

#top h1 a:hover {
    background:#23446d;
    text-shadow:1px 0.5px 10px #000;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px
}

.prawaTabela {
    background:#EFF4FA;
    border-style: solid;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    border-radius:14px
}


Pozdrawiam!
Michał,
Ulysess
6.05.2011, 14:51:11
co do 2 musisz strone zbudować na DIVach , tabel się już nie stosuje do takich rzeczy.
co do 3 widać że jedyne co potrafisz to zmienić tylko treść..
w kodzie masz "<h1><a href="index.htm">Michael2318</a></h1>" po zamkniętychm /h1 zrob diva w ktorym dasz jakis test a w stylu: display: block;
Gość
6.05.2011, 14:57:31
Po pierwsze to jest twój kod czy tylko ctrl c, v ?
Jeżeli nie to nie mamy o czym rozmawiać bo to nie jest twoja pierwsza strona tylko: "moja przekopiowana strona", do do tego napisu pod michal[..] to daj <h3> pod <h1> i bedziesz miał napis smile.gif
Gość
6.05.2011, 14:59:51
Co do tego że twoje dane są pośrodku poczytaj o padding smile.gif
Mody23
6.05.2011, 15:04:17
Proszę, to zapożyczyłem: KLIK, jednak licencja mi na to pozwala. Reszta kodu jest moja.

Co do paddingu, niestety to nic nie daje. Przypuszczam, że coś to tam trzyma w kodzie.

Co do <h3> - tłumaczę, że cokolwiek dodam po <h1><a...blebleble</h1> - wyświetla się dokładnie na napisie "To jest pierwszy tytuł"
Gość
6.05.2011, 15:11:02
Napisałeś kod ok, i nie umiesz dodać do niego nagłówka <h3> ? Nie licz na gotowca pomyśl.
Mody23
6.05.2011, 15:14:32
Nie napisałem, że nie potrafię tego "dodać" tylko sprawić, by wyświetlił się w dobrym miejscu. Zobacz na stronie gdzie się wyświetla. Kod:

[HTML] pobierz, plaintext 
  1. 	<body xml:lang="pl">
  2. 		<div id="top">
  3. 			<ul>
  4. 				<li><a href="index.htm">Home</a></li>
  5. 				<li><a href="#">Item 2</a></li>
  6. 				<li><a href="#">Item 3</a></li>
  7. 				<li><a href="#">Item 4</a></li>
  8. 				<li><a href="#">Item 5</a></li>
  9. 				<li><a href="#">Item 6</a></li>
  10. 				<li><a href="#">Item 7</a></li>
  11. 				<li><a href="#">Item 8</a></li>
  12. 				<li><a href="#">Item 9</a></li>
  13. 				<li><a href="#">Item 10</a></li>
  14. 			</ul>
  15.  
  16. 			<h1><a href="index.htm">Michael2318</a></h1>
  17. 			<h3>TEKSTKTEST</h3>
  18. 		</div>
  19. 		<div id="kontener">
  20. 		<div id="tresc">
[HTML] pobierz, plaintext
Ulysess
6.05.2011, 15:22:54
dla diva z id top zwiększ wysokość o jakies 30-40px
Mody23
6.05.2011, 15:26:34
Mówimy o tym:

Kod
#top {
    background:url('top.png');
    height:80px;
    margin-top:0px;
}


questionmark.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.