Wyrównanie inputów

0

Cześć, mam do moich inputów przypisane labele, chciałbym aby to wszystko było jakoś ułożone równo na stronie - labele równo ze sobą do lewej strony a inputy równo do prawej strony diva. Napisałem takiego diva:

<div class="kol2">
	<label class="klient">nazwa klienta <input type="text" disabled></label>
	<label class="zaleglosci">zaległości <input type="text" disabled></label>					
	<label class="kod_nadania">kod nadania <input type="text"></label>						
	<label class="kod_dostawy">kkod dostawy <input type="text"></label>					
	<label class="adr">ADR <input type="text"></label>						
</div>

i chciałbym aby labele były z lewej strony diva co się udało w css:

.kol2	{
	    float:left;
		width: 250px;
		height: 450x;
		padding:15px 0 0 15px;
		font-size:10px
		}

natomiast nie wiem jak zrobić żeby inputy były 'przyklejone' do prawej strony diva. Napisałem tak ale nie działa:

input
{
float:right;	
}

W załączniku pokazuję jak to obecnie wygląda. Generalnie moim celem jest ustawienie labeli równo jeden pod drugim i inputów jeden pod drugim równo z lewej, tak żeby nie było 'schodków'.

1 
input[type="text"]  {
  float:right;
}

cos na takiej zasadzie

0

nie wyrównuje do prawej;/

0

jak nie jak tak

https://jsfiddle.net/h4nLsbfe/2/

1

zapisałem tak jak widzisz w załączniku i mi nie działa, nie wiem co jest nie tak

0

moja krysztalowa kula dzisiaj nie dziala, nie potrafie wrozyc bez niej

Wrzuc kod na jsfiddle i pokaz co tam nie dziala (tak jak ja zrobilem)

0

ok zobacz
https://jsfiddle.net/h4nLsbfe/7/
tu wyrownuje ale u mnie w projekcie nie

0

to wytlumacz mi, skad mam wiedziec dlaczego w Twoim projekcie nie? Na bazie czego mam to wywnioskowac?

0

nie wiem, zaczynam prace w css i html dlatego sie pytam co moze jest nie tak, cos o czym nie wiem. Tu wykonuje poprawnie a u mnie nie

1

wiec nie odtworzyles w jsfiddle tego co masz. Musisz miec jakis inny css ktory nadpisuje to, albo zly CSS albo milion innych powodow

0

Ok, widzisz to mnie nakierunkowałeś w tym momencie. Mam odwołanie do zewnetrznego css'a, jakiegos bootstrapa (jeszcze się na tum nie znam ale dzięki niemu mogłem stworzyć i modyfikować zakładki w menu nawigacyjnym). Jest to link: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Niestety jak widzisz mam tez czcionke z google i tez nie dziala na mojej stronce bo chyba ww. link wszystko nadpisuje.

A cały kod tutaj:

<!DOCTYPE html>
<html>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8">
		<title>Tytuł</title>
		<meta http-equiv="X-UA Compatible", content="IE=edge,chrome=1"/>
		<link rel="stylesheet" href="css/main.css" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Rajdhani&amp;subset=latin-ext" rel="stylesheet"> 
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		      
	</head>
	<body>

