Forum PHP.pl > [HTML]Problem z tekstem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Hermesik

16.11.2009, 14:21:30

Zrobiłem projekt strony i teraz przydałoby się ją zakodować. Jako, że robię to po raz pierwszy mam problemy. Spójrzcie na to.
Obrazek 1:

Kod

http://img4.imageshack.us/img4/6459/38443178.jpg

Niby wszystko ładnie, ale wystarczy, że napiszę tekst to dzieje się coś takiego.
Obrazek 2:

Kod

http://img121.imageshack.us/img121/2264/79795868.jpg

Kod jest bardzo zagmatwany, przerabiałem go z szablonu kumpla, tzn. przerabiałem obrazki.
No więc co poradzicie, abym mógł pisać tam tekst bezproblemowo, a może ktoś samemu mógłby mi tą stronę zakodować. Jest to prosta strona, więc bez trudu dalibyście sobie rade. W razie jakby był potrzebny to mogę umieścić tu cały kod.
Dziękuję i pozdrawiam,
Hermes.

elewator

16.11.2009, 15:02:35

umiesc kod, to pomozemy.

Hermesik

16.11.2009, 15:59:34

Proszę bardzo:
http://wyslijto.pl/plik/kkx0ol0nnd

elewator

16.11.2009, 16:00:05

Nie radze kodowac strony na tabelkach (pewnie photoshop ci taki kod wygenerowal?)
Sprobuj napisac razem z tym poradnikiem:
http://www.webtips.pl/topic/7929-strona-w-...e__hl__Saddam92

swiru_

16.11.2009, 23:48:03

Po pierwsze i najwazniejsze, NIE UZYWAJ POLSKICH ZNAKOW W NAZWACH PLIKOW

[HTML] pobierz, plaintext 
<body style="background-color: #CCAA77; 
  background-image: url('tĹ‚o.png');"> 
[HTML] pobierz, plaintext

wnioskuje ze w nazwie tego pliku jest Ł

po drugie musisz baaardzo duzo poczytac na temat kodowania stron osobiescie polecam www.kurshtml.boo.pl jak zaczynalem sie uczyc to bardzo duzo mi pomogla ta strona, ostatnio bylem na niej i zauwazylem ze bardzo wiele rzeczy nie jest zgodnych z aktualnymi standardami W3C ale przegladarki powinny interpretowac kod bez problemu... a jesli kiedys bedziesz chcial na powaznie myslec o tworzeniu stron to radze mocno zaglebic sie w XHTML i CSS no i w ogolnie panujacych zasadach kodowanie stron.

Do elewatora:

To nie jest kod wygenerowany z PSa... Kod z PSa jest bardziej hardcorowy ;]

Hermesik

17.11.2009, 14:34:53

No ok, zrobiłem może po części z tutoriala.
Kod:

Kod

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <link rel="stylesheet" href="style.css" type="text/css" media="all"  />
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Author" content="SADDAM92" />
  <title>Helbreath Lothos</title>
</head>
<body style="background-color: #CCAA77;
  background-image: url('tlo.png');">
<body>
</style></head>
    <div id="container">
         <div id="header"> </div>
         <div id="navcontainer">
               <div id="nav1">
               <div class=?title?></div>
               <center><img src="logo.png" alt="Helbreath Lothos" style="width: 845px; height: 283px; position: absolute;  right: 179px; top: -80px;"/></center><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
               <center><img src="top.png" alt="top" style="width: 808px; height: 74px; position: absolute;  left: 194px; top: 203px;"/></center>
</div>
                              <img src="lewy.png" alt="left" style="width: 342px; height: 618px; position: absolute;  left: 152px; top: 277px;"/><img src="gora.png" alt="srodek" style="width: 549px; height: 108px; position: absolute;  left: 494px; top: 277px;"/><div><img src="prawy.png" alt="right" style="width: 550px; height: 510px; position: absolute;  left: 493px; top: 119px;"/><div>
    </div>
                              <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                              <br><br><img src="stopka.png" alt="stopka" style="width: 1200px; height: 143px;/></center>

<div id="lewo">
    </div>
</body>
</html>

Jak dodać tło, bo jak dodaję ten kod (poniżej) to mam tło tylko pod tekst. Muszę coś napisać i dopiero nad tekstem jest tło:

Kod

Jak zrobić aby nad obrazkiem "lewy.png" wstawić tekst, aby tylko na tym się pisało.
Czemu nie działa mi komenda <center>

Blame

17.11.2009, 14:49:08

1. Poczytaj o display:block;
2. Nie rozumiem pytania,
3. Poczytaj o text-align:center;

Hermesik

17.11.2009, 14:54:22

Tło już ustawiłem.
2 pytanie jakby ci tu wyjaśnić. Chodzi mi o to aby w tym kodzie co podałem, napisać np. coś na środku, a nie zawsze zaczyna się od lewej strony i tego nie można przenieść.
Obrazki przenosiłem komendą position: absolute, ale tekstów chyba się tak nie da pixel po pixelu przenosić?

Blame

17.11.2009, 15:03:29

Hmm... za pojawianie się tekstu po lewej odpowiada pewnie text-align:left umieszczony w zewnętrznym arkuszu styli, z którego nawiasem mówiąc nie korzystasz bo wszystko dajesz do html'a. A żeby tekst pojawił się na środku to po prostu dajesz do elementu w którym się znajduje(div, link, span) text-align:center.

