• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pozycjonowanie obiektów w DIVach

VPS Starter Arubacloud
0 głosów
150 wizyt
pytanie zadane 23 marca 2017 w HTML i CSS przez Paweł Urban Nowicjusz (150 p.)
Witajcie,

Tworzę witrynę/aplikacje w głównej mierze opartą na formularzach. Proszę o pomoc, bo już 3ci dzień się z tym męczę. Problemy mam w zasadzie 2:

- jak zrobić by obiekty w divach np. inputy typu submit lub ikony graficzne wraz ze zmianą rozdzielczości lub wielkości wyświetlanej strony (scroll w przeglądarce) zmieniały swoje wielkości, jednocześnie nie zmieniając swoich pozycji. Obecnie mam ikonkę obok submita, która wygląda dobrze tylko na mojej rozdzielczości na innych np. chowa się pod inputa.

- całość strony mam podzielone na 4 divy, w kształcie podzielonego czworokąta na 4 części (logo, top, menu, container). Chciałbym zrobić tak by pozycje 3 divów były nie zmienne a div container był np. scrollowany jeśli zawartość w nim będzie wyższa niż domyślna. Niestety ustawienie logo,top i menu w position: fixed a container: relative nie pomaga.

Czy mogę prosić o pomoc? Dziękuje z góry za każdą podpowiedź.
1
komentarz 23 marca 2017 przez hoktaur Pasjonat (22,250 p.)
A ja poproszę o ... kod ;)
komentarz 23 marca 2017 przez imklau Nałogowiec (42,090 p.)
podbijam, mi też by się kod przydał :D
komentarz 24 marca 2017 przez Paweł Antyporowicz Stary wyjadacz (11,470 p.)

Może pobaw się Bootstrapem

1 odpowiedź

0 głosów
odpowiedź 24 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
wybrane 24 marca 2017 przez Paweł Urban
 
Najlepsza

całość strony mam podzielone na 4 divy, w kształcie podzielonego czworokąta na 4 części (logo, top, menu, container). Chciałbym zrobić tak by pozycje 3 divów były nie zmienne a div container był np. scrollowany jeśli zawartość w nim będzie wyższa niż domyślna. Niestety ustawienie logo,top i menu w position: fixed a container: relative nie pomaga.

Bo relative , będzie pozycjonowało względem elementu o pozycji "absolute", bądż do swojego rodzica, a ostatecznie do body.A po drugie po co ci relative? Do pozycjonowania względem okna przeglądarki używa się sticky bądż fixed (zależności od przeglądarki (Na chrome są z tym problemy (bądż były) ). Oczywiście musisz nadać odpowiednią klasę, gdy odległość obiektu od ramki będzie zero bądż mniejsza (Poczytaj --> https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect).

- jak zrobić by obiekty w divach np. inputy typu submit lub ikony graficzne wraz ze zmianą rozdzielczości lub wielkości wyświetlanej strony (scroll w przeglądarce) zmieniały swoje wielkośc

Ustawiając dynamiczne wartości? (np: procenty)

jednocześnie nie zmieniając swoich pozycji. Obecnie mam ikonkę obok submita, która wygląda dobrze tylko na mojej rozdzielczości na innych np. chowa się pod inputa.
 

Użyj media-queries i się baw wielkościami :).  Bądż zabawa pozycjonowaniem absolute/relative. 

komentarz 24 marca 2017 przez Paweł Urban Nowicjusz (150 p.)

dzięki ShiroUmizake za wyjaśnienie.Dopiero się uczę i wszelkie wskazówki są mi cenne.

Kod jest oczywiście do poprawy

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="style/input.css" rel="stylesheet" type="text/css">
</head>
<body><center><div id="page">
	<div id="logo"><a href="mainside.php"><img src="img/logo.png"></a></div>
	<div id="topmenu">Zalogowany użytkownik:XXX | Wyloguj<br />
	<form><input type="text"  name="search-text"  placeholder="Wyszukaj reklamacje" onfocus="this.placeholder=''" onblur="this.placeholder='Wyszukaj reklamacje'"/><input type="submit" name="search" value="Szukaj"/> </form></div>
	<div id="menu-page"><div id="menu"><form><br />
	<img name="icon" src="img/add-icon.png"><input type="submit" name="menunav" value="Dodaj nową reklamacje" align="left"><br />
	<input type="submit" name="menunav" value="Edytuj reklamacje"><img name="icon" src="img/edit-icon.png"><br />
	<input type="submit" name="menunav" value="Przeglądaj reklamacje"><img name="icon" src="img/doc-icon.png"><br />
	<input type="submit" name="menunav" value="Szukaj reklamacji"><img name="icon" src="img/search-icon.png"><br />
</form></div>
	<div id="container">test</div></div>
	</center>
</div>
</body>
</html>

