Wyśrodkowanie diva z tekstem w innym divie

pytanie zadane 16 października 2016 w HTML i CSS przez Avenue Użytkownik (940 p.)

Witam, mam pewien problem, mianowicie nie wiem jak wyśrodkować diva, w którym znajduje się tekst.

Div ten jest w jeszcze innym divie.

Wygląda to tak:

Chciałbym wyśrodkować tekst "Dowloand<br>Client 1,2 GB" tak aby był na środku zielonego elementu.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Neria.pl Prywatny serwer metin2.</title>
	<meta name="description" content="Neria.pl Rozpocznij przygodę już dziś. Neria to najlepszy prywatny serwer metin2 w Polsce!">
	<meta name="keywords" content="metin2, neria, neria.pl, rpg, mmo, najlepszy, prywatny, serwer, metin2, w, Polsce,">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link href="https://fonts.googleapis.com/css?family=Caudex:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div id="wrapper">
		<div id="justify">
			<div id="menu">
					<div id="rectangle-menu-1"><span class="tekst">Home</span></div>
					<div class="rectangle-menu-2"><span class="tekst">Forum</span></div>
					<div class="rectangle-menu-2"><span class="tekst">Register</span></div>
					<div class="rectangle-menu-2"><span class="tekst"> Support</span></div> 
					<div class="rectangle-menu-3"><span class="tekst">ItemShop</span></div>
					<div class="rectangle-menu-4"><span class="tekst"> Rankings</span></div>
					<div class="rectangle-menu-4"><span class="tekst"> Contacts</span></div>
					<div id="rectangle-menu-5"><span class="tekst">Events</span></div>
			</div>
		</div>
	</div>
</body>
</html>

body{
	font-family: 'Caudex', serif;
	padding: 0 !important;
	margin: 0 !important;
}

#wrapper{
	background-image: url(img/background.jpg);
	display: block;
	width: 1920px;
	height: 1189px;
}

#menu{
	background-image: url(img/menu.png);
	display: flex;
	width: 1063px;
	height: 84px;
	line-height: 42px;
	font-weight: 700;
	font-size: 14px;
	text-align: center
}

.tekst{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#c2b59b),
		to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
}

#justify{
	display: flex;
	justify-content: center;
}

#rectangle-menu-1{
	display: block;
	width: 70px;
	height: 46px;
	margin-left: 87px;
	text-align: center;
	float: left;
}

.rectangle-menu-2{
	display: block;
	width: 93px;
	height: 46px;
	text-align: center;
	float: left;
}

.rectangle-menu-3{
	margin-left: 197px;
	display: block;
	width: 86px;
	height: 46px;
	text-align: center;
	float: left;
}

.rectangle-menu-4{
	margin-left: 1px;
	display: block;
	width: 93px;
	height: 46px;
	text-align: center;
	float: left;
}

#rectangle-menu-5{
	margin-left: 1px;
	display: block;
	width: 70px;
	height: 46px;
	text-align: center;
	float: left;
}

Prosił bym też o pomoc w wyłapaniu jakichś błędów, jestem jeszcze początkujący, także pewne rzeczy można było by zrobić w prostszy i szybszy sposób ;-)

1	komentarz 16 października 2016 przez xmentor Nałogowiec (49,520 p.) edycja 16 października 2016 przez xmentor Buduj menu oparte na liscie ul/ol. Important w twoim przypadku również nie jest potrzebne.

komentarz 17 października 2016 przez Pietrak Pasjonat (18,850 p.)

Kod html jest tragiczny

komentarz 17 października 2016 przez Avenue Użytkownik (940 p.)

Wielkie dzięki za komentarz, wiele się dzięki Tobie dowiedziałem, wiem już co robię źle, co można było by zrobić w inny, lepszy sposób, dzięki!

Napisałem chyba wyraźnie wyżej, że w razie czego proszę o pomoc, ponieważ jestem początkujący..

Ale przecież lepiej napisać, że jest chu**wo niż pomóc ;-)

2	komentarz 17 października 2016 przez Czort Nałogowiec (32,500 p.) xmentor napisał Ci co poprawić ale i tak nie poprawiłeś. Może Pietrak stwierdził, że nie ma sensu się produkować na darmo?

komentarz 17 października 2016 przez Avenue Użytkownik (940 p.)

Faktycznie, wybacz, nie zauważyłem tego komentarza ;-)

komentarz 17 października 2016 przez Avenue Użytkownik (940 p.)

@xmentor, czyli jeśli dobrze zrozumiałem powinno to wyglądać teraz tak?