Hermesik

17.11.2009, 15:12:34

A zeby zrobic na srodku danego obrazka?

Blame

17.11.2009, 15:19:16

Obrazek ma być tłem, więc użyj background-image w CSS. W ogóle to przeczytaj sobie najpierw jakiś kurs html i CSS bo to są podstawy.

Hermesik

17.11.2009, 16:30:34

OK, działa zapisałem otworzyłem i zamiast ujrzeć ładnie złożonej strony (pracuję w Pajączku) ujrzałem wszystko porozrzucane:

Moje pytanie, czy da się to naprawić w pare minut, czy muszę wszystko od początku składać.

Blame

17.11.2009, 16:35:26

Pokaż nam co tam nabazgrałeś(HTML+CSS).

Hermesik

17.11.2009, 17:04:33

Proszę:

HTML:

Kod

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<body style="background-color: #CCAA77;
  background-image: url('tlo.png');">
  <link rel="stylesheet" href="style.css" type="text/css" media="all"  />
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Author" content="SADDAM92" />
  <title>Helbreath Lothos</title>
</head>
</style></head>
    <div id="container">
         <div id="header"> </div>
         <div id="navcontainer">
               <div id="nav1">
               <div class=”title”></div>
               <center><img src="logo.png" alt="Helbreath Lothos" style="width: 845px; height: 283px; position: absolute;  right: 179px; top: -80px;"/></center><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
               <center><img src="top.png" alt="top" style="width: 808px; height: 74px; position: absolute;  left: 194px; top: 203px;"/></center>
</div>
                              <img src="lewy.png" alt="left" style="width: 342px; height: 618px; position: absolute;  left: 152px; top: 277px;"/><img src="gora.png" alt="gora" style="width: 549px; height: 108px; position: absolute;  left: 494px; top: 277px;"/><div><img src="prawy.png" alt="right" style="width: 550px; height: 510px; position: absolute;  left: 493px; top: 119px;"/>                            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div><span style="position: absolute;  left: 493px; top: -497px;"">Witam</span></div>
                              <br><br><img src="stopka.png" alt="stopka" style="width: 1200px; height: 143px;/></center>
</div>
<div id="lewo">
    </div>
</body>
</html>

CSS:

Kod

body {
                margin: 0;
                padding: 0;
                text-align:center;
        }
div {
                position:relative;
        }
#container {
                margin: 0 auto;
                padding: 0 0;
                position: relative;
                width: 700px;
                text-align: left;
}
#header {
                width: 700px;
                height: 100px;
}
#navcontainer {
                width:115px;
                float:left;
}
#prawo {
                width:135px;
                float:right;
                text-align:left;
}
#lewo {
                width:135px;
                float:left;
                text-align:right;
}
#srodek {
                width: 446px;
                float: left;
}
#stopka{
                text-align: center;
                clear:both;
}

Blame

17.11.2009, 17:30:47

Cytując pewną mądrą osobę:

Cytat(potreb @ 15.11.2009, 18:09:19 )

Twój kod to sieczka.

Większość rzeczy, które powinny być w arkuszu masz w pliku html albo tu i tu. Wstawiasz obrazki zamiast ustawić je jako tło. Przeczytaj jakiś kurs np. www.kurshtml.boo.pl popraw kod to wtedy pogadamy.

Hermesik

17.11.2009, 21:28:20

Na kurs to ja troszkę czasu nie mam. Stronka pilnie potrzebna na jutro.

Ustawiłem wszystko i już się cieszyłem, ale jak zwykle coś musi stać na przeszkodzie, a mianowicie znowu mowa o tekście. Przy każdej spacji linijka obsuwa się w dół, czyli zamiast np. Witam wszystkich userów,
mam:
Witam
wszystkich
userów.

Jakaś porada?

Kod:

Kod

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<body style="background-color: #CCAA77;
  background-image: url('tlo.png');">
  <link rel="stylesheet" href="style.css" type="text/css" media="all"  />
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Author" content="SADDAM92" />
  <title>Helbreath Lothos</title>
</head>
</style></head>
    <div id="container">
         <div id="header"> </div>
         <div id="navcontainer">
               <div id="nav1">
               <div class=”title”></div>
               <center><img src="logo.png" alt="Helbreath Lothos" style="width: 845px; height: 283px; position: absolute;  left: -73px; top: -80px;"/></center><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
               <center><img src="top.png" alt="top" style="width: 808px; height: 74px; position: absolute;  left: -54px; top: 203px;"/></center>
</div>
                              <img src="lewy.png" alt="left" style="width: 342px; height: 618px; position: absolute;  left: -94px; top: 277px;"/><img src="gora.png" alt="gora" style="width: 549px; height: 108px; position: absolute;  left: 247px; top: 277px;"/><div><img src="prawy.png" alt="right" style="width: 550px; height: 510px; position: absolute;  left: 246px; top: 105px;"/>                            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div><span style="position: absolute;  left: 493px; top: -527px;"">Dodane przez: Hermes
<span style="font-size: xx-small">Data: 17Listopad,21:18</span></div>
                              <br><br><img src="stopka.png" alt="stopka" style="width: 1200px; height: 143px; position: absolute;  left: -245px; top: 616px;"/>
</body>
</html>

Sorki za te częste posty.

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.