#page {
	width: auto;
	height: auto;
	overflow: hidden;
	background-color: #8EB5CB;
}
#menu-page {
	width: auto;
	height: auto;
	clear: both;
	overflow: hidden;
}
#menu {
	background-color: rgba(142,181,203,1.00);
	width: 25%;
	height: auto;
	float: left;
	min-height: 450px;
	border: 1px solid gray;
	margin: -1px;
	min-height: 470px;
	overflow: hidden;
}
#topmenu {
	
	background:-moz-radial-gradient(51% 50% 40deg, #8EB5CB, #FFFFFF 58%);
	width: 75%;
	height: 120px;
	float: left;	
	position: relative;
	border-bottom: 1px solid grey;
	overflow: hidden;
}

#container {
	background-color: #8EB5CB;
	width: 75%;
	height: auto;
	float: left;
	border: 1px solid gray;
	margin: -1px;
	##min-height: 470px;
	overflow: hidden;
}
#logo {
	width: 25%;
	height: 120px;
	max-height: 310px; 
	float: left;
	background-color: rgba(255,255,255,1.00);
	overflow: hidden;
}

input[name=menunav]
{
width: 250px;
height: 40px;
margin: 0px -10px 7px 25px;
background-color: rgba(128,130,113,0.8);
border-radius:  30px;
-moz-border-radius: 30px;
-webkit-border-radius:  30px;
border: solid black 1px;
font-size: 18px; 
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; 
cursor: pointer;
letter-spacing: 1px;
-webkit-box-shadow:  0px 0px 5px 5px rgba(0,0,0,0.10);
-moz-box-shadow:  0px 0px 5px 5px rgba(0,0,0,0.10);
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.10);
outline: none;
	float: left;
}
input[name=menunav]:hover
{
	background-color: rgba(109,88,94,0.80);
	-webkit-box-shadow:  0px 0px 5px 5px rgba(255,255,255,0.80);
-moz-box-shadow:  0px 0px 5px 5px rgba(255,255,255,0.80);
box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.80);
	
}
img[name=icon] {
	margin: -5px -15px -1px -5px;
}


input[name=search-text] {
	width: 250px;
	height: 20px;
	text-align: center;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-size: 15px;
	border: 1px solid #000000;
	margin: 70px 0px 5px 680px;
}
input[name=search] {
	width: 60px;
	height: 24px;
	border: 1px solid #000000;
	margin-left: 5px;
	margin-bottom: 10px;
}

 

komentarz 24 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
Wyśle Ci w poniedziałek feedback. Bo tego trochę bedzie :D
komentarz 27 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Feedback:

  • Nie używaj tagów center itd. Pozwól tylko HTML spełniać jego pierwotną funkcję, dostarczać dokument. Wyglądem zajmuje się jedynie CSS (jeżeli nie ma interakcji blabla).
  • Ułatw googlowi poszukiwanie twojej strony. Ustaw język! Przeglądarka również Ci podziękuje, będzie wiedziała jakie znanki wyświetlać, gdy napotka coś niecodziennego.

https://www.w3.org/International/questions/qa-html-language-declarations

  • Wielcy panowie W3c dali nam nowe tagi , nie tylko by zwiększyć semantyczność ale również ułatwia się to poruszanie botom indeksującym,programom jak i innym programistom (nic tak nie denerwuje jak divicjonizm na stronie) + plus łatwiej utrzymać kod w porządku. Więcej na ten temat tutaj:

http://internet-bez-barier.com/semantyczny-html-a-dostepnosc/

  • A fajny poradnik znajdziesz u guru semantyczności commandera.(Znajdziesz na google)
  • Jeżeli masz element-blokowy np: div to nie odzielaj go break-row (br), pozwól mu robić to co do czego został stworzony :).

onblur="this.placeholder='Wyszukaj reklamacje'"

  • Przed wszystkim po co i nie mieszaj logiki z wyglądem!

input[name="search-text"] {
    width: 250px;
    height: 20px;
    text-align: center;
    font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;

  • Po co nadejesz, wielkość inputowi. Input jest tzw. kontrolką.

https://developer.mozilla.org/pl/docs/Web/HTML/Element/Input

  • Na tej stronie masz odpowiedż, jak to zrobić. Następne po ci aż tyle czcionek? (Mam sobie wybrać). Margin się nie używa do pozycjonowania elementu (za sztywny), użyj float i tym podobnych. text-align działa na elementy tekstowe.

<input type="text"  name="search-text"  placeholder="Wyszukaj reklamacje" onfocus="this.placeholder=''" onblur="this.placeholder='Wyszukaj reklamacje'"/><input type="submit" name="search" value="Szukaj"/>

  • Brak label.

http://how2html.pl/label-html/

<input type="submit" name="menunav" value="Edytuj reklamacje"><img name="icon" src="img/edit-icon.png">

  • Bezsensowne użycie input i form. Przecież nie wysyłasz żadnych danych, a jedynie etykietkę nagłówka URL plus query
  • Po drugie to jest lista, nie ma po co je pakować elementy blokowe.
  • Brak alt. Nie utrudniaj pracę innym :).

O CSS nie chcę mi się nawet pisać. Zaznajomij się z jakimś kursem. 

Podobne pytania

0 głosów
1 odpowiedź 130 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez Dar3Q Obywatel (1,200 p.)
0 głosów
2 odpowiedzi 1,025 wizyt

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...