Forum Pasja Informatyki - Najnowsze z tagiem margin-top

Div nie reguje na margin-top

Fri, 05 Nov 2021 13:52:19 +0000

Witam. Mam następujący problem. Mam kod który wyświetla fakturę i chciałbym przenieść div w którym znajdują się miejsca na podpisy o 100px niżej, jednak on nie reguje na margin-top. Jest to na samym dole kodu

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body style="font-family: DejaVu Sans">
        <h1>{{$details->seller}}</h1>
        <h2>Faktura nr: {{$details->created_at->format('d/m/Y')}}</h2>
        <h2>Data wystawienia: {{$details->created_at}}</h2>
        <table style="width: 100%; margin-bottom: 20px;">
            <tr>
                <th style="width: 50%; text-align: left;"><b>Sprzedawca</b></th>
                <th style="width: 50%; text-align: left;"><b>Klient</b></th>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->seller}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->client}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                        <label>NIP: </label>
                      <span>{{$details->seller_nip}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <label>NIP: </label>
                      <span>{{$details->client_nip}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->seller_postcode}} {{$details->seller_city}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>{{$details->client_postcode}} {{$details->client_city}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>ul. {{$details->seller_street}}</span>
                    </div>
                </td>
                <td style="text-align: left;" class="form-inline">
                    <div class="form-group">
                      <span>ul. {{$details->client_street}}</span>
                    </div>
                </td>
            </tr>
        </table>
        <hr>
        <table style="margin-top: 20px;" width="100%" border=1>
            <tr>
                <th>Lp.</th>
                <th>Nazwa</th>
                <th>Jedn.</th>
                <th>Ilość</th>
                <th>Cena netto</th>
                <th>Stawka</th>
                <th>Wartość netto</th>
                <th>Wartość brutto</th>
            </tr>
            <tbody>
                @foreach($products as $product)
                    <tr>
                        <td style="text-align: center;">{{$id += 1}}</td>
                        <td>{{$product->name}}</td>
                        <td style="text-align: center;">{{$product->unit_of_measure}}</td>
                        <td style="text-align: center;">{{$product->count}}</td>
                        <td style="text-align: right;">{{$product->price_netto}}</td>
                        <td style="text-align: center;">{{$product->vat_rate}}%</td>
                        <td style="text-align: right;">{{$product->price_netto * $product->count}}</td>
                        <td style="text-align: right;">{{$product->price_brutto * $product->count}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div style="width: 100%; margin-top: 20px;">
            <div style="width: 50%; float: left;">
                <table width="100%" border=1>
                    <tr>
                        <th></th>
                        <th>Wartość netto</th>
                        <th>Kwota VAT</th>
                        <th>Wartość brutto</th>
                    </tr>
                    <tbody>
                        <tr>
                            <td>Razem</td>
                            <td style="text-align: right;">{{$details->final_price_netto}}</td>
                            <td style="text-align: right;">{{$details->final_price_vat}}</td>
                            <td style="text-align: right;">{{$details->final_price_brutto}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="text-align: right; width: 50%; float: left;">
                <p style="margin-top: 0px;">Wartość netto: {{$details->final_price_netto}} PLN</p>
                <p>Wartość VAT: {{$details->final_price_vat}} PLN</p>
                <p style="font-weight: bold;">Do zapłaty: <b style="color: #0066ff">{{$details->final_price_brutto}} PLN</b></p>
            </div>
        </div>
        <div style="clear: both; width: 100%; margin-top: 100px;">
            <div style=" width: 50%; float: left;">
                <p>....................................</p>
                <p>Podpis sprzedawcy</p>
            </div>
            <div style=" width: 50%; float: left; text-align: right;">
                <p>....................................</p>
                <p>Podpis nabywcy</p>
            </div>
        </div>
    </body>
</html>

Margin-top przy footerze

Fri, 31 Jan 2020 22:12:36 +0000

Witam mam pytanie dotyczące margin w stopce. Otóż chciałbym zrobic pod dwoma divami tile stopke a pomiedzy nimi np 200px odstepu (stopka ma z gory 200px wolnego miejsca) i chciałbym się dowiedzieć czemu w tym przypadku nie działa margin-top:200px;

Czy można to zrobić używając tylko margin-bottom:200px; w divie tile?

Margines ten moge zrobic tez uzywajac pomiedzy footerem a divami tile dopisku <div style="clear:both;"></div>.

Czy w takim razie jest sens dopisywania clear:both w stopce skoro można zrobic pomiędzy nimi diva czyszczącego. Liczę na odpowiedź

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style>
	body
	{
		margin:0;
	}
.tile
{
	width:300px;
	height:300px;
	background-color:#323253;
	margin:10px;
	margin-bottom:0;
	float:left;
}
#footer
{
	clear:both;
	background-color:black;
	width:100%;
	height:200px;
	margin-top:500px;
}



</style>


</head>
<body>


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



</body>
</html>

Margin-top odsuwa div'a, wraz ze swoim potomkiem od topu strony

Tue, 04 Jul 2017 22:07:56 +0000

Witam.

Pewnie to jakiś banalny problem, ale potrafi ktoś mi wyjaśnić dlaczego jak usunę border div-haslo jest odsuwany od góry body, a nie od góry wrapper'a? Tzn. margin-top odsuwa mi div'a, wraz z jego rodzicem od topu strony.
https://jsfiddle.net/rfvfLcew/1/#

Z góry dzięki

proszę mi podpowiedzieć jak ustawić odstęp margin-top

Thu, 11 May 2017 12:55:29 +0000

Witam.

Ewentulanie walczyłem przez 3 dni. Nie mam ochoty ani czasu więcej walczyć, proszę podpowiedzieć bo ja czegoś nie rozumiem. A właściwie czemu nie mogę ustawić dla wewnętrznego div-a margin-top. Udaje mi się dodać odstęp ale posuwa się też i rodzic. A rodzic ma zostać przyklejony.

Chodzi o blok Header. Żeby tam gdzie zielona linia powstał odstęp o 10px. Zaraz widać ten odstęp bo jest to obrazek z testów, dlatego proszę nie pisać że i tak mam odstęp ;-P

P.S Proszę o wytłumaczenie lub o link gdzie można o tym poczytać.

overflow-y + margin-left[top]...

Sat, 17 Dec 2016 21:40:13 +0000

2 błedy!

1. ustawiam divowi margines 50 jego dziecku -10 a przesuwa mi do góry jednego i drugiego

2. ustawiam overflow-y na hidden rodzic wraca z powrotem na swoje miejsce, ale jak ustawie margin-left: -20px to go scina DLACZEGO! jak ***** tylko w pionie ustawiam brak widoczności to czemu bok również? overflow-x na visible nie pomaga. Co robię źle lub co jest nie tak z przeglądarkami?????

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<meta charset="UTF-8">
	<style>
		#test{
			margin: 50px;
			width: 100px;
			height: 200px;
			overflow-y: hidden; // overflow-x nie pozwala również na wyświetlanie osi x?;
			background: red;
		}

		#test2{
			margin-top: -10px; //cały element jest przesuwany do góry !!!!;
			margin-left: -20px;
			width: 50px;
			background: green;
		}
	</style>
</head>
<body>
	<div id="test">
		<div id="test2">coś tu jest</div>
	</div>

</body>
</html>

Dlaczego margin-top, bottom nie działa na img?

Tue, 20 Sep 2016 15:28:40 +0000

Witam, otóż są jakieś brzydkie marginesy górne i dolne, chce je usunąć - powstawiałem margin: 0px; w css'ie, tutaj też:

<img src="img/omnie.jpg" style="width: 100%; margin: 0px;"></img>

I nie działa, zostają brzydkie marginesy :/

Jak obniżyć pionowe menu?

Mon, 05 Sep 2016 16:48:59 +0000

Witam.
Tworzę stronkę i natrafiłem na pewien problem.
Strona ma posiadać główne poziome menu oraz menu pionowe po lewej stronie.

Niestety gdy próbuję obniżyć menu pionowe w css (margin-top), menu poziome również leci mi w dół.

Co zrobić żeby obniżyć tylko pionowe menu?

<!DOCTYPE HTML>
<html>
<head>

	<title>Motocykl</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	
	</head>
	<body>
	
	
	<ul id="topnav">
	<li><a href="historia.html">HISTORIA</a></li>
	<li><a href="sport.html">SPORT</a></li>
	<li><a href="enduro.html">ENDURO</a></li>
	<li><a href="turystyczne.html">TOURING</a></li>
	<li><a href="cruisery.html">CRUISER</a></li>
	<li><a href="naked.html">NAKED</a></li>
	<li><a href="choppery.html">CHOPPER</a></li>
	<li><a href="strona.html">ABOUT</a></li>
	</ul>
	
	<ul id="bar">
	<li><a href="aprilia.html">Aprilia</a></li>
	<li><a href="bmw.html">BMW</a></li>
	<li><a href="ducati.html">Ducati</a></li>
	<li><a href="harley.html">Harley Davidson</a></li>
	<li><a href="honda.html">Honda</a></li>
	<li><a href="kawasaki.html">Kawasaki</a></li>
	<li><a href="ktm.html">KTM</a></li>
	<li><a href="yamaha.html">Yamaha</a></li>
	<li><a href="suzuki.html">Suzuki</a></li>
	<li><a href="romet.html">Romet</a></li>
	
	</ul>
	
	
	</body>
</html>

CSS:

body
{
	background-image: url("tlo.jpg");
}



#topnav 
{

width:800px;
margin:0 auto;
list-style:none;
margin-top:
}
#topnav li {
float:left;
}
#topnav a {
display:block;
text-align:center;
width:100px; /* fixed width */
text-decoration:none; 
color: white;
background-image: url("black.jpg");
}

