x-kom hosting

Wyśrodkowanie odnośników w menu

Gość

Gość

utworzono
utworzono

Witam, jestem tu nowy. Od niedawna zacząłęm się zajmować webmasterką i obrałem sobie za cel stworzenie swojej prostej i pierwszej strony napisanej w HTML jak i CSS. No i wczoraj napotkałem się z pewnym błędem, otóż jak zrobić aby te odnośniki były ułożone poziomo w menu a nie tak jak teraz? Oraz jak zrobić aby obrazek obejmował cały obszar tego okienka a nie jego połowę?

Oto adres strony: www.strdomowa.cba.pl

Zgóry dzięki.

benkowik

benkowik

komentarz
komentarz

Witaj,

Musisz przerobić swój kod, dodaj taki CSS:
[code]
#menu { text-align: center; }

#menu ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
display: inline;
white-space: nowrap;
}[/code]

A kod HTML zamień z:
[code]<center><a href="index.html"><div class="index">Strona główna</div></a> | <a href="o_nas.html"><div class="o_nas">O nas</div></a> | <a href="oferry.html"><div class="offery>Oferta</div></a> | <a href="gallery.html"><div class="gallery">Galeria</div></a> | <a href="contact.html"><div class="contact">Kontakt</div></a></center>
[/code]

Na:
[code]
<div id="menu">
<ul>
<li><a href="index.html">Strona główna</a> </li>
<li><a href="o_nas.html">O nas<</a></li>
<li><a href="oferry.html">Oferta</a></li>
<li><a href="gallery.html">Galeria</a></li>
<li><a href="contact.html">Kontakk</a></li>
</ul>
</div>
[/code]

Gość

Gość

komentarz
komentarz

A mógłbyś mi to do kodu wrzucić? Dokładnie nie wiem w której części kodu to wrzucić, i czy w odnośnikach czy nie itp.

benkowik

benkowik

komentarz
komentarz

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body background="http://www.tapetenshop.de/files/explorer/original/567130.jpg"><!--]>--><script type="text/javascript" src="http://a.cba.pl/r1.js"></script><script type="text/javascript"></script><div style="text-align:center;font-size:11px" class="cbalink"><a href="http://www.cba.pl/" title="darmowy hosting">Darmowy Hosting</a> CBA.PL<br/><br/></div>
<!--]>--><script type="text/javascript" src="http://a.cba.pl/r2.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2289508-3";
urchinTracker();
</script>
</body>
<head>

<title>Kwiaciarnia "Róża"</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
div{margin: 0 auto;width: 800px;}
#header{height: 202px;
border: 1px solid black;
background: transparent url(http://img532.imageshack.us/img532/9883/headerym.png) no-repeat;
}
#content{border: 1px solid black;}


#menu { text-align: center; height: 30px; border: 1px solid black; }

#menu a{color: white;}

#menu ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
display: inline;
white-space: nowrap;
}

#title{width: 780px; height: 30px; font-weight:bold; border: 1px solid black;}
#footer{height: 20px; text-align: right; border: 1px solid black;}
</style>
</head>
<body><!--]>--><script type="text/javascript" src="http://a.cba.pl/r1.js"></script>
<div id="container">
<div id="header">

</div>

<div id="menu">
<ul>
<li><a href="index.html">Strona główna</a> </li>
<li><a href="o_nas.html">O nas<</a></li>
<li><a href="oferry.html">Oferta</a></li>
<li><a href="gallery.html">Galeria</a></li>
<li><a href="contact.html">Kontakk</a></li>
</ul>
</div>

<div id="content">



<div id="title">


<center>Witamy na naszej stronie internetowej!</center>
</div>

<br />
<center> Witamy na naszej stronie internetowej, gdzie państo
będziecie mogli skorzystać z naszej oferty, obejrzeć
naszą galerię jak i skontaktować się z nami!
Zapraszamy do skorzystania z naszej oferty!</center> <br />

</div>

<div id="footer">
<center>&copy; 2010 by FraseR | Design: FraseR<center>



</div>
</div>
</body>
</html>[/code]

Gość

Gość

komentarz
komentarz

Dzięki, a teraz jak wrzucić w to pole obrazek? Tam gdzie są odnośniki, oraz jak przedłużyć to pole co w nim jest napisane: Witamy na naszej stronie internetowej! Tak aby nie powiekszało sie to okienko?

benkowik

benkowik

komentarz
komentarz

Musisz do stylu [b]#menu {[/b]... dodać linijkę:
[code]background-image: url(adres_do_obrazka.jpg); } [/code]