<div id="container">
	<div id="logo">
		-LOGO- 
		<p style="font-size: 18px">podtytuł</p>
	</div>
	
	<div id="topbar">
		<ul class="nav nav-tabs nav-justified" role="tablist">
			<li><a href="#1karta" role="tab" data-toggle="tab">Zakładka1</a></li>
			<li><a href="#2karta" role="tab" data-toggle="tab">Zakładka2</a></li>
			<li><a href="#3karta" role="tab" data-toggle="tab">Zakładka3</a></li>
			<li><a href="#4karta" role="tab" data-toggle="tab">Zakładka4</a></li>
			<li><a href="#5karta" role="tab" data-toggle="tab">Zakładka5</a></li>
		</ul>
	<div style="clear:both;"></div>
	</div>
	
	<!-- pasek menu -->
	<div class="tab-content">
		<div id="1karta" class="tab-pane fade">
			<div id="main"> 
			<div class="kolumny_kalkulator">
				<div class="kol1">
					<label class="mail">e-mail <input type="text"></label>
					<label class="id">ID <input type="text" disabled></label>					
					<label class="kraj_nadania">kraj <input type="text"></label>						
					<label class="kraj_dostawy">kraj <input type="text"></label>					
					<label class="serwis">serwis <input type="text"></label>						
				</div>
				<div class="kol2">
					<label class="klient">nazwa klienta <input type="text" disabled></label>
					<label class="zaleglosci">zaległości <input type="text" disabled></label>					
					<label class="kod_nadania">kod nadania <input type="text"></label>						
					<label class="kod_dostawy">kod dostawy <input type="text"></label>					
					<label class="adr">ADR <input type="text"></label>						
				</div>
				<div class="kol3">				
					<label class="TT">TT <input type="text" disabled></label>
				</div>
				<div class="kalkulator">		
				</div>
			</div>	
			</div>
		</div>
		<div id="2karta" class="tab-pane fade">
			<div id="main">				
			</div>		
		</div>
		<div id="3karta" class="tab-pane fade">
			<div id="main">
				
			</div>			
		</div>
		<div id="4karta" class="tab-pane fade">
			<div id="main">
				
			</div>				
		</div>
		<div id="5karta" class="tab-pane fade">
			<div id="main">
				
			</div>		
		</div>		
	</div>
</div>
	<div id="footer">
		All rights reserved &copy;
	</div>
</body>
</html>

co do css to mam w pliku zewnetrznym ale póki co wszystko dobrze chodzi oprocz tego input[type="text"] w css-ie o którym piszemy.

0

wyrzuc wszystkie zaleznosci i zobacz czy sie zmienia, jezeli nie to wrzuc tez swoj CSS

0

Wiem, że jak wyrzucam <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> to wszystko wraca do normy tzn. pobiera normalnie style z mojego zewnętrznego css-a. Mój css z zewn. pliku jest ok bo wszystko działało poprawnie.
Natomiast problem polega na tym, że jak wyrzucam tego linka z html-a to pasek nawigacji gdzie mam zakładki zamienia się w zwykłą listę (tytuły zakładek jeden pod drugim, wypunktowana lista). Obecnie z tym bootstrapem mam wszystkie zakładki jedna obok drugiej, taki ładny pasek nawigacji gdzie jak klikam w zakładkę to poniżej wyświetla mi się ich zawartość. I teraz właśnie nie wiem co z tym zrobić. Z jednej strony dzięki temu bootstrapowi mam ładny pasek nawigacji gdzie elegancko przeskakuję sobie z jednej na drugą zakładkę i wyświetlam jej zawartość - z drugiej strony ten ww. link jest nadrzędny nad moim plikiem css-a i niweluje częściowo jego działanie, choć nie w 100%

1
muskagap napisał(a):

Wiem, że jak wyrzucam <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> to wszystko wraca do normy tzn. pobiera normalnie style z mojego zewnętrznego css-a. Mój css z zewn. pliku jest ok bo wszystko działało poprawnie.
Natomiast problem polega na tym, że jak wyrzucam tego linka z html-a to pasek nawigacji gdzie mam zakładki zamienia się w zwykłą listę (tytuły zakładek jeden pod drugim, wypunktowana lista). Obecnie z tym bootstrapem mam wszystkie zakładki jedna obok drugiej, taki ładny pasek nawigacji gdzie jak klikam w zakładkę to poniżej wyświetla mi się ich zawartość. I teraz właśnie nie wiem co z tym zrobić. Z jednej strony dzięki temu bootstrapowi mam ładny pasek nawigacji gdzie elegancko przeskakuję sobie z jednej na drugą zakładkę i wyświetlam jej zawartość - z drugiej strony ten ww. link jest nadrzędny nad moim plikiem css-a i niweluje częściowo jego działanie, choć nie w 100%

