Przyciski przy minimalizowaniu stoją w miejscu.

Question

Witam,

Mam taki problem, że jak minimalizuje stronę to przyciski stoją w miejscu nie przesuwają się w prawo tak jak chciałbym żeby to było. 

Mam ustawione te przyciski przy pomocy marginesu i wiem, że to jest przyczyną tego. Tylko jak uczynić żeby te przyciski były na środku tak jak chciałbym i przy zmniejszaniu strony żeby się przesuwało?

#Menuu {
	background-image: url(../images/przycisk1.png);
	width: 150px;
	height: 20px;
	border-style: solid;
	margin-left: 200%;
	margin-right: auto;
	text-align: center;
	padding: 1px;
	font-size: 15px;
	display: block;

 

Comments

Czemu służy taka duża wartość  margin-left:200%;

---

Zastosowałem taką dużą wartość ponieważ, jak stosowałem mniejszą nie wychodziło tak usytuowanie przycisków jak chciałbym, a przy 200% niby jest okej, ale pewnie to działanie jest błędne

Answer 1

Minimalizowanie to zejście okna do dolnego paska (przynajmniej w Windowsie). Ty zmniejszasz okno lub je po prostu zwężasz. Jeśli #Menuu ma być na środku strony do

margin-left: auto;

margin-right: auto;

albo wersja skrócona (z 0 marginesem top i bottom) czyli:

margin: 0 auto;

Comments

Owszem próbowałem zastosować wartość margin-left: auto; oraz margin-right: auto;

i wtedy jest coś takiego że przyciski sa przesunięte do lewej, nie tak jak chciałbym żeby został na środku.

---

Masz pewnie #Menuu w jakimś boxie który nie ma 100% width.

---

mam coś takiego w HTMLU

<div id="Menu">
	<ul>
		<li><div id="Menuu"><a href=>Menu Główne</a></li>
		<li><div id="Menuu"><a href=>Produkty</a></li>
		<li><div id="Menuu"><a href=>Usługi</a><li>
		<li><div id="Menuu"><a href=>O Nas</a><li>
		<li><div id="Menuu"><a href=>Kontakt</a><li>
		<li><div id="Menuu"><a href=>Gry</a><li>
	</ul>
</div>

Czyli w CSS powinienem dodać

div.Menuu {

width:100%;

}

Czy nie można tak określić tego diva?

 

---

id jest indywidualne i powinno być użyte tylko raz, dlatego błędem jest użycie 6x id.

Jeśli chcesz to zrobić w columnie zrób to nastepująco:

    <ul id="Menu">
        <li><a href=>Menu Główne</a></li>
        <li><a href=>Produkty</a></li>
        <li><a href=>Usługi</a><li>
        <li><a href=>O Nas</a><li>
        <li><a href=>Kontakt</a><li>
        <li><a href=>Gry</a><li>
    </ul>

#menu{
display: flex;
flex-direction: column;
margin: 0 auto;
}
 

Swoją drogą nie pozamykałeś <div>  w które wrzuciłeś <a>

---

Chciałbym żeby Menu Głowne, produkty itp były ustawione inline na środku.

Co do divów myślalem ze jak zamknę na końcu diva to bedzie uznawalo ze zamykam wszystkie.

Czyli rozumiem ze kazde id ma jedno indywidualne przypisanie?

---

Ok wiec ustaw

Flex-direction: row;

Kazdy div musi byc zamkniety. Tzn kazdy <div> musi miec </div>

Tak jedno id nie moze sie powtarzac.

Jesli mozna wiedziec z jakich zrodel czerpiesz wiedze?

---

Jestem początkującym, takim świeżakiem który jest jedynie po książce "Jon Duckett - HTML i CSS. Zaprojektuj i zbuduj witrynę WWW" próbujący swoich sił w tworzeniu stron.

Wciąż mi nie działa ;/ zrobiłem tak jak radziłeś

---

Wrzuc na codepen, rano Ci to zrobie

---

Wiesz, nie o to chodzi żeby mi ktoś zrobił czy coś. Po prostu chciałbym się nauczyć Html'a i CSS'a. Chodzi mi o to żebym sam do tego doszedł, zrozumiał, jak co i dlaczego, dlaczego tak a nie inaczej. Ale dziekuje bardzo za taką propozycję. Popracuję nad tym z kolejne 3 godzinki a może sie jakoś uda :)

---

Udało się?

---

Po długich próbach wyszło tak jak chciałem tylko musze, teraz lekko przerobić to żeby było perfekcyjnie