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

zablokowanie rozszerzania się diva

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
0 głosów
225 wizyt
pytanie zadane 15 maja 2019 w HTML i CSS przez Skaravi Nowicjusz (120 p.)

Witam, tworzę fanowską stronę która ma za zadanie przedstawiać wyniki czasów z tras z gier. Wyniki wysyłane są do bazy i wyswietlane z powrotem na stronie w tabelce. Wykonałem stronę(zdjęcie) lecz ten szary obszar nie chce się powiększać wraz z dodawaniem tekstu.(niestety forum znacznie zmniejszyło szerokość zdjęcia ale chodzi mi o pokazanie co się dzieje z szarym obszarem). Co więcej jeśli nie mam dla tego obszaru zdefiniowanej wysokości np.80-90 % to po dodaniu większej ilości tekstu menu które znajduję się na górze całkowicie znika tj. podsuwa się do góry. Moje pytanie jest takie czy jest opcja żeby zablokować rozszerzanie się w góre diva a dół niech się rozszerza wraz z dodaniem tekstu ?

 


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transparent login form</title>
    <style>
       body{
		margin:0;
		padding:0;
	   }
		   body:before{
		   content: '';
		   position:fixed;
		   width:100vw;
		   height:100vw;
		   background-image:url(https://s5.ifotos.pl/img/imaginepn_qsrxrnr.png);
		   background-position:center center;
		   background-repeat:no-repeat;
		   background-attachment:fixed;
		   -webkit-background-size:cover;
		   background-size:cover;
	   
	   
	   }
	   .contact-form{
			position:absolute;
			top:50%;
			left:50%;
			-webkit-transform:translate(-50%,-50%);
			-moz-transform:translate;
			-ms-transform:translate;
			-o-transform:translate;
			transform:translate;
			width:700px;
			color:white;
			padding:80px 40px;
			background:rgba(0,0,0,0.4);
			height:90%;
			
		}
	   
	   .contact-form #menu button{
	   
		width:150px;
		height:80px;
		border-radius: 50px;
		color:rgb(255,165,0);
		background-color:black;
		border:1px solid rgb(255,165,0);

	   }
	   
    </style>
</head>
<body>
    <div class="contact-form">
      
		<div id="menu">
	
			<a href="trasy.html"><button>Trasy</button></a>
			&nbsp &nbsp
			<a href="glowna.html"><button>Start</button></a>
			&nbsp &nbsp
			<a href="druzyny.html"><button>Druzyny</button></a>
			&nbsp &nbsp
			<a href="info.html"><button>Info</button></a>
	
		</div>
	<div id="pole">
	<h1>baza</h1>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	<h2>tu ma byc wynik z bazy w tabelce</h2>
	
	
    </div>
</body>
</html>

1 odpowiedź

0 głosów
odpowiedź 16 maja 2019 przez Marcin Siniarski Gaduła (4,420 p.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transparent login form</title>
    <style>
       body{
        margin:0;
        padding:0;
        background-image:url(https://s5.ifotos.pl/img/imaginepn_qsrxrnr.png);
           background-position:center center;
           background-repeat:no-repeat;
           background-attachment:fixed;
           -webkit-background-size:cover;
           background-size:cover;
       }

       .contact-form{
            margin-left: auto;
            margin-right: auto;
            width:700px;
            color:white;
            padding: 40px;
            background:rgba(0,0,0,0.4);
             
        }
        
       .contact-form #menu button {
            width:150px;
            height:80px;
            border-radius: 50px;
            color:rgb(255,165,0);
            background-color:black;
            border:1px solid rgb(255,165,0);
       }
        
    </style>
</head>
<body>
    <div class="contact-form">
       
        <div id="menu">
     
            <a href="trasy.html"><button>Trasy</button></a>
            &nbsp &nbsp
            <a href="glowna.html"><button>Start</button></a>
            &nbsp &nbsp
            <a href="druzyny.html"><button>Druzyny</button></a>
            &nbsp &nbsp
            <a href="info.html"><button>Info</button></a>
     
        </div>
    <div id="pole">
    <h1>baza</h1>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
    <h2>tu ma byc wynik z bazy w tabelce</h2>
     
     
    </div>
    </div>
</body>
</html>

Proszę bardzo.

Nie używaj position absolute do pozycjonowania w body, naprawdę. Jeżeli chcesz wycentrować diva, ustaw margin-left i margin-right na auto. 

Podobne pytania

0 głosów
3 odpowiedzi 333 wizyt
pytanie zadane 11 marca 2018 w Rozwój zawodowy, nauka, praca przez focused Użytkownik (580 p.)
0 głosów
1 odpowiedź 214 wizyt
pytanie zadane 7 października 2022 w JavaScript przez Piotrek2713 Mądrala (5,520 p.)

93,433 zapytań

142,428 odpowiedzi

322,661 komentarzy

62,796 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

...