Aby poszerzyć tą ramkę zmień ustawienia tego:
[code] #title{width: 780px ............}[/code]

Gość

Gość

komentarz
komentarz

A dokładnie w której części kodu, tego stylu #menu ?

benkowik

benkowik

komentarz
komentarz

[code]#menu { text-align: center;
height: 30px;
border: 1px solid black;
background-image: url(adres_do_obrazka.jpg);}
[/code]

Gość

Gość

komentarz
komentarz (edytowane)

Niestety, nie działa.

www.strdomowa.cba.pl

A teraz znowu jest coś nie tak. Wrzuciłem kod na pojawienie się obrazka w menu ale on się nie pojawia! Czy mógłby ktoś mi pomóc?

www.strdomowa.cba.pl

przemek980

przemek980

komentarz
komentarz

Czy na pewno masz dobry odnośnik do obrazka? Nie wrzuciłeś go do jakiegoś osobnego folderu?
A może zamiast .jpg masz .JPEG lub jeszcze inne rozszerzenie?

Proponuję zamiast obrazka wstawić sam kolor
[code]
background: FFFFF;
[/code]

Jeżeli on zadziała to znaczy, że masz zły odnośnik do obrazka. Jeśli nie zadziała, to jest coś z kodem.

Gość

Gość

komentarz
komentarz

Nawet i kolor nie działa. Nie wiem co jest nie tak, a nie chciałbym od nowa tworzyć strony.

No ok, teraz zadziałało. Musiałem poprawić nieco kod. Teraz znowu problem. Jak umieścić obrazek tam gdzie jest Witamy na naszej stronie internetowej, i ten tekst w środku oraz prawa autorskie? Próbowałem tak jak zrobiłem to z headerem ale nie działa.

przemek980

przemek980

komentarz
komentarz

Może masz ten sam błąd co w poprzednim. A co było nie tak z tamtym obrazkiem?

Gość

Gość

komentarz
komentarz (edytowane)

Po prostu wkleiłem od nowa kod strony i już działało.

przemek980

przemek980

komentarz
komentarz (edytowane)

Skoro zacząłeś robić w CSS, to rób w nim wszystko co się da.
Dlatego usuń [i]<center>[/i], a zamiast tego wstaw w CSS
[code]text-align: center;[/code]
Również ułatwisz sobie sprawę, gdy zrobisz oddzielnie plik .html i .css.
Wszystko będzie wtedy przejrzyste.

Gość

Gość

komentarz
komentarz

Wywaliłem to <center> i nadal to nie działa :/.

przemek980

przemek980

komentarz
komentarz

A zrobiłeś osobno pliki? Polecam to zrobić, bo bardzo ułatwi pracę.

Gość

Gość

komentarz
komentarz

Jak osobno? I co to da?

przemek980

przemek980

komentarz
komentarz (edytowane)

Ułatwi Ci pracę ze stronami. Tak się już przyjęło. Co za problem wyciąć style z pliku .html, wkleić do jakiegoś edytora CSS (polecam TopStyle) i zapisać?

Jakoś nie widzę, że dodałeś obrazek do treści, czy gdzie tam chciałeś.
Pokaż jeszcze raz plik ze stroną, jeśli możesz.

PS.
Jeśli już masz stronę na CBA to polecam do CSS'a wkleić taki kod:
[code].cbalink {
display:none;
} [/code]

Gość

Gość

komentarz
komentarz

Chodzi ci o kod strony? Na stronie daj PPM i tam powinieneś znaleźć kod po wybraniu odpowiedniej opccji, a po za tym pokazałbyś to na przykładzie? Jak te style wyciąć.

Ja chce jak najnormalniej wrzucić te trzy obrazki zeby dzialaly anie bawic sie w jakies durne style. O.

To ma być PROSTA strona!

przemek980

przemek980

komentarz
komentarz (edytowane)

plik style.css
[code]
div{
margin: 0 auto;
width: 800px;
}

#header{
height: 202px;
border: 1px solid black;
background: transparent url(http://img532.imageshack.us/img532/9883/headerym.png) no-repeat;
}

#content{
border: 1px solid black;
}

#menu{
text-align: center;
height: 30px;
border: 1px solid black;
background-image: url(http://img256.imageshack.us/img256/9281/menuxq.png);
}

#menu a{
color: white;
}

#menu ul, ul li{
display: block;
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li{
display: inline;
white-space: nowrap;
}

#title{
width: 799px;
height: 29px;
font-weight:bold;
border: 1px solid black;
}

#footer{
height: 20px;
text-align: right;
border: 1px solid black;
}
[/code]

