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
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
- Na jakiej przegladarce?
- 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).
- 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