<div id="menu">
  <ol>
    <li class="tekst">Home</li>
    <li class="tekst">Forum</li>
    <li class="tekst">Register</li>
    <li class="tekst">Support</li>
    <li><span id="tekst2">Download</span> <span id="tekst3">Client 1,2 GB</span></li>
    <li class="tekst">ItemShop</li>
    <li class="tekst">Rankings</li>
    <li class="tekst">Contact</li>
    <li class="tekst">Events</li>
  </ol>
</div>

1	komentarz 17 października 2016 przez xmentor Nałogowiec (49,520 p.) Coś w ten deseń. div o id menu możesz zamienić na znacznik nav. Poczytaj o semantyce i znacznikach, które zostały wprowadzone w HTML5. Trochę popraw: <liclass="tekst"> <li> class="tekst"Rankings</li>

komentarz 18 października 2016 przez Avenue Użytkownik (940 p.)

Dzięki, a co do klasy li, to czy poprawnym zapisem nie jest <li class="tekst">napis</li>?

komentarz 18 października 2016 przez Avenue Użytkownik (940 p.)

I jeszcze jedno pytanie, mianowicie jak wystylizować spana, który jest w linku?

Szukałem informacji na ten temat, ale nie mogę znaleźć ;/

Kod wygląda tak:

		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Register</a></li>
				<li><a href="#">Support</a></li>

				<li><a href="#"><span id="tekst">Download </span><span id="tekst2">Client 1,2 GB</span></a></li>

				<li><a href="#">ItemShop</a></li>
				<li><a href="#">Rankings</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Events</a></li>
			</ul>
		</nav>

nav{
	background-image: url(img/menu.png);
	width: 1063px;
	height: 84px;
	margin-left: auto;
	margin-right: auto;
}

ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

a{
	display: block;
	background-image: -webkit-gradient(linear,
				left top, left bottom,
				from(#c2b59b),
				to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

komentarz 18 października 2016 przez Avenue Użytkownik (940 p.)

I jeszcze jedno pytanie, bo już nie mam siły, od 2h siedzę przy menu i nie mogę nic wymyślić ;/

Mianowicie w jaki sposób mam zrobić menu, chodzi mi o to jak poustawiać elementy li, w których siedzą napisy? (Kod powyżej)

Skoro jest to lista, to aby napisy były obok siebie ustawiłem display: block elementów li, a następnie szerokość taką, aby każdy napis się zmieścił, czyli około 100px.

Tylko pojawia się problem gdy załóżmy chce przesunąć element li z klasą załóżmy 1, czyli pierwszy od lewej - Home.

Używam margin-left: x px, tak aby napis był wyśrodkowany względem swojego obszaru, który jest pokazany na powyższych ssach menu.

Ok, pierwszy element li, w którym jest napis "Home" ustawiłem, problem pojawia się gdy chce ustawić drugi, ponieważ dodając znowu margin-left: x px menu przesuwa się do następnej linii, ponieważ ustawiłem szerokość, więc elementy się nie mieszczą.

Podsunie mi ktoś na to koncepcję? ;-)

Z góry przepraszam za takie pytania, dla Was zapewne śmieszne, ale w końcu dopiero zaczynam.

Dzięki ;-)

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) display: block; oznacza element blokowy, czyli układający się jeden pod drugim a nie w linii. Pytanie brzmi jak zrobione jest tło tego menu ? Podrzuć grafikę. Najlepiej cały kod z grafikami.

komentarz 19 października 2016 przez Avenue Użytkownik (940 p.)

Już nie trzeba, ogarnąłem to ;-)

Elementom li ustawiłem position: absolute a następnie każdy napis poustawiałem aby był równo :)

Tylko dalej nie wiem jak zmienić kolor tekstu, który jest spanem znajdującym się w linku <a> ;/

Kod powyżej.

1	komentarz 19 października 2016 przez Pietrak Pasjonat (18,850 p.) li a span { color:red }

komentarz 19 października 2016 przez pablop76 VIP (123,180 p.)
edycja 19 października 2016 przez pablop76

<li><a href="#"><span id="tekst">Download </span><span id="tekst2">Client 1,2 GB</span></a></li>

więc:

#tekst
{
color: red;
}
#tekst2
{
color: blue;
}

Ale nie wiem po co span ma id. Może wystarczy class. Jężeli id potrzebne do np: js to dodaj jeszcze class i ostylizuj wtedy clase.

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) Ustawiłeś dając position: absolute; tekst względem body. Mam nadzieje, że masz tego świadomość.

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) Powyżej jest menu na divach a chyba zmieniłeś już to

komentarz 21 października 2016 przez Avenue Użytkownik (940 p.)

#tekst{

color: #fff;

}

Powyższy zapis nie działa, jak i również

ul li a #tekst{

color: #fff;

}