Dodaj do swojego css'a:

.kol2 > label {
	display: inline;
}

i zobacz czy działa. Oczywiście to tylko dla JEDNEJ kolumny. Dla kol1 i kol3 musisz zrobić tak samo. Twój znacznik <label> dziedziczy "parę" rzeczy po bootstrapie.

1
muskagap napisał(a):

nie wiem, zaczynam prace w css i html (...)

muskagap napisał(a):

Natomiast problem polega na tym, że jak wyrzucam tego linka z html-a to pasek nawigacji gdzie mam zakładki zamienia się w zwykłą listę (tytuły zakładek jeden pod drugim, wypunktowana lista). Obecnie z tym bootstrapem mam wszystkie zakładki jedna obok drugiej, taki ładny pasek nawigacji gdzie jak klikam w zakładkę to poniżej wyświetla mi się ich zawartość. I teraz właśnie nie wiem co z tym zrobić. Z jednej strony dzięki temu bootstrapowi mam ładny pasek nawigacji gdzie elegancko przeskakuję sobie z jednej na drugą zakładkę i wyświetlam jej zawartość - z drugiej strony ten ww. link jest nadrzędny nad moim plikiem css-a i niweluje częściowo jego działanie, choć nie w 100%

Skoro zaczynasz we front-endzie, radziłbym Ci nie używać Bootstrapa na razie i spróbować zrobić podobnie (nie musi być chyba identycznie?) w czystym CSS. PS. No, chyba że używasz go już do czegoś, w czym jednak jest niezbędny (ja go nie znam).

1

Po pierwsze powinieneś zrozumieć co się dzieje w Twoim kodzie. Znalazłeś jakiś przykład kodu z paskiem zakładek wykorzystujący Bootstrapa więc siłą rzeczy usunięcie go spowoduje całkowite rozjechanie się układu strony. Następnie kolejność ładowania plików stylu ma znaczenie, bo każdy następny może nadpisać poprzedni. Dlatego zmienia Ci się czcionka, układ elementów (jeżeli wykorzystuje te same klasy) itd. Powinieneś przenieść swój styl na sam koniec.
Powinieneś zacząć od napisania wszystkiego bez wykorzystania Bootstrapa, żeby zrozumieć co właściwie robisz. A jeżeli już koniecznie chcesz go użyć, to go należycie wykorzystaj. Użyj wierszy i kolumn.

Rozwiązanie 1:

Czysty HTML, CSS i JavaScript (bez jQuery)

Przykład: https://jsfiddle.net/4kzedmnt/1/

Pasek zakładek to w zasadzie delikatnie przerobiony przykład z w3schools (https://www.w3schools.com/howto/howto_js_tabs.asp) z dodanymi trzema kolumnami.
Zwróć uwagę, że przełączanie między zakładkami odbywa się z wykorzystaniem JavaScript i zdarzenia onclick. W Twoim przypadku załatwiają to klasy Bootstrapa (i jego kod jQuery).

Wydaje mi się, że rozwiązanie 1 powinno być w Twoim przypadku podstawą do kontynuacji i przede wszytkim nauki.

Rozwiązanie 2:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Column 1
    </div>
    <div class="col-sm-4">
      Column 2
    </div>
    <div class="col-sm-4">
      Column 3
    </div>
  </div>
</div>

Taki kod w Bootstrapie załatwia problem z trzema kolumnami o takiej samej szerokości. Przynajmniej na ekranach ≥576px, na mniejszych będą to trzy wiersze zamiast kolumn, jeden pod drugim.
Kolejna rzecz to wyrównanie elementów label i input. Rozwiązując to z wykorzystaniem Bootstrapa powinno to wyglądać mniej więcej tak:

<div class="form-group row">
  <label class="mail col-sm-4 col-form-label">e-mail</label>
  <div class="col-sm-8">
    <input class="form-control" type="text">
  </div>
</div>

Przykład z Twoim kodem: https://jsfiddle.net/yx1xe3w7/

Poza tym masz otwarty dwukrotnie tag html, nie jestem pewien po co Ci dodatkowe klasy przy etykietach, ale jeżeli nie masz zamiaru w ten sposób zastosować unikalnych styli, a raczej wykoszystać to jako selektor w kodzie javascript to raczej używaj nazw zamiast klas, np <input name="input-email">.
Dodatkowo ładujesz Bootstrapa 3.3.7 gdzie ostatnia wersja to 4.0.0, która sporo zmienia.

0

Ogólnie moje zdanie jest takie, że zaciągać całego bootstrapa tylko po to aby korzystać z fajnego efektu z zakładkami to trochę bezsens. To już lepiej olać bootstrapa i samemu pobawić się css i trochę się w nim poduczyć skoro i tak kolega napisał, że jest początkujący :)

