Forum Pasja Informatyki - Najnowsze z tagiem padding

Ustawienie grafiki "Strona w budowie" w Bootstrap 5 - jak pozbyć się marginesów?

Fri, 26 May 2023 11:46:59 +0000

Cześć, mam problem z usunięciem marginesów w bootstrapie, chcę ustawić dwie grafiki informujące, że strona jest w budowie - jedną dla komputerów jedną dla urządzeń mobilnych.

Próbuję tak:

    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container .row {
            margin: 0;
            padding: 0;
        }

        .full-width-img {
            width: 100%;
        }

        @media (min-width: 992px) {
            .full-width-img {
                width: 100vw;
            }
        }
    </style>
    <title>Strona w Budowie</title>
</head>
<body>
<div class="container-fluid full-width-img-container">
    <div class="row">
        <div class="col">
            <img src="img/mala.jpg.jpg" class="img-fluid d-block d-lg-none full-width-img" alt="mala grafika">
            <img src="img/b1.jpg" class="img-fluid d-none d-lg-block full-width-img" alt="duza grafika">
        </div>
    </div>
</div>

Przy okazji, jakich rozmiarów grafik powinienem użyć dla komputerów, a jakich dla urządzeń mobilnych?

[CSS] Padding nachodzi na siebie

Tue, 28 Jan 2020 20:44:41 +0000

Cześć i czołem, tym razem przychodzę z banalnym, niestety nie dla mnie problemem.

Mam problem z paddingiem, który na siebie nachodzi.

Próbowałem to załatwić marginem, ale psuło mi to całkowicie layout.

Jakieś pomysły jak mogę rozwiązać ten problem?

css z komponentu navigation

Zdjęcia wyglądają nie za ciekawie(są skalowane) dlatego podrzucam linka do imgura https://imgur.com/a/HsopHvb

