Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Dwa elementy menu obok siebie
#1
Odpowiedz
#2
Z twojego kodu nic nie wynika.
Elementy układa się obok siebie na takie sposoby:
1) oba bloki dostają float:left (wtedy rodzic dostaje overflow:hiddenWink
2) oba dostaję display:inline-block

Oczywiście oba bloki muszą mieć odpowiednią szerokość tak by mieścić się w przestrzeni rodzica. U ciebie albo nie ma floatów albo szerokość ich (+ marginesy) jest za duża.
Odpowiedz
#3
Powiem Ci szczerze że jeszcze do końca tego wszystkiego nie ogarnąłem. Tak jak mówię, ja tą stronę modyfikuję po kimś. Ja generalnie zupełnie inaczej tworzę css-a i dla mnie ten plik który jest, jet delikatnie mówiąc mało zrozumiały i jeszcze go do końca nie rozgryzłem. Tak wygląda cały plik style.css:

Kod:
@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none}

:focus{outline:0}

ins{text-decoration:none}
del{text-decoration:line-through}

table{border-collapse:collapse; border-spacing:0}

body { margin:0; padding:0; width:100%; background:#fff url(images/main_bg.jpg) top center repeat-x ; font: normal 12px Arial, Helvetica, sans-serif; color:#666;}
html { padding:0; margin:0;}
a { text-decoration:none;}
a:hover { text-decoration:underline !important;}
a img {border:none}

h2{color:#fff; font:normal 19px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; font-weight:normal; float:left}
h2:first-letter {  font-size : 120%;}


.toLeft{float:left}
.toRight{float:right}
.clearBoth{clear:both;}
.main { padding:0; margin:0 auto;}

.motylek{position: absolute; left:50%; top:160px; margin-left:440px; display:none;}

.header { width:973px; margin:0 auto; padding:0;}
.top {width:973px; margin:0 auto; padding:0; height:238px; position:relative;}

.logo{position: absolute; right:20px; top:115px;}
.nameDay_box{position: absolute; right:105px; top:210px;}
.day{font-weight: bold; color:#FE952C;}

.time_box {position: absolute; right:5px; top:213px; font-weight:bold; font-size:24px;}

.bip{position: absolute; right:100px; top:0px;}
.fb_logo{position: absolute; left:888px; top:1px;}
.fb-like{position: absolute; left:610px; top:5px;}

.search { padding:0; margin:0 0 0 20px; width:330px; float:left;}
.search form { display:block; float:left; padding:1px 0 0 0; margin: 0 0 0 15px; }
.search span { display:block; float:left; background: none; width:160px; padding:0 5px; height:33px;}
.search form .keywords { width:120px; line-height:15px; height:15px; float:left; background:none; border:0;  padding:8px 0; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#666;}
.search form .button { float:left; margin:0 0 0 82px; padding:0; width:32px; height:26px; margin-top:4px;}

.menuContainer { width:973px; margin:0 auto; padding:0; background:url(images/barBlue.png) top no-repeat; height:55px;}
.menu { padding:10px 0 0 0; margin:0; width:970px; float:left;}
.menu ul { padding:0; margin:0 0 0 10px; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0; border:0;}
.menu ul li a { float:left; margin:0; padding:6px 12px 6px 5px; color:#fff; font:normal 17px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span {background:none; padding:2px;}
.menu ul li a:hover { text-decoration:underline;}
.menu ul li a:hover span { text-decoration:underline;}
.menu ul li a.active { text-decoration:underline;}
.menu ul li a.active span { text-decoration:underline;}

.menu2 { padding:10px 0 0 0; margin:0; width:930px; float:left;}
.menu2 ul { padding:0; margin:0 0 0 26px; list-style:none; border:0; float:left;}
.menu2 ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu2 ul li a { float:left; margin:0; padding:6px 4px 6px 4px; color:#666; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu2 ul li a span {background:none; padding:2px;}
.menu2 ul li a:hover { text-decoration:underline;}
.menu2 ul li a:hover span { text-decoration:underline;}
.menu2 ul li a.active { text-decoration:underline;}
.menu2 ul li a.active span { text-decoration:underline;}

.footR{padding:16px 0 0 0; margin:0; width:100px; float:right;}
.footU{width:30px; float:right; padding:10px 4px 0 0;}

.bar1 { width:973px; margin:0 auto; padding:0; background:url(images/bar1.png) top no-repeat; height:55px; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.bar1_full { width:973px; margin:0 auto; padding:0; background:url(images/bar1_full.png) top no-repeat; height:55px; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.bar2 { width:973px; margin:0 auto; padding:0; background:url(images/bar2.png) top no-repeat; height:55px; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}



.bar2Left{width:500px; float:left; margin-top:14px; margin-left:15px; position:relative;}
.bar2Left h2 {margin-right:90px; margin-top:2px; width:300px;}
.bar2Right{width:220px; position:relative; margin-top:10px; float:right;}
.bar3 h2{float: left; margin-top:17px; margin-left:665px; width:200px;}
.bar3 h2.polecane{margin-left:130px; }
.bar3 h2.galeria{margin-left:130px;}
.bar1 a, .bar1 a:active, .bar1 a:visited{color:#fff;}
.wyswietl{margin-top:5px;}
.newsico1{padding-left:20px; padding-right:2px; margin-left:10px; background:url(images/aktualnosci.png) no-repeat left top;}
.newsico2{padding-left:20px; padding-right:2px; background:url(images/komunikaty.png) no-repeat left top;}
.newsico3{padding-left:20px; padding-right:2px; background:url(images/allstar.png) no-repeat left top;}
.bar1Left{width:620px; float:left; margin-top:14px; margin-left:15px;}
.bar1Left h2 {margin-right:90px; float:left;}
.bar1Left_full{width:945px; float:left; margin-top:14px; margin-left:15px;}
.bar1Left_full h2 {margin-right:90px; float:left;}
.bar1Right{width:290px; float:right; margin-right:20px; margin-top:14px; }
.fulltext{text-align:justify;}

img.introtext{width:1440px; height:86px; border: solid 1px #666; }
h3.introtext{color: #7A7A7A; font-family: Arial,Helvetica,sans-serif; font-weight:normal; font-size:16px; margin-top:10px; text-transform:uppercase;}
span.introtext{ text-transform:none !important; background:none !important; margin-bottom:10px; text-align:justify;}
p.introtextdata {margin-bottom:0px !important; background:none !important; text-transform:none !important;}

a.toAktualnosc{padding-left:20px; padding-right:2px; background:url(images/aktualnosci.png) no-repeat left top;}
a.toKomunikat{padding-left:20px; padding-right:2px; background:url(images/komunikaty.png) no-repeat left top;}
p.przerywnik{background:none !important}
/********** body **********/
.body_resize { margin:0; padding:0px 0 0 0; position:relative;}
.body {width:973px;  margin:0 auto; padding:0px; background:#000;}
.body1coltop{background:url(images/body1coltop.png) top left no-repeat; height:7px; margin-top:5px;}
.body1colmid{background:url(images/body1colmid.png) top left repeat-y}
.body1colbot{background:url(images/body1colbot.png) bottom left no-repeat; height:7px; margin-bottom:5px;}
.body2cal1{background:url(images/body2cal1.png) top right no-repeat; height:7px; margin-top:5px; }
.body2cal2{background:url(images/body2cal2.png) top right repeat-y; }
.body2cal3{background:url(images/body2cal3.png) bottom right no-repeat; height:7px; margin-bottom:5px; }
.body3ak1{background:url(images/body3ak1.png) top left  no-repeat; height:7px; margin-top:5px; }
.body3ak2{background:url(images/body3ak2.png) top left  repeat-y; }
.body3ak3{background:url(images/body3ak3.png) bottom left no-repeat;  height:7px; }



.body h2 {font: normal 20px Arial, Helvetica, sans-serif; color:#151515; margin:0; padding:5px 5px;}
.body h2 span { font: normal 12px Arial, Helvetica, sans-serif; color:#4580b9;}
.body img { float:left; padding:0; margin:10px;}
.body img.floated { float:right; padding:0; margin:0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#7a7a7a; line-height:1.8em; padding:5px 5px; margin:0;}
.body p span { color:#9f9f9f; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em}
.body p.data { font: bold 14px Arial, Helvetica, sans-serif; color:#4580b9; padding:0 5px 10px 5px; margin:0;}
.body a { text-decoration:none; color:#4580b9; line-height:1.8em;}
.body a.nnews { color:#c55300; text-decoration:none;}

.newsLinks li{background:url(images/dots1.png) top left no-repeat;}


.body_total { width:970px; float:left; margin:0; padding:0 0 0 10px;}
.body_full { width:955px; float:left; margin:0; padding:0 0 0 10px;text-align:justify;}

.na3a{float:left; width:305px; }
.na3b{float:left; width:300px; margin-left:23px; }
.na3c{float:left; width:300px; margin-left:23px; }
.galernik{width:300px; height:290px; margin-left:11px; overflow:hidden;}
.rotatorek{width:300px; height:100px; margin-left:3px; overflow:hidden;}
.rotatorek .poprzedni{float:left; margin-top:30px; cursor:pointer;}
.rotatorek .link{float:left; background:black; width:190px; height:90px; margin-top:5px; overflow:hidden;}
.rotatorek .nastepny{float:right; margin-top:30px; cursor:pointer;}

div.newsletterek{width:300px; height:110px; margin-left:3px; overflow:hidden; margin-top:1px;}
div.naNewsletterek{width:300px; height:70px; margin-left:3px; overflow:hidden; margin-top:1px; margin-bottom:8px;}
h2.newsletterek{margin-top:24px; margin-left:5px; color:#fff; font:normal 17px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; font-weight:normal;}
.niezbedniczek{width:300px; height:280px; margin-left:27px; overflow:hidden;}
.urzMain h3{font:normal 17px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; font-weight:normal; color:#333; margin:0; padding:5px 5px; border-bottom: 1px solid #E1E1E1}
.urzMain ul li {margin-top:10px; margin-left:15px;}

.kolko{position:absolute; bottom:260px; left:50%; margin-left:390px;}

.pogodynka{width:200px; height:90px; color: white; float:right; margin: 10px 0 0 0;}
#pogodynkaOpis { margin-top: 10px;}



.niezbedniczek ul li{width:280px; background: url(images/dots2.png) bottom no-repeat; margin:10px 10px 0 10px}
.niezbedniczek ul li a{color:#fff; text-transform:uppercase; font-size:14px;}
.body_small { width:305px; float:right; margin:0 10px 0 0; padding:0; }
.body_big { width:615px; float:left; margin:0; padding:0 10px 0 10px; }


.footer_resize { width:973px; margin:0 auto; padding:0 0 10px 0; background: url(images/footer.png) top repeat-x;   height:54px;}
.footer {padding:0;  margin:0;}
.footer p { font:normal 11px  Arial, Helvetica, sans-serif; color:#fff;}
.footer a { font:normal 12px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;}
.footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;}

.form { float:left; width:560px; margin-top:40px; margin-left:10px;}

#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#124889;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:100px; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#151515; text-transform:capitalize;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:390px; border:1px solid #e2e1e1; margin:5px 0; padding:5px 2px; height:15px; background:#f8f8f8;}
#contactform textarea { width:390px; border:1px solid #e2e1e1; margin:10px 0; padding:2px; background:#f8f8f8; height:250px;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 415px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

p.clr, .clr { clear:both; padding:0; margin:0;}
li.bg, .bg { clear:both; border-bottom:1px solid #e1e1e1; padding:10px 0 0 0; margin:0 0 10px 0; background:none; list-style:none;}
li.line, .line { border-top:1px solid #d9d9d9; padding:0; margin:10px 0; background:none; list-style:none;}

.galleries * {border:0px; padding: 0px; margin: 0px; float: none;}
.galleries li {width: 83px; height: 56px; display: block; float: left; background: url("images/gallery-background-mini.png") center center no-repeat; margin: 5px 8px;}
.galleries li img {margin: 8px;}
.galernik .seeMore {display: block; text-align: right; clear: both;}

.gallery img {margin: 8px; float: none;}
.gallery li {display: block; float: left; width: 160px; height: 102px; background: url("images/gallery-background-item.png") center center no-repeat; margin: 11px 22px;}

dl.newsletter-email {display: block; width: 276px; height: 38px; margin: 12px; position: relative; background: url("images/newsletter.input.png") center center;}
dl.newsletter-email dt, dl.newsletter-email dd {display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
dl.newsletter-email input, dl.newsletter-email label {background: transparent; border: 0px; line-height: 38px; vertical-align: middle; display: block; padding: 0px 15px;}
.newsletter-buttons {display: block; text-align: right; margin: 12px; line-height: 28px; height: 28px; vertical-align: middle;}
.newsletter-buttons a {display: block; height: 28px; line-height: 28px; vertical-align: middle; float: left; margin: 0px 6px;
}

.ajaxSearch_highlight{
    background-color:#FFFF00;
}

.newsletter-email input{
    height: 36px;
    width: 250px;
}
Odpowiedz
#4
daj linka do strony, bo tak to się z tego bałaganu ciężko połapać
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  problem z tłem pod menu loose 1 3,157 06-07-2017, 20:00
Ostatni post: loose
  problem z menu p410 10 10,352 18-06-2017, 18:34
Ostatni post: lemans88
  CSS dla menu i problem z selektorami neferith 4 5,264 30-06-2016, 00:58
Ostatni post: Brain23
  USTAWIENIE GADZETOW OBOK SIEBIE burgeros 3 4,949 27-01-2015, 15:02
Ostatni post: mateo
  MENU - poważny problem wysokości! asus 0 2,534 05-12-2014, 23:34
Ostatni post: asus

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl