Wątek przeniesiony 2015-03-27 10:32 z Webmastering przez dzek69.

Tworzenie nawigacji strony

0

Witam. Z HTML/CSS mam niewiele wspólnego, programuje w innych językach ale potrzebuje zrobić stronę dlatego muszę się tych rzeczy nauczyć. Możecie mi powiedzieć co źle robię? Tutaj podaje kod strony wraz ze stylami http://4programmers.net/Pastebin/3948. Chcę na górnym pasku (nawigacji) zrobić po prostu jakieś bloczki z nazwą np. Menu,Opcje,Skrzynka,Wyloguj, które są oddzielone od siebie. Do tej pory nie mogę dojśc do tego jak to zrobić, próbowałem wchodzić na strony, gdzie coś takiego jest, zaglądać w kod i kopiować nawet na żywca ale na nic. Chociażby zrobić coś takiego jak jest tutaj na forum, górny nawigator "Kompedium wiedzy, forum..." Z góry dziękuje

0

Przede wszystkim to wydaje mi sie, ze za bardzo naduzywasz pozycjownowania fixed - ten typ pozycjonowania faktycznie moze sie czasem przydac, jednak odnosze wrazenie ze po prostu zaczales podchodzic do programowania stron tak jak do programowania aplikacji desktopowych. W aplikacjach dekstopowych ustawianie jakis elementow GUI na konkretnych pozycjach byla czesciej stosowana praktyka, dodam ze nie zawsze sluszna. Na stronach www lepiej jest chyba nakreslic pewien szkic i zostawic okreslenie pozycji poszczegolnych elementow przegladarce (czyli pozycjonowanie domyslne).

Menu o ktorym wspomniales mozesz stworzyc dodajac do css np. taki kod:

.topMenu .nav li
{  
  float: left;
  margin: 0 20px 20px 0;
  background-color: #efefef;
  list-style-type: none;
  padding: 20px;
}

Zmienilbym takze linijke

<ul style="nav">

na

<ul class="nav">

lub w ogole dal sobie spokoj z klasami i w CSSie napisal

.topMenu ul li
{  
  float: left;
  margin: 0 20px 20px 0;
  background-color: #efefef;
  list-style-type: none;
  padding: 20px;
}

Dodam, ze w HTML5 sa chyba jakies dodatkowe tagi do nawigacji ktore moga Ci sie przydac.

0

Fajnie wyszło, fajnie :), dzięki bardzo.

http://4programmers.net/Pastebin/3949

Mam jeszcze pytanko jak ten nawigator mogę przyciągnąć na maxa do lewej i do prawej łącząc to w prostokąt o jednym kolorze? Na razie udało mi się połączyć te prostokąciki w jeden ale za nic nie mogę tego pod którąś stronę podciągnąć. Z góry dziękuje

0

Nie wiem czy dobrze zrozumialem, ale sprobuj cos takiego:


.topMenu
{
  background: #efefef;
  overflow: hidden;
}

.topMenu .nav
{  
  padding: 0;  
}

.topMenu .nav li:first-child
{
  margin-left: 0;
}

Menu znajdzie sie po lewej stronie i bedzie polaczone w prostokat o tej samej barwie. Jak chcesz miec po prawej to probuj ustawic float: right; w .topMenu .nav (moze sie okazac, ze trzeba bedzie podac szerokosc elementu .topMenu .nav).

0

Nie działa do końca bo co prawda fajnie wszystko zajmuje cały nawigator ale tytuły w tym nawigatorze zlewają się jeden pod drugim, nawet gdy daje float: left; to nic z tego, tylko pierwszy element jest ustawiony do lewej a reszta jeden pod drugim.

0
  1. Na jakiej przegladarce?
  2. Moze cos zle wkleiles? Twoj kod po mojej przerobce wyglada tak:
<!DOCTYPE html>
<html lang="pl">
  <head>
    <title>Bez nazwy</title>
    <meta charset="UTF-8">
    <meta name="Generator" content="JTHTML 8.4.2">
    <meta name="Robots" content="index">
    <link rel="Stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
      <div class="topMenu">
          <ul class="nav">
              <li>
                  <a href="index.html" style="first">FIRST</a>
              </li>
              <li>
                  <a href="index.html" style="second">SEKadfs</a>
              </li>
                          <li>
                  <a href="index.html" style="second">sadf</a>
              </li>
                          <li>
                  <a href="index.html" style="second">Sfgh</a>
              </li>
                          <li>
                  <a href="index.html" style="second">SEKgdfgfdgfd</a>
              </li>
          </ul>
      </div>
      <div class="leftMenu">Nawigacja lewa</div>
      <div class="rightMenu">Nawigacja prawa</div>
      <div class="content">
        blafasifasifhaifhiawfhiafhi
      </div>
      <div class="stopka">Stopka serwisu</div>
</div>
  </body>
</html>
html, body {
    background-color: #fff;
    color: #000;
    margin: 0;
    padding: 0;
    text-align: center;
}

.topMenu 
{
  background: #efefef;
  overflow: hidden;
}

.topMenu .nav
{  
  padding: 0;  
}

.topMenu .nav li:first-child
{
  margin-left: 0;
}

.topMenu .nav li
{  
  float: left;
  width: 14%;
  margin: -16px -10px 0px 10px; /* polaczenie tych klockow w nawigatorze, dlatego takie px */
  background-color: #efefef;
  list-style-type: none;
  padding: 20px;
}

.leftMenu {
    position: fixed;
    height: 100%;
    left: 0px;
    top: 59px;
    background-color: #efefef;
}
.rightMenu {
    position:fixed;
    height: 100%;
    right: 0;
    top: 59px;
    background-color: #efefef;
}
.stopka {
    position: fixed;
    bottom: 0;
    height: 40px;
    width: 100%;
    background-color: blue;
}
.content {
    padding: 60px;
}

.first {
    width: 50px;
    left: 0;
}

.second {
    width: 50px;
    left: 50px;
}

Sprawdz czy u Ciebie masz tak samo. U mnie wyswietlane sa elementy jeden obok drugiego (firefox).

  1. Nie myslales o uzyciu jakiegos Bootstrapa?
0

Widocznie ominąłem style first i second i przez to wszystko się zlewało, teraz dziala jak najlepiej, dzieki bardzo :)

Nie wiem co to jest boosttrap :D

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0