.main_nav_container{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 11;
    padding: 34px;
}
.items_wrapper{
    list-style: none;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(7, 88, 88);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.logo_wrapper{
    z-index: 13;
}
.logo_big{
    text-transform: uppercase;
    color: white;
    font-size: 24px;
}
.logo_small{
    color: white;
    font-size: 12px;
}
.hamburger_button{
    background: none;
    border: none;
    z-index: 13;
    &:focus{
        outline: none;
    }
}
.ham_item{
    width: 40px;
    height: 4px;
    background: white;
    margin: 4px 0;
    transition: 0.1s;
}
.link{
    color: white;
    font-size: 40px;
    text-transform: uppercase;
}
.close_nav:nth-child(1){
    transform: rotate(45deg) translate(5px);
}
.close_nav:nth-child(2){
    transform: rotate(-45deg) translate(5px);
}
@media (min-width:1440px){
   .main_nav_container{
        padding: 56px 100px;
   }
   .logo_big{
       font-size: 36px;
   }
   .logo_small{
       font-size: 18px;
   }
   .logo_big, .logo_small{
       color: black;
   }
    .hamburger_button{
        display: none;
   }
    .items_wrapper{
        display: flex !important;
        position: relative;
        height: auto;
        width: auto;
        flex-direction: row;
        background: none;
        .single_link{
            margin: 0 24px;
            &:last-child{
                margin-right: 0;
            }
        }
        .link{
            color: black;
            font-size: 15px;
        }
    }
}

html z sekcji navigation

  <nav class="main_nav_container">
      <div class="logo_wrapper">
          <h1 class="logo_big">agmar</h1>
          <h3 class="logo_small">meble kuchenne.</h3>
      </div>
      <button class="hamburger_button" @click="showNav = !showNav">
          <div :class="{close_nav: showNav}" class="ham_item"></div>
          <div v-if="!showNav" class="ham_item"></div>
          <div :class="{close_nav: showNav}" class="ham_item"></div>
      </button>
      <transition name="fade">
      <ul class="items_wrapper" v-show="showNav">
          <li class="single_link"><a class="link">Home</a></li>
          <li class="single_link"><a class="link">O firmie</a></li>
          <li class="single_link"><a class="link">Realizacje</a></li>
          <li class="single_link"><a class="link">Oferta</a></li>
          <li class="single_link"><a class="link">Kontakt</a></li>
      </ul>
      </transition>
  </nav>

i css z komponentu slider

.owlOverlay{
  position: relative;
}
.main_carousel_container{
    width: 100%;
    height: 100vh;
}
.slider_item_wrapper{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
}
.slider_heading{
  margin: 0 33px 0 34px;
  font-size: 61px;
  font-weight: bold;
  line-height: 81.7%;
  text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
  color: white;
}
.slider_button{
  background: none;
  border: 2px solid white;
  width: 160px;
  height: 40px;
  color: white;
  text-transform: uppercase;
}
.first{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 60%;
}
.second{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40%;
}
.dotsContainer{
  width: 100%;
  position: absolute;
  // display: none;
  bottom: 70px;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  button{
    width: 12px;
    height: 12px;
    border: none;
    margin: 6px;
    border-radius: 20px;
    &:focus{
      outline: none;
    }
  }
  .active{
    background: white;
  }
}
.navContainer{
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  div{
    width: 50%;
    height: 52px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333333;
  }
}
.owl-prev::before{
  content: '';
  background: url('../assets/phone.png') no-repeat;
  position: absolute;
  left: 15px;
  bottom: 0;
  margin: auto;
  top: 0;
  width: 25px;
  height: 25px;
}
.owl-prev::after{
  content: '';
  background: url('../assets/next.png') no-repeat;
  background-size: 65%;
  background-position: center;
  position: absolute;
  right: 15px;
  bottom: 0;
  margin: auto;
  top: 0;
  width: 25px;
  height: 25px;
}
@media (min-width:1440px){
  .owlOverlay{
    padding: 150px 100px;
    width: 100%;
    height: 100%;
  }
  .main_carousel_container{
    width: 100%;
    height: 100%;
  }
  .owl-carousel, .owl-stage-outer, .owl-stage, .owl-item, .slider_item_wrapper{
    height: 100%;
  }
  .first{
    justify-content: flex-start;
    .slider_heading{
      margin: 0 72px;
      font-size: 42px;
      font-weight: lighter;
    }
  }
  .second{
    justify-content: flex-start;
    align-items: flex-start;
    .slider_button{
          margin: 24px 72px;
    }
  }
  .navContainer{
    position: absolute;
    bottom: 150px;
    left: calc(100% - 200px);
    width: 100px;
    .owl-prev, .owl-next{
      width: 50%;
      color: transparent;
      font-size: 0;
    }
  }
}

oraz html

<div class="owlOverlay" v-if="images.length > 0">
<carousel class="main_carousel_container" 
  :autoplay="false" 
  :loop="true" 
  :center="true" 
  :items="1" 
  :dotsContainer="'.dotsContainer'" 
  :nav="true"
  @changed="changed"
  :navContainer="'.navContainer'"
  :navText="['KONTAKT', 'OFERTA']"
>
      <div class="slider_item_wrapper" v-for="img in images" :key="img.id" :style="`background-image: ${img.style}, url(${img.url})`">
        <div class="first"><h1 class="slider_heading">{{img.heading_text}}</h1></div>
        <div class="second"><button class="slider_button">{{img.button_text}}</button></div>
    </div>
</carousel>
<div class="dotsContainer"></div>
<div class="navContainer"></div>
</div>

Padding w css

Mon, 30 Dec 2019 14:07:40 +0000

Witam, chciałbym umieścić obok siebie dwa divy jeden z szerokością 20%, a drugi 80%. Dodatkowo dla obu chciałbym mieć ustawiony padding powiedzmy z 20px z każdej strony. Moje pytanie teraz jak to połączyć, aby strona się nie rozjechała po dodaniu tego paddingu do szerokości strony ?

BEM - blok, element i mix, a zewnętrzna geometria

Wed, 11 Dec 2019 10:54:28 +0000

Cześć.

Mam pytanie dot. metodologi BEM. Głównie chodzi o różnicę w stosowaniu bloków, elementów i mixów.

Na sam początek czy dobrze rozumiem, że blok jest uniwersalny, po to aby można go było powielać, i całkowicie niezależny - czyli jeśli "wyrwę" go z jednej strony to mogę go również "wsadzić" do innej i będzie działać oraz wyglądać tak samo, i nie powinien wpływać na otoczenie, zawierać zewnętrznej geometrii typu: marginesy, paddingi, itp...?

Czy dobrze również rozumiem, że element jest zależny od bloku (musi być zagnieżdżony w pewnym bloku) i może zawierać style zewnętrznej geometrii?

Jeżeli faktycznie tak jest to mam praktyczne pytanie. Weźmy jako przykład prosty nagłówek:

<header class="header">
    <h1 class="header__title">Tytuł</h1>
    <p class="header__subtitle">Podtytuł</p>
    <p class="header__text">Jakiś tam tekst</p>
</header>

Chciałbym teraz w CSS ustawić headerowi padding tak, aby elementy wewnątrz niego były trochę "wcięte". Naturalnie dodałbym dla klasy header padding, ale BEM na to nie pozwala, bo ten węzeł jest blokiem.
Mogę więc (choć w tym przypadku wydaje mi się to złym rozwiązaniem) zrobić tak:

<header class="header">
    <div class="header__container">
        <h1 class="header__title">Tytuł</h1>
        <p class="header__subtitle">Podtytuł</p>
        <p class="header__text">Jakiś tam tekst</p>
    </div>
</header>

Czyli dodałem element div o klasie header__container, do którego już mogę dodać styl z paddingiem. Ale podążając za dokumentacją, są mixy. Więc wydaje mi się, że mogę zrobić tak:

<header class="header header__container">
    <h1 class="header__title">Tytuł</h1>
    <p class="header__subtitle">Podtytuł</p>
    <p class="header__text">Jakiś tam tekst</p>
</header>

I teraz węzeł header jest mixem, tzn. blokiem i elementem (wiem, że nazwa header__container nie jest poprawna, ale nie miałem pomysłu jak inaczej nazwać). I teraz CHYBA mogę w klasie header zastosować style ogólne, a w klasie header__container zawrzeć padding. ALE możliwe, że mogę też zrobić tak:

<header class="header">
    <h1 class="header__container header__container--title">Tytuł</h1>
    <p class="header__container header__container--subtitle">Podtytuł</p>
    <p class="header__container header__container--text">Jakiś tam tekst</p>
</header>

I w klasie header__container dla każdego elementu ostylować padding, a pozostałe style dla poszczególnych elementów umieścić w klasach modyfikatorów, ale to już w ogóle wydaje mi się całkowicie niepoprawne.

Czy moglibyście, proszę, odpowiedzieć na powyższe pytania i wyjaśnić, które podejście jest właściwe, o ile któreś z nich jest, a jeśli nie, to podać wskazówki? Jeden padding a ja nad tym myślę już chyba z godzinę... :)

