+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [CSS] Elementy zlewają się po minimalizacji (/thread-css-elementy-zlewaja-sie-po-minimalizacji)
[CSS] Elementy zlewają się po minimalizacji - tndek - 14-12-2011
Witam. Mam pewien kod CSS, którego fragment prezentuje się tak:
Kod:
html,body{
margin:0;
padding:0
}
body{
font-family:Verdana;
text-align:center;
background:#000 url(img/mocno_szary.png);
color:#fff;}
#naglowek {
text-align:center;
height:60px;
}
#logo{
margin:0px auto;
width:260px;
padding-top:2px;
}
.nazwa {
font-weight:bold;
font-style:italic;
padding-top:2px;
position: relative; right:280px;
}
#logo a {color:#dd9c04; text-decoration:none;}
#logo a:hover {color:#d9c900; text-decoration:none; border-bottom:0px;}
.like {
display:block;
float:right
position: relative; bottom:10px; left:10px;
}
.slogan {
display:block;
float:right;
color:#fff725;
font-size:30px;
font-weight: bold;
font-family: Arial;
position: relative; bottom:100px; right:420px;
}
#menu{
margin:0px auto;
width:740px;
text-align:left;
font-weight:bold;
font-size:12px;
position: relative; bottom:9px;
}Do uzyskania oczekiwanego efektu tylko takie parametry umożliwiły mi jego wizualizację. Niestety, po zminimalizowaniu okna przeglądarki, klasa .slogan i .like nachodzą na logo&nazwę. W jaki sposób zmodyfikować dane, aby obraz nie przemieszczał się po minimalizacji? Wiem, że parametry są olbrzymie, jednak przy moim obecnym poziomie wiedzy, nie widzę innej alternatywy.
P.S. Tak wygląda plik .php dotyczący problematycznego obszaru:
Kod:
<div id="logo">
<span class="nazwa"><a href="index.php"><img src="/img/szaro_logo.png" alt="basket" title="kosz, sport, sila, masa, bulls, lakers" /></a></span></div>
<span class="slogan"><img src="/img/slogan_d.png"</img> <span class="like"><div id="fb-root"></div><script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script><fb:like href="<?php echo 'http://'.$host.$uri.'/'; ?>" send="false" layout="button_count" width="140" show_faces="false" font="verdana"></fb:like></span></span>RE: [CSS] Elementy zlewają się po minimalizacji - Kartofelek - 14-12-2011
Trochę namieszałeś
Wpierw wytknięcie błędów, pojazd, a potem rozwiązanie ok?
1) stylujesz w "nazwa" czcionkę a tam przecież masz obrazek. I zastanawia mnie to relative, right. Przecież nie masz tam float:right; więc od czego chcesz to odsuwać? Użyj lepiej margin-right....
2) stylowanie nazwa w ogóle nie musi być. Ostyluj logo
3) span "slogan" zamień na div. Musisz rozróżniać co jest jakim typem tagów. DIV to blokowy typ - tak samo jak UL, P, ect. Domyślnie zajmują całą szerokość strony i sprawiają że wszstko następne umieszcza się pod nimi (logiczne prawda?). SPAN, A, STRONG ect to elementy inline - czyli jak nazwa wskazuje "w linii". Są małym wycinkiem - jakby "zakreśleniem" słowa
Ale inline nie można ustawiać wymiarów. Jest jeszcze inline-block - coś pomiędzy. Najlepsza rzecz na świecie poza cycuszkami szlachcianki. Ale IE do wersji 8 źle to obsługuje, chociaż bardzo łatwo mu wyjaśnić co robi źle (dodajemy *display:inline - ale o tym w google)Elementy inline nie powinny mieć w sobie elementów blokowych (czyli div w span) - tak jak to jest u ciebie
To taka gramatyka której się naucz.Jeżeli chcesz uniknąć zwężania elementów, okryj je jakimś elementem blokowym (div) i daj mu szerokość np 960px. Dzięki temu jak gość zmniejszy poniżej tej szerokości to nic ci się nie rozwali.
No i popraw to relative, bo u ciebie raczej to nie potrzebne. Chociaż z samego kodu ciężko wyczaić co chciałeś osiągnąć.
RE: [CSS] Elementy zlewają się po minimalizacji - tndek - 14-12-2011
Witam.
Dziękuję za cenne wskazówki, które zniwelowały wiele niejasności, jakie w ostatnim czasie mnie trapiły.
Akurat byłem w trakcie wprowadzania zasugerowanych zmian, gdy wygląd strony przybrał idealne, jak dla mnie, wizualne kształty. Myślę, że najlepiej będzie, gdy zamieszczę link do strony -> http://tinyurl.com/bwnaak6
Na chwilę obecną, całość CSS wygląda tak:
Kod:
html,body{
margin:0;
padding:0
}
body{
font-family:Verdana;
text-align:center;
background:#000 url(img/mocno_szary.png);
color:#fff;}
#naglowek {
text-align:center;
height:60px;
}
div#logo{
margin:0px auto;
width:260px;
position:relative; right:280px;
}
div.like {
display:block;
float:right
position: relative; bottom:10px; left:10px;
}
div.slogan {
width:960px;
display:block;
float:left;
position:relative; bottom:100px; left:30px;
}
#menu{
margin:0px auto;
width:740px;
text-align:left;
font-weight:bold;
font-size:12px;
position: relative; bottom:60px;
}
#menu ul, #menu ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul {
float: left;
width: 100%;
padding-right: 20px;
margin-top: 8px;
}
#menu ul li {
float: left;
margin-right: 10px;
}
#menu ul a {
text-decoration: none;
display: block;
background-color: #red;
color: #red;
padding: 9px 17px;
border: 1px solid #FFD700;
position: relative;
top: -1px;
border-radius:4px 4px 4px 4px;
}
#menu ul a:hover {
background-color: #0b81a8;
}
a:link , a:visited , a:active {color:#b9b9b9; text-decoration:none;}
a:hover {color:#ffd500;}
#kontener{
text-align:left;
margin:0 auto;
width:700px;
clear: left;
position:relative; bottom:20px;
background:url(img/cont_bg.png);
box-shadow:0px 0px 10px #151515;
padding:20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size:12px;
}
#kontener h1 {
font-size: 1.4em;
font-weight: bolder;
padding-bottom: 10px;
color: #FFB903;
border-bottom:1px solid #FFB903;
}
#kontener table {
font-size:12px;
}
#kontener .pole {
border:0;
background:#fff;
width:170px;
height:25px;
padding:2px;
margin:2px;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#kontener textarea{
border:0;
background:#fff;
width:400px;
height:125px;
padding:2px;
margin:2px;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* CODE BY KLOCEK & Quik */
.shit {
text-align:center;
background:#000;
border:1px solid #4d4d4d;
padding:10px;
margin-top:10px;
margin-bottom:20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.shit img {
max-width: 670px;
}
.img_title {
width:100%;
text-align:left;
}
.img_title a {
font-size:24px;
color:#FFFFFF;
font-weight:bold;
}
.fb_share {
padding-top:8px;
}
.button, .button:visited , .button:link {
background: #0b81a8;
padding: 11.5px 22px;
border-radius:10px;
color: white;
font-size: 19px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
text-align: left;
position:relative;
}
.button:hover {
border-top-color: 1px #f08a0c;
background: #3eaca9;
color: #ffffff;
}
#strony {
text-align:center;
margin:0 auto;
width:740px;
padding-top:30px;
font-size:14px;
font-weight:bold;
}
#stopka {
text-align:center;
margin:0 auto;
width:740px;
padding:30px;
font-size:14px;
}
img {
border:0px;
}
.tabela tr:hover { background:#0F0F0F; }
/* begin css tabs */
#tab ul {
list-style-type: none;
padding: 0;
margin: 0;
position:relative;
bottom:-1px;
z-index:99;
}
#tab li {
float: left;
border: 1px solid #FFB903;
margin-left:10px;
}
#tab a {
text-decoration: none;
display: block;
background: #3d3d3d;
padding: 6px 1em;
text-align: center;
}
#tab a:hover {
background: #3d3d3d;
}
#tab #selected {
border-bottom-color: #171717;
}
#tab #selected a {
background: #171717;
font-weight: bold;
}
#tab_linia{
border-top: 1px solid #FFB903;
clear: both;
padding-bottom: 10px;
}
/* end css tabs */
label { float:left; display:inline; width:140px; line-height:2; margin-right:20px; text-align:right;}
#pobierz {
position: fixed;
background-color: #0f4685;
padding: 5px;
border: 1px solid #2867af;
top: 120px;
left:-1px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width:20px;
text-align:center;
font-weight:bold;
}
.footer {
margin-top:10px;
color:#606060;
font-size:10px;
font-weight:bold;
}
.footer a {
color:#c08803;
}Oto zawartość pliku .php:
Kod:
<div class="nazwa"><a href="http://wpytke.pl"><img src="/img/szaro_logo.png" alt="shity" title="rozrywka, humor, zdjecia, filmy, demotywatory, kwejk" /></a></span></div>
<div class="slogan"><img src="/img/slogan_d.png"</img> <div class="like"><div id="fb-root"></div><script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script><fb:like href="<?php echo 'http://'.$host.$uri.'/'; ?>" send="false" layout="button_count" width="140" show_faces="false" font="verdana"></fb:like></div></div> </div>Zdaję sobie sprawę, że pod względem kodu nadal nie jest to najoptymalniejsza wersja, jednak obecny efekt wizualny jest właśnie taki, jak oczekiwałem.
Jedyny mankament, że w przeglądarce Firefox nie można kliknąć w obrębie logo, jedynie na jego granicach i niewiele wyżej następuje przekierowanie do strony głównej. W Operze jest wszystko w porządku. Dla IE muszę sporządzić osobny CSS. Jak można zlikwidować problem związany z logo (zależy mi na tym, aby tak jak na Operze, cała jego powierzchnia umożliwiała przeniesienie na stronę główną).RE: [CSS] Elementy zlewają się po minimalizacji - Kartofelek - 14-12-2011
#nazwa a {overflow:hidden;}
I całość obejmij divem np <div class="container"> i daj mu jakąś szerokość (u ciebie to będzie width:700px;}
RE: [CSS] Elementy zlewają się po minimalizacji - tndek - 15-12-2011
Powiem krótko: bez zmian. Wprowadzenie powyższych wskazówek nie przyniosło żadnej poprawy.
W tej chwili wyrzuciłem z pliku .php kod dotyczący sloganu i facebooka (like) i sytuacja z logiem wygląda tak jak powinna, czyli cała jego powierzchnia przenosi do strony głównej. W jaki sposób prawidłowo umieścić dane elementy? Nie mam już zielonego pojęcia...
RE: [CSS] Elementy zlewają się po minimalizacji - Kartofelek - 15-12-2011
Nie zastosowałeś zmian i tyle
Logo już całe jest aktywne.
Nie objąłeś całej strony containerem.