0

Ok, dziękuję racuh za wytłumacznie, rosjaśniłeś mi temat. Zrobie sobie kurs Bootstrapa bo wiem ze daje fajne możliwości ale poki co bede raczej korzystał z cssa.

0

Mam jeszcze jedno pytanie: jak mogę wyśrodkować menu? Tak aby zakładki były nie od lewej ale na środku paska? Podążając za linkiem: https://jsfiddle.net/4kzedmnt/1/ próbuję ustawić dla .tab wartość text-align:center; ale nie wyśrodkowuje. Jak mogę to zmienić?

  .tab {
  overflow:hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  text-align:center;
}
1

https://jsfiddle.net/4kzedmnt/22/

0

Mam jeszcze jedno pytanie: jak mogę wyśrodkować menu? Tak aby zakładki były nie od lewej ale na środku paska? Podążając za linkiem: https://jsfiddle.net/4kzedmnt/1/ próbuję ustawić dla .tab wartość text-align:center; ale nie wyśrodkowuje. Jak mogę to zmienić?

Z racji tego, że dla elementów <buttons> – które, jak rozumiem, chcesz wyśrodkować wszystkie naraz – jest ustawiona deklaracja float: left, nie mogą zostać wyśrodkowane. Wóz albo przewóz. Zgodnie ze specyfikacją:

The float CSS property specifies that an element should be placed along the left or right side of its container (...). (https://developer.mozilla.org/en-US/docs/Web/CSS/float)

Zresztą nie wiem, czemu ta deklaracja została tam umieszczona?

A że elementy <button> są śródliniowe, to po jej usunięciu i dodaniu text-align: center dla ich kontenera zostają ładnie wyśrodkowane. Zgodnie ze specyfikacją:

The text-align CSS property describes how inline content like text is aligned in its parent block element. (https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) (pogrubienie moje)

Proszę: https://jsfiddle.net/4kzedmnt/36/

Co do usunięcia deklaracji float, nie sprawdzałem całego kodu, jeśli był jakiś powód dla jej umieszczenia, to powiedz, to spróbujemy inaczej to rozwiązać.

0

Ok rozumiem, dzięki. Uzyłem float left tez z innej przyczyny - nie chce aby miedzy zakładkami była ta mała "przerwa", tylko żeby były "przyklejone" do siebie. Próbowałem na buttonie ustawiac to marginem ale nie było rezultatu. Jak można to zmienić?

Po drugie jak już poruszamy temat buttonów i paska menu: w moim przypadku mam 5 zakładek, które chciałbym aby 'wypełniły/rozciągnęły się' na cały pasek menu tzn. z lewej albo prawej strony paska menu nie zostawało kawałka paska menu. Nie wiem czy wiecie o co chodzi ale w załączniku wrzuciłem jak to wyglada (poprawnie). Obecnie jest ok - wszystkie zakładki (po najechaniu na nie) ładnie wypełniają 100% paska ale zrobiłem to chyba trochę od drugiej strony.

Poniżej klasa topbar (tak nazwałem mój pasek menu) gdzie buttonom nadałem float:left (aby były przyklejone do siebie) a szerokośc buttonom nadałem width:290 px. To optymalna szerokośc która powoduje ze cały pasek menu bedzie 'wypełniony':

.topbar button
	{
	background-color:inherit;
	float:left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	height:55px;
	width:290px;
	font-size:15px;
	color: #edeff2;
	}

Poniżej natomiast css dla paska menu czyli topbar. Jak widac szerokośc jest ustawiona na 100% czyli 1450px (bo tyle ma kontener w którym znjdują się ww. klasy). 5 zakładek * 290 px= 1450 px - i dlatego mam wypełniony pasek menu w 100%.

.topbar   {	
		margin-top:120px;
		background-color: #464e59;
		overflow: hidden;
		opacity:0.85;
		border-radius:8px;
		width:100%;
	}

a na samym dole podaje mój kontener który zawiera w sobie moje wszystkie klasy:

#container   {
		width: 1450px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		position: relative;
	}

