Pozycjonowanie

pytanie zadane 14 czerwca 2016 w HTML i CSS przez xmet Nowicjusz (120 p.)
zmienione kategorie 14 czerwca 2016 przez Arkadiusz Waluk

Cześć.

Niedawno zacząłem uczyć się kodowania, gdy próbuje pisać stronę sam nie do końca elementy są pozycjonowane tak jakbym tego chciał.

Chciałbym, aby strona wyglądała tak:

http://iv.pl/images/43043594057960050662.png

Logo, wraz z treścią fajnie udało mi się ustawić, jednak dalej już jest problem.

HTML:

<div class="rectangle">

       <div id="logo">
       <img src="logo.png">
       </div>
       <div id="logo2">Kontakt=</div>
       <div class="link">
       <a href="#onas">O nas</a>
       <a href="#oferta">Oferta</a>
       <a href="#galeria">Galeria</a>
       <a href="#kontakt">Kontakt</a>
       </div>
       <div style="clear: both;">
      </div>

CSS:

.rectangle
{
    width: 960px;
    margin: 20px;
    margin-left: 82px;
}

#logo
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;    
    text-align: left;
}

#logo2
{
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;    
    text-align: left;
    margin: 15px;
    margin-left: 50px;
}

.link
{

Tu już nic nie działa, chciałbym ustawić menu tak jak w linku, aby było też trochę odstępu między elementami(padding(?)). użyć text-decoration: none; color: #000000;

}

Mógłbym prosić, aby ktoś mi wytłumaczył jak zarządzać tym pozycjonowaniem, oraz czemu nie chciało mi dalej to działać?

Pozdrawiam i dziękuję.

2 odpowiedzi

odpowiedź 14 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

Jak tworzysz menu to użyj listy ul/ol.

Możesz do ułożenia tego zastosować flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

komentarz 14 czerwca 2016 przez xmet Nowicjusz (120 p.)

Dziękuję, użyłem listy i logo już skończone. :)

Teraz dalsza część strony przede mną,

Pozdrawiam!

odpowiedź 14 czerwca 2016 przez radek024 Szeryf (77,160 p.)

Pozycjonowanie a kodowanie strony to dwie różne kategorie webowe. Proszę o zmiany nazwy tematu :v

Natomiast co do problemu - stylizujesz diva, a nie każdy z linków - dodaj taką klasę do owych linków, wtedy powinien być widoczny jakiś efekt.

komentarz 14 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

Zamiast przypisywać tą klase do wszystkich linków to można:

.link a{
    text-decoration:none;
    color:#000;
}

Aczkolwiek najpierw powinien zbudować menu w oparciu o listę.

1	komentarz 14 czerwca 2016 przez radek024 Szeryf (77,160 p.) Zgadzam się ;) aczkolwiek powinno się stylizować po klasach - należy wziąć pod uwagę, że strona musi być skalowalna i stylizowanie po tagach może nie być temu przychylne.