Z góry dziękuję za pomoc!

Prawidłowe zastosowanie margin i padding

Fri, 15 Nov 2019 14:15:45 +0000

Cześć, mam nurtujące mnie pytanie :)
Potrafisz wyjaśnić mi w prosty sposób różnicę w użyciu pomiędzy margin a padding? Wiem, że pierwszy jest marginesem zewnętrznym a drugi wewnętrznym - jeden robi odstęp między elementami a drugi robi przestrzeń wewnątrz elementu... Pytanie, w jakich sytuacjach stosować margin a w jakich padding?

Mam np. 3 divy pod sobą ale są one zamknięte dodatkowo w kontenerze nadrzędnym, mam je odsunąc paddingiem od siebie? A np. mam strukturę dwóch artykułów:

<article>
<h1></h1>
<p></p>
</article>

<article>
<h1></h1>
<p></p>
</article>

to chcąc odsunąć dwa artykuły korzystam z marginesu, bo są to kontenery ale już do odsunięcia znacznika h1 od znacznika p mogę użyć paddingu?
Nie wiem po prostu jak to prawidłowo stosować a na ekranie po zakodowaniu szablonu .PSD często uzyskuję pozornie taki sam efekt za pomocą jednego i drugiego znacznika :)
Margin do kontenerów, padding do odsunięcia znaczników?

Szerokość tabeli zagnieżdzonej w menu wysuwanym, problemz paddingiem.

Tue, 19 Feb 2019 15:51:54 +0000

Dzień dobry.

Mam takowy problem, iż nie potrafie zastosować poprawnie paddingu do menu rozwijanego opartego na liscie zagnieżdżonej.

Chcę aby poszczególne "komórki" menu głównego były każda indywidualnej wielkości dostosowanej do długości napisu w niej zawartego i oczywiście każde rozwijane podmenu chcę aby było szerokości rodzica.

Nie definiuje sztywnej szerokości komórek (jedynie max width). I wszystko działa poprawnie. Listy podmenu dziedziczą szerokości rodziców.

Natomiast problem pojawia się kiedy dodaje do komórek menu głównego padding po 10px left, right (żeby to po prostu, ładniej wyglądało). Listy podmenu mają o ten padding mniejszą szerokość.

Czy ktoś byłby uprzejmy wyjaśnić co robię źle i jak się z tym uporać (zależy mi bardzo na zrozumieniu, nie samym rozwiązaniu, bo wczoraj siedziałem nad tym bardzo długo i nic nie wymyśliłem, ani nie znalazłem rozwiązania w sieci).

Dodatkowo jak rozwiązać problem jak w przypadku zakładki BLOG, która jest węższa niż jej dzieci. Bo normalnie po najechaniu, gdy rozwinie się menu komórka BLOG się rozszerza. Czyli docelowo jak to projektować by listy podmenu dziedziczyły szerokości rodziców wraz z ich paddingiem, ale przewidując przypadek gdzie podmenu potrzebuje większej szerokości niż rodzic, a więc to w sumie rodzic musiałby się dostosować do dziecka.

Mam nadzieję, że zrozumiecie moją idee

Załączam obrazek z zaznaczonym przykładowym miejscem problemu.

<!DOCTYPE HTML>
<html lang="pl">
<head>

<meta charset="utf-8" />
	<title> Simple Solution - We do it for You!</title>
	<meta name="description" content="We specialize in creating simple WWW website, virtual tours, movie tours and floorplans" />
	<meta name="keywords" content="www, virtual tours, virtual walks, movie tours, flooplans, websites, easy website,  simple website, video editing, weston-super-mare, bristol, somerset" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
	<header>
	<nav>
			<div id="top">
				<div id="left">
				<img src="images/logo.png">
				</div>
				<div id="right">
					<div id="lng">
					<div id="lang1">Language:</div>
						<ul id="lang"><a href="index.html"><img src="images/uk.png"> English</a>
							<li><a href="index.html"><img src="images/pl.png"> Polski</a></li>		
						</ul>
					</div>
				</div>
			</div>
	
	<div class="naw">
		<ol class="menu">
			<li><a href="index.html">CONTACT</a></li>
			<li><a href="index.html">BLOG</a>
			<ul class="submenu">
				<li><a href="index.html">FIRST</a></li>
				<li><a href="index.html">SECOND</a></li>
				<li><a href="index.html">THIRD</a></li>
				</ul>
			</li>
			<li><a href="index.html">WEBSITES</a>
			<ul class="submenu">
				<li><a href="index.html">ABOUT</a></li>
				<li><a href="index.html">PRICING</a></li>
				<li><a href="index.html">DEMOS</a></li>
				</ul>
			</li>
			<li><a href="index.html">FLOOR PLANS</a>
			<ul class="submenu">
				<li><a href="index.html">ABOUT</a></li>
				<li><a href="index.html">PRICING</a></li>
				<li><a href="index.html">DEMOS</a></li>
				</ul>
			</li>
			<li><a href="index.html">MOVIE TOURS</a>
			<ul class="submenu">
				<li><a href="index.html">ABOUT</a></li>
				<li><a href="index.html">PRICING</a></li>
				<li><a href="index.html">DEMOS</a></li>
				</ul>
			</li>
			<li><a href="index.html">VIRTUAL TOURS</a>
				<ul class="submenu">
				<li><a href="index.html">ABOUT</a></li>
				<li><a href="index.html">PRICING</a></li>
				<li><a href="index.html">DEMOS</a></li>
				</ul>
			</li>
			<li><a href="index.html">HOME</a></li>
		</ol>
	</nav>
	</nav>
	</header>
	<div class="picture">
	<img src="images/test.jpg">
	<div>
	<main>
	


	</main>
	
	<footer>
	© Simple Solutions 2019, All rights reserved 
	</footer>
	
	<script src="jquery.min.js"></script>
	<script>

	$(document).ready(function() {
	var NavY = $('.naw').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.naw').addClass('sticky');
	} else {
		$('.naw').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>
</body> 

</html>

body
{
	background-color: #2F3336;
	font-family: Verdana;
	font-size: 20px;
	color: #fff;
	margin: 0 !important;
}

.naw
{
	width: 100%;
	clear: both;
	background-color: #1c74b2;
	text-align: center;
	max-height: 20px;
}

#top
{
	width: 1000px;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
	
	z-index: 100;
	

}

#left
{
	width: 300px;

	max-height: 150px;
	float: left;
	background-color: #2F3336;
	
}
ul
{
	margin: 0px;
}

#right
{
	width: 700px;
	height: 150px;
	float: left;
	background-color: #2F3336;
	position: relative;
	background-image: url('../images/top.png');

}
#lng
{
position: absolute;
right: 0px;	
top: 10px;
font-size: 12px;
}

#lang1
{
	display: block;
	float: left;

}
#lang
{
	margin: 0px 0px 0px 3px;
	padding: 0px;
	display: block;
	float: left;
	background-color: red;

}

#lang > li
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	display: none;

}

#lang:hover > li
{
	display: block;
}
#lang:hover > li > a:hover
{
	color: red;
}

#lang:hover > a:hover
{
	color: red;
}



main
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	
}

