• › Witaj Gościu
  • Jesteś niezalogowany (
  • Zaloguj 
  •  lub  

Logo


Strefa czasowa: UTC + 1




Utwórz nowy wątek Odpowiedz w wątku  [ Posty: 4 ] 
Autor Wiadomość
 Tytuł: [Problem-CSS]Umieszczenie SidebarMenu
PostNapisane: Wt lip 27, 2010 6:55 pm 
Offline

Dołączył(a): Wt lip 27, 2010 6:38 pm
Posty: 2
Witam.
Mam problem z umieszczeniem bocznego menu na mojej stronie. Jako takie obeznanie w HTML i CSS mam jednak pierwszy raz projektuje od 0 stronkę i nie umiem poradzić sobie z niektórymi rzeczami.
Stronka ma standardowe rozmieszczenie:
-Top>Menu poziome>Pole Tekstowe(w zamyśle)>Stopkę
Do podejrzenia http://przemekf.webd.pl/.
Moim Celem jest dodanie Menu bocznego po lewej stronie czyli standardowo jak na większości serwisów. Próbowałem, czytałem poradniki, podglądałem szablony ale nie mogę znaleźć rozwiązania. Oczywiście menu Powinno się znajdować na jakimś domyślnym tle.
Dorzucam mój style.css i index.html z nadzieją na pomoc w rozwiązaniu problemu.

Style.css
Kod:
body{
margin: 0px;
padding: 0px;
text-align: center;
background-image: url('images/t1.png')
}

div#kontener{
width: 930px;

margin: 0px auto;
text-align: justify;
}

div#header{
background: transparent url('images/top.png') no-repeat;
height: 165px;
}

div#header h1{
margin: 0px;
visibility: hidden;
}

div#menu ul{
margin: 0px auto;
padding: 0px;
list-style-type: none;
height: 37px;
background: transparent url('images/menu.png') no-repeat;text-align: center;
font-size: 8pt;
font-family: Verdana;
}

div#menu ul li{
display: inline;
}

div#menu ul li a{
font-weight: bold;
text-decoration: none;
color: #A4BFE0;
padding: 0px 5px;
height: 35px;
line-height: 2.6em;
color: #fff;
padding: 9.5px 15px;
border-right: 0px solid #fff;
border-right: 0px solid #fff;

}

div#menu ul li a:hover{
background-color: #800;
background-image: url("images/tlo2.png");
}

div#news{
background: transparent url('images/tlo-news.png') repeat-y;
margin-left: 15px;
}

div#news h1{
margin-top: 0px;
padding-top: 15px;
}

div#news *{
padding-left: 30px;
padding-right: 30px;
}

div#footer{
height: 55px;
margin-left: 15px;
background: transparent url('images/footer.png') no-repeat;
position: relative;
}

div#footer p{
margin-top: 0px;
position: absolute;
width: 100%;
left: 0px;
bottom: -4px;
text-align: center;
font-size: 8pt;
margin-bottom: 15px;
}


index.php
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">
<head>
<link rel="Stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
<meta http-equiv="Content-Language" content="pl" />
<title>Tytuł strony</title>
</head>
<body xml:lang="pl">

<!-- Contener -->
<div id="kontener">

<!-- Header -->
<div id="header">
<h1>---------</h1>
</div>
<!-- Koniec Header -->

<!-- Menu -->
<div id="menu">
<ul>


  <li><a href="index.php?view=index" title="Strona gł&oacute;wna">Strona gł&oacute;wna</a></li>

  <li><a href="forum.cs-crouser.pl" title="Forum Graczy">Forum Graczy</a></li>

  <li><a href="index.php?view=serwery" title="Serwery">Serwery</a></li>

  <li><a href="index.php?view=oferta" title="Oferta">Oferta</a></li>

  <li><a href="index.php?view=news" title="Aktualności">Aktualności</a></li>

  <li><a href="index.php?view=download" title="Download">Download</a></li>

  <li><a href="index.php?view=statystyki" title="Statystyki Graczy">Statystyki Graczy</a></li>


</ul>
</div>
<!-- Koniec Menu -->

<!-- News -->
<div id="news">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- Koniec News -->

<!-- Sidebar -->
<div id="sidebar">

</div>
<!-- Koniec Sidebar -->

<!-- Footer -->
<div id="footer">
<p>Copyright by Cs-Crouser.pl 2010. Kopiowanie bez zgody autora surowo zabronione!</p>
</div>
<!-- Koniec footer -->

</div>
</body>
</html>


Góra
 Zobacz profil Wyślij e-mail  
 
 Tytuł: Re: [Problem-CSS]Umieszczenie SidebarMenu
