Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Pierwsza strona www - kilka pytań
Mody23
post
Post #1





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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ł,

Ten post edytował Mody23 6.05.2011, 14:52:42
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
Ulysess
post
Post #2





Grupa: Zarejestrowani
Postów: 695
Pomógł: 65
Dołączył: 27.07.2009
Skąd: Y

Ostrzeżenie: (0%)
-----

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 to the top of the page
+Quote Post
-Gość-
post
Post #3





Goście
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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
-Gość-
post
Post #4





Goście
Co do tego że twoje dane są pośrodku poczytaj o padding (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Mody23
post
Post #5





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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ł"

Ten post edytował Mody23 6.05.2011, 15:05:06
Go to the top of the page
+Quote Post
-Gość-
post
Post #6





Goście
Napisałeś kod ok, i nie umiesz dodać do niego nagłówka <h3> ? Nie licz na gotowca pomyśl.
Go to the top of the page
+Quote Post
Mody23
post
Post #7





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
Ulysess
post
Post #8





Grupa: Zarejestrowani
Postów: 695
Pomógł: 65
Dołączył: 27.07.2009
Skąd: Y

Ostrzeżenie: (0%)
-----

dla diva z id top zwiększ wysokość o jakies 30-40px
Go to the top of the page
+Quote Post
Mody23
post
Post #9





Grupa: Zarejestrowani
Postów: 276
Pomógł: 0
Dołączył: 30.06.2010

Ostrzeżenie: (10%)
X----

Mówimy o tym:

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


(IMG:style_emoticons/default/questionmark.gif)

Ten post edytował Mody23 6.05.2011, 15:27:01
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 18:19
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn