Skocz do zawartości

jak zrobić 3 rzędy lub więcej w kolumnie w css?


Orient

Rekomendowane odpowiedzi

witam

Na stronie https://www.domweselny.biz.pl/zdjecia.html umieściłem zdjęcia w hoverboxie i nie mogę zmienić żeby były 3 rzędy kolumn, jedynie tworzy się tak kiedy zmniejsze

hoverbox img {

background: #fff;

border-color: #aaa #ccc #ddd #bbb;

border-style: solid;

border-width: 1px;

color: inherit;

padding: 2px;

vertical-align: top;

width: 75px;

height: 56px;

} na width 50px to tworza się po 3 kolumny:(.

body { margin:0; padding:0; background-color: #ccc; background-image: none;}
p,td { font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-top: 0px;
}
a{
color: #9A3754;
text-decoration: underline;
}
a:hover{
color: #9A3754;
text-decoration: none;
}

.bgy {
background-repeat: repeat-y;
}
.bottom_addr { font-size: 10px; color: #ffffff; padding: 8px 10px 8px 15px; }
.bottom_addr_lnk {
text-decoration: none;
}
.bottom_addr_lnk:hover { text-decoration: underline; }

.bgx {
background-repeat: repeat-x;
}

.norepeat {
background-repeat: no-repeat;
}
.welcome { font-weight: bold; text-transform: uppercase; color: #000000; padding-left: 10px; vertical-align: top; padding-top: 12px; font-size: 14px; word-spacing: 1px; letter-spacing: 1px; }
.c_name { font-size: 14px; color: #000000; font-weight: bold; background-repeat: no-repeat; background-image: url(../images/h3.jpg); text-transform: uppercase; word-spacing: 3px; letter-spacing: 3px; vertical-align: middle; }

.bottom_menu { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-align: center; padding-top: 4px; padding-bottom: 4px; }
.bottom_lnk{ color: #000000; TEXT-DECORATION: none; }
.bottom_lnk:hover { color: #000000; }
.r_h {
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
.menu {
color: #FFFFFF;
background-image: url(../images/btn_bg.gif);
background-repeat: repeat-x;
font-weight: bold;
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
.r {
background-image: url(../images/r-bg.gif);
background-repeat: repeat-y;
background-position: right;
}
.menu_lnk{
text-decoration: none;
color: #FFFFFF;
}
.body_txt_2 {
color: #000000;
vertical-align: top;
text-align: justify;
padding-top: 7px;
}

.menu_lnk:hover { color: maroon; font-weight: bold; background-color: transparent; }

.sub {
font-size: 11px;
color: #39366f;
text-transform: none;
vertical-align: middle;
font-weight: bold;
}
.body_txt_1 {
padding-left: 10px;
text-align: justify;
}

.sub_lnk{
color: #39366f;
text-decoration: none;
}
.sub_lnk:hover {
color: #39366f;
text-decoration: underline;
}

.body_txt {
color: #000000;
text-align: justify;
padding-left: 8px;
padding-bottom: 8px;
padding-top: 6px;
vertical-align: top;
}
.phim {
margin-right:11px;
margin-top:2px;
}
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 75px;
height: 56px;
}
.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative; left: +20px;
}
.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

Bardzo proszę o pomoc

Odnośnik do komentarza
Udostępnij na innych stronach

udało się zmieniłem warości w li padding i margin na 3, mam jeszcze problem żeby zmniejszyć wysokość strony, żeby kończyła się za zdjęciami, zmiejszałem 3 wartości height w table

		  <table width=332 border=0 cellspacing=0 cellpadding=0 cool=cool gridx=10 gridy=5 height=676 showgridx=showgridx showgridy=showgridy usegridx=usegridx usegridy=usegridy>
		   <tr height="675">
		    <td width="376" height="675

Odnośnik do komentarza
Udostępnij na innych stronach

udało się zmieniłem warości w li padding i margin na 3, mam jeszcze problem żeby zmniejszyć wysokość strony, żeby kończyła się za zdjęciami, zmiejszałem 3 wartości height w table

		 <table width=332 border=0 cellspacing=0 cellpadding=0 cool=cool gridx=10 gridy=5 height=676 showgridx=showgridx showgridy=showgridy usegridx=usegridx usegridy=usegridy>
		 <tr height="675">
		 <td width="376" height="675

Sproboj ustawic wysokośc na automaczną, height:auto;

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności