Cesash utworzono 22 marca 2017 utworzono 22 marca 2017 (edytowane) Witam, Przychodzę z pytaniem odnośnie ustawienia strony w CSS. Mój problem głównie polega na tym, że chciałbym zrobić górny nagłówek w którym znajdowałoby się kilka obiektów. Na lewo przycisk home, w środku napis z nazwą strony i po prawej dodatkowy przycisk. Jak w najprostszej formie umieścić to wszystko zachowując rozmiary, gdyż chciałbym żeby napis był zawsze na środku strony a przyciski na przeciwległych bokach. ( żeby tak było przy oddalaniu), jeśli można proszę o jakiś surowy kod poglądowy Spoiler Oraz podobne zadanie ale z ustawieniem strony. Środkowa część jest główną w której będzie tekst itp, a dwa boczne z lewej i prawej będą do niej przytwierdzone ale oddalone o jakąś liczbę px. Również chciałbym aby środkowy panel był zawsze wyśrodkowany, a że te dwa są przyległe zawsze były obok. Jakie je ustawić w ten sposób? Spoiler Edytowane 22 marca 2017 przez Cesash
Evo87 komentarz 23 marca 2017 komentarz 23 marca 2017 A witrynę masz opartą na czym, na divach? Ja bym sobie podzielił najpierw stronkę na dwa duże pojemniki, np. header i container - czyli nagłówek i treść. I w każdym z nich wrzucasz kolejne divy, po trzy - lewy, środek, prawy, ustalasz ich wielkość tak żeby łącznie było 100% i tyle, ustawią się proporcjonalnie. Wszystkie z "float:left", na koniec wyczyszczenie floata żeby nie rozwalać reszty strony, i sobie je ustawiasz w takiej wielkości jak chcesz. Tylko na początek taka uwaga - ustawienie stałych wartości wysokości czy szerokości (jak u Ciebie 50px wysokości) ma swoje minusy, bo taki system nie dopasowuje się do ekranu na którym jest wyświetlany - na telefonie w pionie będzie zupełnie inny niż na monitorze 4k 16:9. Poza tym trudno przewidzieć czasem jak się poukładają te divy jak wrzucisz do któregoś za dużo tekstu/za duży obrazek. Trzeba by więc pomyśleć o regułach media, żeby witryna się poprawnie wyświetlała na różnych urządzeniach. Napisałem na szybko coś takiego, o to mniej więcej chodzi? <!DOCTYPE HTML> <head> <style type="text/css"> #header { width:100%; height:50px; } .button { float:left; width:25%; height:50px; } #name { float:left; width:50%; height:50px; text-align:center; } .clearfix { clear:both; } #button2 { text-align:right; } </style> </head> <body> <div id="header"> <div id="button1" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div id="name">NAZWA</div> <div id="button2" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div class="clearfix"></div> </div> </body> </html> A witrynę masz opartą na czym, na divach? Ja bym sobie podzielił najpierw stronkę na dwa duże pojemniki, np. header i container - czyli nagłówek i treść. I w każdym z nich wrzucasz kolejne divy, po trzy - lewy, środek, prawy. Wszystkie z "float:left", na koniec wyczyszczenie floata żeby nie rozwalać reszty strony, i sobie je ustawiasz w takiej wielkości jak chcesz. Tylko na początek taka uwaga - ustawienie stałych wartości wysokości czy szerokości (jak u Ciebie 50px wysokości) ma swoje minusy, bo taki system nie dopasowuje się do ekranu na którym jest wyświetlany - na telefonie w pionie będzie zupełnie inny niż na monitorze 4k 16:9. Poza tym trudno przewidzieć czasem jak się poukładają te divy jak wrzucisz do któregoś za dużo tekstu/za duży obrazek. Napisałem na szybko coś takiego, o to mniej więcej chodzi? <!DOCTYPE HTML> <head> <style type="text/css"> #header { width:100%; height:50px; } .button { float:left; width:25%; height:50px; } #name { float:left; width:50%; height:50px; text-align:center; } .clearfix { clear:both; } #button2 { text-align:right; } </style> </head> <body> <div id="header"> <div id="button1" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div id="name">NAZWA</div> <div id="button2" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div class="clearfix"></div> </div> </body> </html>
Cesash komentarz 24 marca 2017 Autor komentarz 24 marca 2017 Dnia 23.03.2017 o 10:38, Evo87 napisał: A witrynę masz opartą na czym, na divach? Ja bym sobie podzielił najpierw stronkę na dwa duże pojemniki, np. header i container - czyli nagłówek i treść. I w każdym z nich wrzucasz kolejne divy, po trzy - lewy, środek, prawy, ustalasz ich wielkość tak żeby łącznie było 100% i tyle, ustawią się proporcjonalnie. Wszystkie z "float:left", na koniec wyczyszczenie floata żeby nie rozwalać reszty strony, i sobie je ustawiasz w takiej wielkości jak chcesz. Tylko na początek taka uwaga - ustawienie stałych wartości wysokości czy szerokości (jak u Ciebie 50px wysokości) ma swoje minusy, bo taki system nie dopasowuje się do ekranu na którym jest wyświetlany - na telefonie w pionie będzie zupełnie inny niż na monitorze 4k 16:9. Poza tym trudno przewidzieć czasem jak się poukładają te divy jak wrzucisz do któregoś za dużo tekstu/za duży obrazek. Trzeba by więc pomyśleć o regułach media, żeby witryna się poprawnie wyświetlała na różnych urządzeniach. Napisałem na szybko coś takiego, o to mniej więcej chodzi? <!DOCTYPE HTML> <head> <style type="text/css"> #header { width:100%; height:50px; } .button { float:left; width:25%; height:50px; } #name { float:left; width:50%; height:50px; text-align:center; } .clearfix { clear:both; } #button2 { text-align:right; } </style> </head> <body> <div id="header"> <div id="button1" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div id="name">NAZWA</div> <div id="button2" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div class="clearfix"></div> </div> </body> </html> A witrynę masz opartą na czym, na divach? Ja bym sobie podzielił najpierw stronkę na dwa duże pojemniki, np. header i container - czyli nagłówek i treść. I w każdym z nich wrzucasz kolejne divy, po trzy - lewy, środek, prawy. Wszystkie z "float:left", na koniec wyczyszczenie floata żeby nie rozwalać reszty strony, i sobie je ustawiasz w takiej wielkości jak chcesz. Tylko na początek taka uwaga - ustawienie stałych wartości wysokości czy szerokości (jak u Ciebie 50px wysokości) ma swoje minusy, bo taki system nie dopasowuje się do ekranu na którym jest wyświetlany - na telefonie w pionie będzie zupełnie inny niż na monitorze 4k 16:9. Poza tym trudno przewidzieć czasem jak się poukładają te divy jak wrzucisz do któregoś za dużo tekstu/za duży obrazek. Napisałem na szybko coś takiego, o to mniej więcej chodzi? <!DOCTYPE HTML> <head> <style type="text/css"> #header { width:100%; height:50px; } .button { float:left; width:25%; height:50px; } #name { float:left; width:50%; height:50px; text-align:center; } .clearfix { clear:both; } #button2 { text-align:right; } </style> </head> <body> <div id="header"> <div id="button1" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div id="name">NAZWA</div> <div id="button2" class="button"> <input type="button" value="jakiś przycisk" /> </div> <div class="clearfix"></div> </div> </body> </html> Bardzo dziękuję za pomoc, tak wszystko w divach. W jaki sposób wtedy ustawiać wysokość, również w % i dla grafiki nadawać wielkości w html?
Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!
Możesz zadać pytanie bez konieczności rejestracji - wystarczy, że wypełnisz formularz.