.picture
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

footer
{
	background-color: #1c74b2;
	height: 20px;
	font-size: 12px;
	text-align: center;
	padding-bottom: 3px;
	padding-top: 6px;
}

a
{
	text-decoration: none;
	text-align: center;

}
a:link
{
	color: white;
}

a:visited
{
	color: white;
}

a:hover
{
	color: #152977;
}

h1.logo
{
	font-size: 50px;
	font-weight: 900;
	letter-spacing: 1px;
	margin-top: 20px;
	margin-left: 30px;
}

.menu
{
	width: 1000px;
margin: 0px;
	list-style-type: none;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 14px;
	display: inline-block;
}

.menu > li
{
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	 min-width: 63px;
	max-width: 120px;
	height: 20px;
	border-right: 1px  dashed #152977;
	display: block;
}

.menu > li:last-child
{
	border-left: 1px  dashed #152977;

}

.menu > li:hover
{
	background-color: #2f9ce9;
}
.menu > li > .submenu
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	height: 20px;
	/*display: none*/
}

.menu > li:hover > .submenu
{
	display: block;
}

.menu > li > .submenu > li
{
	
	max-width: 120px;
	background-color: #2f9ce9;
	position: relative;
	z-index: 100;
	border-top: 1px  dashed #152977;
}

