Forum PHP.pl > [CSS]Div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Div

Warmix

13.01.2013, 21:35:07

Jak wyśrodkowac poniższy kod? A drugą sprawą jest to, że gdy próbuję dodać kolejnego diva, to dodaje się w tej samej linii, jak to naprawić?

[HTML] pobierz, plaintext 
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
 
ul {
float: left;
background-color: #fff;
padding: 1px 0 1px 1px;
border: 1px solid #000;
}
 
ul li {
float: left;
}
 
ul a:link, ul a:visited {
text-decoration: none;
display: block;
font-weight: bold;
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
padding: 10px 20px;
border-right: 1px solid #fff;
border-right: 1px solid #fff;
}
 
ul a:hover {
background-color: #800;
background-image: url("tlo2.gif");
}
[HTML] pobierz, plaintext

aras785

13.01.2013, 21:37:14

Jeśli chcesz kod wyśrodkować to musisz otworzyć go w edytorze tekstowym, a następnie klikasz: WYŚRODKUJ

Wyśrodkowanie: np. margin:0 auto;

Warmix

13.01.2013, 21:41:21

Próbowałem - nie działa...

aras785

13.01.2013, 21:42:51

daj kod html i caly css

Warmix

13.01.2013, 21:49:13

[HTML] pobierz, plaintext 
<body>
 
<div id="logo"><img src="b.png"></div>
 
<ul id="ul">
  <li><a href="index.html">Strona Główna</a>
  </li>
  <li><a href="#">#</a>
  </li>
  <li><a href="#">#</a>
  </li>
  <li><a href="#">#</a>
  </li>
  <li><a href="#">#</a>
  </li>
  <li><a href="#">#</a>
  </li>
</ul>
 
<div id="aa">fsf</div>
 
 
</body>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
body {
	background-image: url(a.png);
	color: white;
 
}
 
#logo {
	 text-align: center;
}
 
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
 
ul {
float: left;
background-color: #fff;
padding: 1px 0 1px 1px;
border: 1px solid #000;
}
 
ul li {
float: left;
}
 
ul a:link, ul a:visited {
text-decoration: none;
display: block;
font-weight: bold;
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
padding: 10px 20px;
border-right: 1px solid #fff;
border-right: 1px solid #fff;
}
 
ul a:hover {
background-color: #800;
background-image: url("tlo2.gif");
}
 
[HTML] pobierz, plaintext

CuteOne

13.01.2013, 22:38:31

</ul>
<div style="clear:both"></div>
<div id="drugi_div"></div>

Przestarzałe podejście ale na początek powinno wystarczyć

Warmix

13.01.2013, 22:50:17

Ok, przeszło mi do nowej linii... więc to działa ok, ale teraz co z tym wyśrodkowaniem?

b4rt3kk

13.01.2013, 23:12:21

Cytat(Warmix @ 13.01.2013, 22:50:17 )

Ok, przeszło mi do nowej linii... więc to działa ok, ale teraz co z tym wyśrodkowaniem?

Dodaj do css:

[HTML] pobierz, plaintext 
div, ul {
  display: inline;
  margin: auto;
}
[HTML] pobierz, plaintext

Warmix

13.01.2013, 23:27:24

Nie działa, przenosi mi wyżej, nad logo, albo może obok loga...

b4rt3kk

13.01.2013, 23:58:54

Cytat(Warmix @ 13.01.2013, 23:27:24 )

Nie działa, przenosi mi wyżej, nad logo, albo może obok loga...

Bo musisz dodać <br/> po div-ach, jak i po liście.

krzysiu99995

14.01.2013, 00:07:21

http://webmade.org/porady/css_html/wysrodkowanie.php

Warmix

14.01.2013, 16:59:08

Cytat(b4rt3kk @ 13.01.2013, 23:58:54 )

Bo musisz dodać <br/> po div-ach, jak i po liście.

Jak dodam br, to wszystko jest po lewej stronie...

Cytat(krzysiu99995 @ 14.01.2013, 00:07:21 )

http://webmade.org/porady/css_html/wysrodkowanie.php

Próbowałem na wiele sposobów to dodać i nic... Wprawdzie środkuje mi logo, kolejne divy oprócz menu poziomego...

@edit
Trochę pokombinowałem i udało się...

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.