Plik index.html
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body background="http://www.tapetenshop.de/files/explorer/original/567130.jpg"><!--]>--><script type="text/javascript" src="http://a.cba.pl/r1.js"></script><!--]>--><script type="text/javascript" src="http://a.cba.pl/r1.js"></script><script type="text/javascript"></script><div style="text-align:center;font-size:11px" class="cbalink"><a href="http://www.cba.pl/" title="darmowy hosting">Darmowy Hosting</a> CBA.PL<br/><br/></div>
<!--]>--><script type="text/javascript" src="http://a.cba.pl/r2.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2289508-3";
urchinTracker();
</script>
<script type="text/javascript"></script><div style="text-align:center;font-size:11px" class="cbalink"><a href="http://www.cba.pl/" title="darmowy hosting">Darmowy Hosting</a> CBA.PL<br/><br/></div>

<!--]>--><script type="text/javascript" src="http://a.cba.pl/r2.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2289508-3";
urchinTracker();
</script>
</body>
<head>

<title>Kwiaciarnia "Róża"</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body><!--]>--><script type="text/javascript" src="http://a.cba.pl/r1.js"></script><!--]>--><script type="text/javascript" src="http://a.cba.pl/r1.js"></script>
<div id="container">
<div id="header">

</div>

<div id="menu">
<ul>
<li><a href="index.html">Strona główna</a> </li>

<li><a href="o_nas.html">O nas</a></li>
<li><a href="oferry.html">Oferta</a></li>
<li><a href="gallery.html">Galeria</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>

<div id="content">



<div id="title">


<center>Witamy na naszej stronie internetowej!</center>
</div>

<br />
<center> Witamy na naszej stronie internetowej, gdzie państo
będziecie mogli skorzystać z naszej oferty, obejrzeć
naszą galerię jak i skontaktować się z nami!
Zapraszamy do skorzystania z naszej oferty!</center> <br />

</div>

<div id="footer">
<center>&copy; 2010 by FraseR | Design: FraseR<center>



</div>
</div>
</body>
</html>
[/code]

Teraz masz 2 osobne pliki.
Chyba znalazłem Twój błąd. Wklej plik CSS, który Ci podałem i zobacz, czy zadziała.

Gość

Gość

komentarz
komentarz

Ok, już sobie poradziłem. Wystarczyło tylko zajrzeć do kursu HTML. A teraz wyobraźcie sobie sześć obrazków, wklepałem je do galerii na stronie, są ale one ułóżone są pionowo, jak zrobić żeby trzy obrazki były ułożone poziomo, a pod trzymi obrazkami kolejne trzy ułożone poziomo, oraz jak zrobić aby te obrazki miały czarne ramki? Mógłby mi ktoś podać na to wszystko kody i gdzie je wklepać?

przemek980

przemek980

komentarz
komentarz

Najlepiej na tabeli.
[code]
<table>
<tr>
<td>
<img src="obrazek1.jpg border="1" alt="img" /><br />
Opis obrazka
</td>

<td>
<img src="obrazek2.jpg border="1" alt="img" /><br />
Opis obrazka
</td>

<td>
<img src="obrazek3.jpg border="1" alt="img" /><br />
Opis obrazka
</td>

</tr>
</table>
[/code]

Bardzo ważny jest [i]border[/i]. To on nadaje obramowanie obrazka. Poza tym ramkę możesz zrobić w Photoshopie.

rokko

rokko

komentarz
komentarz

Tabelka to najprostsze rozwiązanie. Ja bym to jednak zrobił w divie, ustalając min-width, do każdego linku należałoby też dodać odpowiednią wartość margin. Każdy to będzie wdział inaczej (i zrobi to inaczej) ale faktycznie tabelka to najprostsze rozwiązanie.

Gość

Gość

komentarz
komentarz

Ok, a jak jeszcze zrobić aby możnabyło kliknąć na ten obrazek a on przeniesie nas na nową strone z tym obrazkiem?

rokko

rokko

komentarz
komentarz

[code]<a href="adres_obrazka" target="_blank"><img src="adres_miniatury" alt="text_alternatywny" /></a>[/code]

Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!

Możesz zadać pytanie bez konieczności rejestracji - wystarczy, że wypełnisz formularz.

Zadaj pytanie bez logowania
Przejdź do listy tematów
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Strona wykorzystuje pliki cookies w celu prawidłowego świadczenia usług i wygody użytkowników. Warunki przechowywania i dostępu do plików cookies możesz zmienić w ustawieniach przeglądarki.

  Akceptuję