.menu > li > .submenu > li:hover
{
	background-color: #1c74b2;
}
.blog
{
	list-style-type: none;
	margin: 0;
	padding: 10px;
	font-size: 18px;
	min-height: 40px;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

Brak reakcji na padding-bottom

Tue, 12 Feb 2019 12:40:07 +0000

Witam,
zawartość div'a nie chce mi się podnieść, aby była wyśrodkowana w pionie

<nav id="nav">
		
	<div class="logo">
		<a href="index.html"><img src="img/logo.png" width="40" height="40"/>
			<div id="logotxt">
				FAKE<span style="color:#DE341F;">.</span>NEWS
			</div>
		</a>
	</div>
			
	<div class="navbutton">
		<a href="oczekujace.html">OCZEKUJĄCE</a>
	</div>
			
	<div class="navbutton">
		<a href="shity.html">(S)HITY</a>
	</div>

</nav>

#nav
{
	text-align:center;
	height:50px;
	background-color:#DE341F;
}

.logo
{
	color:white;
	display:inline-block;
	padding:5px;
	height:40px;
}

#logotxt
{
	display:inline-block;
	font-size:40px;
	margin-left:20px;
}

.navbutton
{
	height:32px;
	width:200px;
	font-size:30px;
	display:inline-block;
	padding-top:8px;
}

Próbowałem już padding, margin, line-height, zero reakcjii, jak również różnych ich konfiguracji, np. zostawienie więcej miejsca w pionie pudełka. W poziomie, działa jak należy.

Dostrzega ktoś, gdzie robie błąd?

HTML divy, CSS-konfiguracja

Thu, 23 Aug 2018 20:53:18 +0000

Witam, od kilku dni uczę się html'a i przy okazji css'a dlatego postanowiłem stworzyć coś własnego i napotkałem problem z którym nie potrafię sobie poradzić, więc zwracam się o pomoc. Chcę uzyskać padding-top pomiędzy containerem a rectangle taki sam jak po lewej i prawie stronie czyli 50px, chodzi mi o stworzenie pewnego rodzaju ramki, może jest jakiś prostszy sensowniejszy sposób, proszę o pomoc.

<body>
    <div id="container">
        <div id="rectangle"></div>
    </div>

</body>
</html>

body
{
	width: auto;
	height: auto;
	background-image: url(img/background.JPEG);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: auto;

}

#container
{
	width: 1000px;
	height: 1000px;
	background-color: rgba(218, 189, 189, 0.3);
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

#rectangle
{
	width: 800px;
	height: 400px;
	background-color: rgba(218, 189, 189, 0.5);
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	padding: 50px;

	
}

Jaka była komenda na dodanie paddingu, który mieścił się w szerkości (nie poszerzał diva, tylko brał piksele w środku)

Fri, 15 Jun 2018 15:42:38 +0000

Tak jak w pytaniu, pamiętam że Pan Mirosław w którymś odcinku mówił o czymś takim. Chodzi mi o to, żeby nie dodawać pikseli do 'width:', a żeby ten padding sam odejmował w środku miejsce.

Jak dodać padding do wyniku działania skryptu php?

Thu, 17 May 2018 15:16:39 +0000

Dodaję w klasie css, w panelu prawym padding 45px, ale nic to nie daje. Co zrobić, żeby tekst "Konto zostało zarejestrowane" przesunać trochę w dół i prawą stronę?

padding rodzica

Thu, 11 Jan 2018 23:54:15 +0000

Witam.

Dlaczego nie działa z prawej strony headera nie ma paddingu ?

https://codepen.io/Ajzyn/pen/jYxxYe

Z góry dzieki !

Jak ustawić video by nie traciło height podczas zmniejszania okna przeglądarki ?

Tue, 21 Nov 2017 13:43:06 +0000

Chodzi mi o to by w białym tle ekranu monitora było video i podczas zmniejszania okna te video się zmniejszało proporcjonalnie  razem z ekranem :)


body{
	width:100%;
	height:500vh;
	margin:0;
	
}


.header,.footer{
	
	position:fixed;
	width:100%;
	height:8vh;
	background-color:rgb(0, 0, 0);
    z-index: 100;
	
}

.footer{

position:absolute;
top: 493vh;

}

.face,.twitter,.mail{
	
	width: 5vh;
  height: 0.5vh;

	float:left;
	margin-left:3vh;
	margin-top:1.5vh;
	
	
}

.face:hover,.twitter:hover,.mail:hover{
	
	
	
	float:left;
	margin-left:3vh;
	margin-top:1.5vh;
	border:0.2vh solid aqua;
  border-radius: 10%;
	width:5vh;
	height:5vh;
	
	
}







.home,.o_mnie,.oferta,.realizacje,.portfolio{
color:white;
float: right;
margin-right: 5%;
line-height: 8vh;
font-family: 'Anton', sans-serif;
letter-spacing: 0.2vh;
}

.home:hover,.o_mnie:hover,.oferta:hover,.realizacje:hover,.portfolio:hover{
	color:rgb(228, 24, 24);
	float: right;
	margin-right: 5%;
	line-height: 8vh;
	font-family: 'Anton', sans-serif;
	letter-spacing: 0.2vh;

	
	}

.sector{
		
	width: 14%;
	height: 94vh;
	background-color: rgb(52, 143, 185);
	float: left;
	margin-left:0%;
	margin-top:7vh;
	margin-right:0;
	
	animation: section_with_left 1s;
	animation-iteration-count: 1;  
		
	}
		
		@keyframes section_with_left{
		
		
		0% {margin-left: -14%;}
		100% {margin-left: 0%;}
		
		}



	.daro_foto{
		
		width:50%;
		height:16vh;
		float: left;
		
		margin-left:6.3vh;
		margin-top:5vh;
		background-image: url("./daro.jpg");
		background-size: 100% 100%;
		border-radius: 100%;
		filter: brightnes:100%);
		transform:rotate(360deg);
		border:solid 0.01vh rgb(241, 247, 248);
		animation:darek_kreci 1s;
		
		}
		
		
		@keyframes darek_kreci {
			0%   {transform:rotate(0deg); margin-left:-70vh;}
		 
			100% {transform:rotate(360deg);}
		}


.write_darek{
width:59%;
height: 9vh;
float: left;

margin-top:2vh;
margin-left: 5.5vh;
line-height: 4vh;

color:white;
clear: both;
font-family: 'Anton', sans-serif;
font-size:2vh;
text-align: center;
letter-spacing:0.3vh;
}


.junior_front_developer{

width: 80%;
height: 8vh;

float: left;
margin-top:51vh;
margin-left: 3vh;
clear: both;
font-size:2vh;
letter-spacing: 0.2vh;
text-align: center;
color:white;
font-family: 'Anton', sans-serif;

}



.site_web{
	
	width: 23%;
	height:5vh;
	position:absolute;
	line-height: 5vh;
	top:22vh;
	left:45vh;
	font-size:3.9vh;
	padding-left: 0.7vh;
	text-align: center;
	font-family: 'Anton', sans-serif;
	letter-spacing:1vh;
	color:rgb(92, 88, 88);
	}













.monitor{

width:35%;
height: 60vh;
background-image: url("./monitor.jpg");
background-size:100% 100%;
position:absolute;
left: 53%;
top:25vh;
padding: 2.93vh;
padding-left:3.1vh;



}


.video-wrapper{
	position: relative;
padding-bottom:56.25%;

}


video{

position: absolute;
width: 100%;
height: 100%;




}



x.mail_phone{
width: 15%;
height: 13vh;
float: left;
margin-top:2vh;
margin-left: 5vh;
clear: both;
font-size:2.3vh;
text-align: center;


letter-spacing:0.1vh;

}

x.e-mail{
float: left;
clear: both;
margin-top: 2vh;
font-size:2.2vh;
margin-left: 1vh;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script> 
<script src="jquery.js"></script>
<script src="scripts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bowlby+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">

</head>

<body>

 
            
<div class="header">
     
         <div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div> 
    
         <div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div>     
         <div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div> 
    


      
                <div class="home">HOME</div>
                <div class="o_mnie">O MNIE</div>
                <div class="oferta">OFERTA</div>
                <div class="realizacje">REALIZACJE</div>
                <div class="portfolio">PORTFOLIO</div>
     
      

</div>
 

   

    <div class="sector">
         <div class="daro_foto"> </div>   

         <div class="write_darek">DARIUSZ HOZER</div> 

         <div class="junior_front_developer" >Junior Front-End Developer / Freelancer</div>

   </div>

<!--zastanowić się gdzie wpieprzyć te kontakty
        div class="contact">KONTAKT</div><br><div class="mail_phone">

        <b>telefon:</b><br> 535 312 833<br<div class="e-mail"><b>e-mail:</b><br> wytycznedlastron@gmail.com<br></div></br></div>
        <div class="blue_straight"></div>
 to będzie wyzwanie -->



<!--napis 
 <div class="site_web">WITAM NA MOIM PORTFOLIO</div>
-->
<div class="monitor">

   <div class="video-wrapper">

        <video   controls autoplay loop >
                  <source src="videoplayback.mp4" type="video/mp4">
        </video>
    
   </div>
</div>








<div class="footer"></div>       
    
    

  
   
    
    
</body>

</html>

Problem z paddingiem i wyświetlaniem linku

Mon, 06 Mar 2017 19:53:57 +0000

Witam. Mam problem i potrzebuje go szybko rozwiązać. Mianowicie użyłem display: block; dla linku umieszczonego w elemencie nawigacji. Niby działa, lecz sztuczka ta nie obejmuje paddingu ustawionego w elemencie nawigacji.

Ma ktoś pomysł dlaczego tak jest i jak to naprawić?

ol a{
    text-decoration: none;
    color: #ffffff;
    display: block;
}

ol > li{
    line-height: 280%;
    color: white;
    float: left;
    height: 50px;
    padding: 6px 20px 6px 20px; 
    font-size: 18px;
    font-weight: 600;
    transition-duration: 400ms;
}

Brak odstępu między tekstem i kropkowaną linią w css.

Wed, 15 Feb 2017 15:58:09 +0000

#topbar
{
	background-color: #128870;
	color: white;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 25px;
	height: 120px;
}
	
#topbarL
{
	float: left;
	padding: 20px;
	width: 228px;
	text-align: center;
	border-right: 2px dotted #cccccc;
}
#topbarR
{
	float: left;
	padding: 20px;
	width: 670px;
	font-size: 16px;
	text-align: justify;
}

<div id="topbar">
			<div id="topbarL">
			<img src="tolkien4.png"/>
			</div>
			<div ig="topbarR">
				"Czasem niebezpiecznie jest wyjść z domu, gdy staniesz na drodze, nigdy nie wiadomo, dokąd cię nogi poniosą"-J.R.R. Tolkien. <br />
				Zapraszam do zapoznania się z witryną w całości poświęconą tematyce książek.
			</div>
			
			<div style="clear:both;"></div>
		</div>

W sekcji topbar mam zamiar umieścić grafikę oraz tekst. Oba te elementy zamierzam rozgraniczyć kropkowaną linią tak, jak zrobił M. Zelent w 2 odcinku kuru css. Grafika po lewej, a tekst po prawej stronie. Niestety z jakiegoś powodu tekst "przykleja się" do linii; nie zachowuje odstępu 20px (mam wrażenie, że nie działa padding). Proszę o wskazówkę/pomoc.

Padding - wypośrodkowanie napisu w Logo

Sun, 18 Sep 2016 20:13:58 +0000

Cześć,

w kursie HTML#4 mam problem z wypośrodkowaniem w pionie tekstu diva Logo. Starałem się zrobić wszystko jak w kursie, ale Tekst jest bliżej górnej krawędzi, niż dolnej. Proszę o wskazówki, co powinienem zrobić.

Dzięki.

<!DOCTYPE HTML>
<html lang="pl">
<head>
<!--Background pattern from subtlepatterns.com -->
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Monitory Komputerowe</title>
	<meta name="description" content="Zapoznaj się z rodzajami monitorów i zasadą ich działania!" />
	<meta name="keywords" content="monitory, monitory komputerowe, LCD, OLED" />
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
	
</head>
<body>

	<div id="logo">
		Wykład #1: Monitory komputerowe
	</div>
	<div id="container">
		<div id="spis"></div>
		<div class="slajd"></div>
	</div>
	<div id="stopka"></div>

</body>
</html>

body
{
	/* Background pattern from subtlepatterns.com */
	background-image: url(img/tlo.png);
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
}

#logo
{
	width: 100%;
	height: 50px;
	background-color: #485b3b;
	color: #ffffff;
	font-size: 36px;
	text-align: center;	
	text-transform: uppercase;
	padding: 5px 0px 5px 0px;
	letter-spacing: 3px;
	border-bottom: 2px solid #33402a
}

#container
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#stopka
{
	width: 100%;
}

Wielka zmiana z padding 0px na 1px

Mon, 22 Aug 2016 11:16:51 +0000

Dzień dobry, uczę się html'a i css'a z poradników pana Mirosława Zelenta i napotkałem pewien problem, z którym nie mogę sobie poradzić. Otóż w odcinku drugim kursu HTML, zajmujemy się wyglądem diva o id="logo". Przy paddingu 0px strona wygląda identycznie jak z kursu, ale gdy ustawię padding na 1px, wygląda to jakbym ustawił dużo więcej. Nie do końca rozumiem, na czym polega.

Kod html:

<body>
  <div id="container">
    <div id="logo">
      <h1>FANCY LOGO</h1>
    </div>
  </div>

</body>

Kod CSS:

#logo
{
  background-color: rgba(3, 169, 244, 0.65);
  padding: 1px;
  text-align: center;
}

Pozdrawiam!

Nawigacja się psuje gdy wstawię do niej logo.

Sat, 14 May 2016 18:49:48 +0000

Witam.

Mam problem, a mianowicie gdy wstawię grafikę do nawigacji, inne elementy idą w dól, próbuje z paddingami i rozmiarami i nic nie mogę zdziałać.

Tak to wygląda:

Kod HTML:

<div class="nav">
			<ul>
				<li>O NAS</li>
				<li>NASZE AUKCJE</li>
				<li style="padding: 10px 0 7px 0; height: 30px;"><img src="img/logotyp.png" height="30px"></li>
				<li>KOMENTARZE</li>
				<li>NAPISZ DO NAS</li>
			</ul>
		</div>

Tak wiem nie wolno stylizować in-line. To jest roboczo.

Kod CSS:

.nav
		{
			width: 1198px;
			height: 50px;
			background: rgba( 00, 00, 00, 0.5 );
			position: absolute;
			z-index: 10;
		}
		.nav > ul
		{
			height: 50px;
		}

		.nav > ul > li
		{
			display: inline-block;
			text-decoration: none;
			width: 216px;
			text-align: center;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 10px;
			padding-bottom: 7px;
			font-size: 20px;
			font-family: 'Oswald', sans-serif;
		}
		.nav > ul > li:hover
		{
			border-bottom: 3px solid #008CBA; 
		}

Pozdrawiam.

Co zrobić, by nie nakładały się okienka na siebie i przy okazji dziwnie nie znikały ?

Mon, 02 Nov 2015 10:09:34 +0000

http://cssdeck.com/labs/r7pl31re

Przesyłam do rozpatrzenia kod. W trakcie transition marginesy odpychają sąsiadujące ze sobą okienka i dziwnie znikają. Wszystkie są w napisane pod jednym #box i spakowane do głównego #ekipa. Żadne pozycje absolutne nie pomagają (myślałem, że bezwględne położenie tych pudełek (#box) ich nie ruszy względem siebie.....

Kiedy używac margin a padding

Sat, 22 Aug 2015 11:25:55 +0000

Np margin-top padding-top dają takie same efekty. Kiedy używać margin a kiedy padding?