[HTML/CSS]Element przesuwa sie przy zmniejszaniu okna przeglądarki

pytanie zadane 18 października 2015 w HTML i CSS przez BLURBLADE Nowicjusz (150 p.)

Siemacie, mam problem z jednym elementem na stronie, otóz:

gdy mam pełny ekran swojej strony:

to widoczne menu wygląda tak jak powinno,

zaś gdy zaczne zmniejszac okno przeglądarki to powstaje coś takiego:

kod tego menu:

#menu_bar > #menu > ul {

list-style-type: none;
margin:0;
padding:0;
font-family: 'Pontano Sans', sans-serif;
font-size:13px;
width:60%;

}
#menu_bar > #menu > ul > li {

   float:left;
padding: 21px 0px 0 23px;
position:relative; left:100px;

}
#menu_bar > #menu > ul > li > a {

   color:black;
   text-decoration:none;
}

Wie ktoś może jak to "naprawić"? :))

3 odpowiedzi

odpowiedź 18 października 2015 przez Eimens Maniak (69,240 p.)

Możesz podesłać kod całego menu?

komentarz 18 października 2015 przez BLURBLADE Nowicjusz (150 p.)

Ogólnie to wygląda to tak:

CSS:

#menu_bar{
    width:100%;
	height:50px;
	background-color:#ffffff;
	margin:0;
	position:relative;
}
#menu_bar > #logo > a {

	color:#494949;
	font-family: 'Oswald', sans-serif;
	font-size:25px;
	text-decoration:none;
	float:left;
	width:40%;
	height:50px;
	text-align:right;
	margin-top:10px;
}

/* MENU */
#menu_bar > #menu {

	
 }
#menu_bar > #menu > ul {
 
   list-style-type: none;
   margin:0;
   padding:0;
   font-family: 'Pontano Sans', sans-serif;
   font-size:13px;
   width:60%;

   

}
#menu_bar > #menu > ul > li {

	float:left;
    padding: 21px 0px 0 23px;
    position:relative; left:100px;


}
#menu_bar > #menu > ul > li > a {

	color:black;
	text-decoration:none;
}

HTML:

  <div id="container">

        	<div id="top">


        		<div id="menu_bar">

        		<div id="logo">
                <a href="#">BLURBLADE</a>

        		</div>
        		<div id="menu">
        			<ul>
        				<li><a href="#" title="Go to main page and see news">HOME</a></li>
        				<li><a href="#" title="Learn more about me">AUTHOR</a></li>
        				<li><a href="#" title="Feel free to read!">TUTORIALS</a></li>
        				<li><a href="#" title="Contact me">CONTACT</a></li>
        			</ul>

        		</div>

        		<div id="wallpaper">
               
        		</div>


                </div>
        	</div>



        </div>

komentarz 18 października 2015 przez Eimens Maniak (69,240 p.)

Tak jak myślałem:

#menu_bar > #menu > ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   font-family: 'Pontano Sans', sans-serif;
   font-size: 13px;
   width: 70%; a nie 60% :) 
}

Masz tutaj moje menu: http://codepen.io/PatrykTal/pen/xGejWo

komentarz 18 października 2015 przez BLURBLADE Nowicjusz (150 p.)

troche sugerując się tym co napisałem ustawiłem width na 110%, ponieważ przy 70-100% nadal schodziło na dół to menu, ale teraz przy width:110% jest okej , dziena ;d

odpowiedź 18 października 2015 przez b00ny Mądrala (6,050 p.)

Daj selektor min-height.

min-height:150px;
/*Wtedy przeglądarka wie że minimalna wysokość musi mieć 150px; */

I tyle.

komentarz 18 października 2015 przez BLURBLADE Nowicjusz (150 p.)

to nic nie daje ; p

dodam jakiego efektu oczekuje, chce aby po zmniejszaniu okna przeglądarki przesuwało sie w lewo a w pewnym momencie się po prostu chowało