@pablop76 nie bardzo rozumiem co masz na myśli i chodziło mi o kod w powyższym komentarzu a nie na samej górze, tutaj dam cały.

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Neria.pl Prywatny serwer metin2.</title>
	<meta name="description" content="Neria.pl Rozpocznij przygodę już dziś. Neria to najlepszy prywatny serwer metin2 w Polsce!">
	<meta name="keywords" content="metin2, neria, neria.pl, rpg, mmo, najlepszy, prywatny, serwer, metin2, w, Polsce,">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

	<link rel="stylesheet" type="text/css" href="style.css">

	<link href="https://fonts.googleapis.com/css?family=Caudex:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div id="wrapper">
		<nav>
			<ul>
				<li><a href="#" id="menu-item-1">Home</a></li>
				<li ><a href="#" id="menu-item-2">Forum</a></li>
				<li><a href="#" id="menu-item-3">Register</a></li>
				<li><a href="#" id="menu-item-4">Support</a></li>

				<li><a href="#" id="menu-item-5"><span id="tekst">Download </span><span id="tekst2">Client 1,2 GB</span></a></li>

				<li><a href="#" id="menu-item-6">ItemShop</a></li>
				<li><a href="#" id="menu-item-7">Rankings</a></li>
				<li><a href="#" id="menu-item-8">Contact</a></li>
				<li><a href="#" id="menu-item-9">Events</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

CSS:

body{
	font-family: 'Caudex', serif;
	padding: 0;
	margin: 0;
}

#wrapper{
	background-image: url(img/background.jpg);
	display: block;
	width: 1920px;
	height: 1189px;

}

nav{
	background-image: url(img/menu.png);
	width: 1063px;
	height: 84px;
	margin-left: auto;
	margin-right: auto;
}

ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

a{
	display: block;
	background-image: -webkit-gradient(linear,
				left top, left bottom,
				from(#c2b59b),
				to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	width: 1063px;
	padding: 5px;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0px 0 4px rgba(0,0,0,0.55);
}

a:hover{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#cfbf9e),
		to(#9a8d74));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

ul li a{
	display: block;
	width: 100px;
	float: left;
	line-height: 32px;
	font-size: 11px;
	font-weight: 700;
}

#menu-item-1{
	position: absolute;
	left: 530px;
}

#menu-item-2{
	position: absolute;
	left: 605px;
}

#menu-item-3{
	position: absolute;
	left: 695px;
}

#menu-item-4{
	position: absolute;
	left: 788px;
}

#menu-item-5{
	position: absolute;
	left: 925px;
	top: 3px;
	line-height: 12px;
}

#menu-item-6{
	position: absolute;
	left: 1070px;
}

#menu-item-7{
	position: absolute;
	left: 1161px;
}

#menu-item-8{
	position: absolute;
	left: 1257px;
}

#menu-item-9{
	position: absolute;
	left: 1343px;
}

ul li a #tekst{
	color: #a9af79;
}

5 odpowiedzi

odpowiedź 16 października 2016 przez dewe Gaduła (4,300 p.)

odpowiedź 16 października 2016 przez Kamil Naja Nałogowiec (27,410 p.)

odpowiedź 17 października 2016 przez Avenue Użytkownik (940 p.)
edycja 17 października 2016 przez Avenue

Dzięki, już ogarnąłem, lecz mam kolejny problem.

Pełny rozmiar --> http://i.imgur.com/pakSmBk.png

Chodzi o to, że umieściłem "Download" i "Client 1,2 GB" w dwóch osobnych divach, "Download" jest obok divu z napisem Support, więc ma float: left a div z napisem "Client 1,2 GB" ma clear: both.

Problem polega na tym, że div z napisem "Client 1,2 GB" nie jest bezpośrednio pod divem z napisem "Download".

Wyżej znajduje się cały kod, a poniżej kod odpowiedzialny za te dwa divy (biały bg tylko roboczo)

HTML: (zaraz pod ..-menu-5)

<div id="rectangle-menu-6"><span id="tekst2">Dowloand</span></div>
<div id="rectangle-menu-7"><span id="tekst3">Client 1,2GB</span></div>

CSS:

#rectangle-menu-6{
	display: block;
	float: left;
	width: 191px;
	height: 23px;


	background-color: white;
	opacity: 0.5;

}

#rectangle-menu-7{
	display: block;
	clear: both;

	width: 191px;
	height: 23px;
	margin: 0;
	margin-left: 437px;

	
	background-color: white;
	opacity: 0.5;

}

1	komentarz 17 października 2016 przez Czort Nałogowiec (32,500 p.) Zamiast <div> użyj <p> i odpowiednio ostyluj w css.

1	komentarz 19 października 2016 przez HaKIM Szeryf (87,590 p.) Zakładam, że strona nie jest responsywna, więc pierdzielnij to za pomocą postition: absolute; i po problemie.