PostNapisane: Śr lip 28, 2010 7:56 am 
Offline

Dołączył(a): Wt lip 27, 2010 5:53 pm
Posty: 17
Lokalizacja: Radom
Kod:
body{
margin: 0px;
padding: 0px;
text-align: center;
background-image: url('images/t1.png')
}

div#kontener{
width: 930px;
margin: 0px auto;
text-align: justify;
}

div#header{
background: transparent url('images/top.png') no-repeat;
height: 165px;
}

div#header h1{
margin: 0px;
visibility: hidden;
}

div#menu ul{
margin: 0px auto;
padding: 0px;
list-style-type: none;
height: 37px;
background: transparent url('images/menu.png') no-repeat;text-align: center;
font-size: 8pt;
font-family: Verdana;
}

div#menu ul li{
display: inline;
border:1px solid #123456;
}

div#menu ul li a{
font-weight: bold;
text-decoration: none;
color: #A4BFE0;
padding: 0px 5px;
height: 35px;
line-height: 2.6em;
color: #fff;
padding: 9.5px 15px;
border-right: 0px solid #fff;
border-right: 0px solid #fff;
}

div#menu ul li a:hover{
background-color: #800;
background-image: url("images/tlo2.png");
border:1px solid #123456;
}

div#news{
background: transparent url('images/tlo-news.png') repeat-y;
margin-left: 15px;
width:650px;
float:left;
}

div#news h1{
margin-top: 0px;
padding-top: 15px;
}

div#news *{
padding-left: 30px;
padding-right: 30px;
border:1px solid #123456;
}

div#footer{
height: 55px;
background: transparent url('images/footer.png') no-repeat;
float:left;
width:930px;
}

div#footer p{
width: 100%;
left: 0px;
bottom: -4px;
text-align: center;
font-size: 8pt;
margin-bottom: 15px;
}
#sidebar{
height:100px;
width:200px;
background:#ff0000;
float:left;
}

Czyli jak widzisz:
usunąłem wszelkiego rodzaju atrybuty position, a dodałem float:left. Nie zmieniaj stopki na center, bo wywali ci ją do góry. Ponadto dodałem wartości width i height - dziwi mnie, że to omijasz w niektórych znacznikach. Natomiast w pliku index.html zamień kolejnością znaczniki <div id="news">...</div> z <div id="sidebar">...</div>, żeby sidebar był pierszy i wyreguluj sobie szerokości (width) w sidebar i news oraz #stop p.
Mam nadzieję, że pomogłem ;D

_________________
http://www.advertz.pl


Góra
 Zobacz profil Wyślij e-mail  
 
 Tytuł: Re: [Problem-CSS]Umieszczenie SidebarMenu
PostNapisane: Śr lip 28, 2010 10:41 am 
Offline

Dołączył(a): Wt lip 27, 2010 6:38 pm
Posty: 2
Tak pomogłeś dzięki wielkie :) Jeśli będę miał jakieś problemy będę pisał w tym temacie.

Aha jeszcze takie małe pytanko czy jeśli używam sobie np.
Kod:
margin-left: 20px
do ustawiania elementów nie wpłynie to negatywnie na ułożenie w/w elementów?


Góra
 Zobacz profil Wyślij e-mail  
 
 Tytuł: Re: [Problem-CSS]Umieszczenie SidebarMenu
PostNapisane: Śr lip 28, 2010 7:25 pm 
Offline

Dołączył(a): Wt lip 27, 2010 5:53 pm
Posty: 17
Lokalizacja: Radom
Teoretycznie nie powinno, jednak bywają wyjątki. Jeżeli chodzi o twój sidebar, to pamiętaj, że sąsiaduje z news i jeżeli dasz margin to on zejdzie na dół, dlatego będziesz musiał zmniejszyć szerokość diva news, by się oba zmieściły obok siebie.

_________________
http://www.advertz.pl


Góra
 Zobacz profil Wyślij e-mail  
 
Wyświetl posty nie starsze niż:  Sortuj wg  
Utwórz nowy wątek Odpowiedz w wątku  [ Posty: 4 ] 

Strefa czasowa: UTC + 1


Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości


Nie możesz rozpoczynać nowych wątków
Nie możesz odpowiadać w wątkach
Nie możesz edytować swoich postów
Nie możesz usuwać swoich postów

Szukaj:
Skocz do:  
cron

Polecamy












Powered by phpBB
Przyjazne użytkownikom polskie wsparcie phpBB3 - phpBB3.PL
Not able to open ./cache/data_global.php