#bar
{
	margin-top:100px;
	font-size:19px;
	list-style-type:none;
	width:100px;
	
}

#bar li a 
{
	padding:15px;
	display: block;
	color: white;
	padding: 8px 16px;
	text-decoration: none;
	
	
}

#bar li a:hover
{
	background-color: #000000;
	color:white;
}

Fixed top navbar z top margin

Tue, 02 Aug 2016 18:08:24 +0000

Chciałbym przypiąć navbara bootstrapowego do gory mojej strony ale chcialbym dolozyc marginesu troche aby wyswietlala sie jedna linijka tekstu ktory dodalem na "calkowita" gore strony. Mam kombinowac z margin-top w klasie navbar-fixed-top czy zrobic to inaczej za pomoca ustawiania pozycji (?).

Jak działa margin-top?

Wed, 27 Apr 2016 13:08:44 +0000

Witam, mam pytanie. Jak działa margin top?

Na moje rozumowanie, jeśli ustawię margin-top na 99%, to div powinien ustawić się na sam dół ekranu, ale u mnie w domu np.margin-top: 35% powoduje, że znajdzie się div na samym dole, a u kolegi margin-top:40%. Wiem, że to zależy od wielkości ekranu, ale mógłby mi ktoś wytłumaczyć jak mam tego używać, żeby robić to poprawnie i na większości monitorów element pojawiał się w tym samym miejscu?