Czy można jakoś inaczej ten problem rozwiązać czy tak na piechotę?

1

Ok rozumiem, dzięki. Uzyłem float left tez z innej przyczyny - nie chce aby miedzy zakładkami była ta mała "przerwa", tylko żeby były "przyklejone" do siebie. Próbowałem na buttonie ustawiac to marginem ale nie było rezultatu. Jak można to zmienić?

To jest dobre pytanie. To znana kwestia w CSS dla elementów inline-block, zobacz przykładowo ten artykuł (choć nie odwołuje się do żadnej specyfikacji, widać problem): https://css-tricks.com/fighting-the-space-between-inline-block-elements/ (przy okazji polecam całą stronę https://css-tricks.com/, znakomita). Jak to rozwiązać? Autor artykułu podaje kilka rozwiązań, ale przestrzegam cię przed użyciem któregokolwiek z nich oprócz ostatnich dwóch (float oraz flexbox) – w mojej opinii są niestandardowe, przeczą dobrym praktykom (co za tym idzie, w kwestii utrzymania kodu spowodują więcej szkód niż korzyści), a poza tym pochodzą z 2012 roku.

A skąd wiem, że element <button> domyślną wartość własności display ma inline-block? Co dość dziwne, nie udało mi się znaleźć w żadnej specyfikacji tej informacji (choć może jest na którejś podstronie). Jednak to JSFIddle powinno rozjaśnić sprawę: https://jsfiddle.net/8y2ht88k/5/ (inline-block, przynajmniej w Firefoksie tak pokazuje).

Po drugie jak już poruszamy temat buttonów i paska menu: w moim przypadku mam 5 zakładek, które chciałbym aby 'wypełniły/rozciągnęły się' na cały pasek menu tzn. z lewej albo prawej strony paska menu nie zostawało kawałka paska menu.

Stwórz JSFiddle z całym kodem, to zobaczymy, jak to można zrobić inaczej. Na załączonym obrazku nic nie widać.

Poniżej klasa topbar (tak nazwałem mój pasek menu) gdzie buttonom nadałem float:left (aby były przyklejone do siebie) a szerokośc buttonom nadałem width:290 px. To optymalna szerokośc która powoduje ze cały pasek menu bedzie 'wypełniony':

To nie jest optymalna szerokość. W rzeczy samej, to jest jedynie teoretyczna szerokość (dla konkretnego przypadku). Przy jakiej konfiguracji będzie wypełniony –  chodzi mi o rozmiar ekranu oraz obszaru roboczego? Przy Twojej tak, a jeśli ktoś będzie mieć inną?

Na tę chwilę najlepsze rozwiązanie, jakie znam, to model flexbox (lub grid, ale flexbox, myślę, wystarczy). Tutaj informacje: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ lub tutaj: https://medium.com/flexbox-and-grids/css-flexbox-grid-layout-how-to-approach-css-layouts-in-2017-and-beyond-685deef03e6c. Pokaż cały kod, jak wspomniałem, to będzie można przerobić.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto